<p>Two years ago, we published a post near the time that we were <a href="https://www.elastic.co/blog/making-kibana-accessible">kicking off our accessibility work</a>. Since then, we’ve come a long way in our understanding of what it means to build an accessible product and best practices for doing so. With 7.6, we’ve shipped quite a few accessibility improvements and fixes all over Kibana, and thought now would be a good time to highlight some of our recent work.
</p>
<h2>Introducing our accessibility statement</h2>
<p>The goals for our accessibility efforts go beyond compliance: We want all humans to feel empowered to understand and effect the world when they use Elastic products. Not as focused on minutia as a traditional <a href="https://www.section508.gov/sell/vpat">VPAT</a> might be, we hope that by putting our accessibility work front-and-center in an easy-to-read format, we can show our commitment to building an inclusive product for everyone. You can find our statement under <a href="https://www.elastic.co/guide/en/kibana/master/accessibility.html">Accessibility</a> in the Kibana docs. (If you are interested in our formal VPAT, please message <a href="mailto:accessibility@elastic.co">accessibility@elastic.co</a>.)
</p>
<h2>Recent highlights</h2>
<h3>An accessible EUI</h3>
<p><a href="https://github.com/elastic/eui">EUI</a>, or Elastic UI, is the component library that’s behind all of the UI that we create at Elastic. An accessibility focus at this foundational layer of our work ensures solid building blocks supporting every piece of UI we create. By consolidating all of our most used patterns in one area, we’re able to provide consistent experiences and <a href="https://github.com/elastic/eui/issues/2262">handle lots of accessibility concerns</a> before the scores of implementing developers — from Kibana, to Elastic Cloud, to every other UI team, internal and external — even get to work. We still have a <a href="https://github.com/elastic/eui/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc+label%3Aaccessibility+">list of improvements</a> we're looking to implement in EUI, but we’re quickly approaching a point where we’ve checked off all of the obvious boxes and can move on to improving Elastic-specific use cases.
</p>
<p>To see some of the things we strive to instill in EUI and in our consuming app, take a look at our recently published <a href="https://elastic.github.io/eui/#/guidelines/accessibility">Accessibility Guidelines</a> or jump into <a href="https://github.com/elastic/eui/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc+label%3Aaccessibility">EUI’s Github issue tracker</a> to get involved with the details.
</p>
<p><img src="https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blt5c3ff9f34f679ab4/5e4bf98d7c62095ce7b38116/accessibility-guidelines-eui-shot-blog.jpg" data-sys-asset-uid="blt5c3ff9f34f679ab4" alt="Elastic EUI Accessibility Guidelines" style="display: block; margin: auto;">
</p>
<h3>Navigating around Kibana</h3>
<p>Kibana’s big. And loaded with features. And built by a huge, diverse, and growing team. So, sometimes, we can miss the little things that make a UI that’s quick and easy to navigate. With 7.6, we’ve gone back and updated all the products within Kibana with a more complete <a href="https://github.com/elastic/kibana/issues/37539">heading</a> and <a href="https://github.com/elastic/kibana/pull/46569">landmark</a> structure to make navigating with assistive tech that much easier.
</p>
<p><img src="https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/bltbee971e4cdea641d/5e4bf9ba7c62095ce7b3811c/accessibility-guidelines-kibana-nav-blog.jpg" data-sys-asset-uid="bltbee971e4cdea641d" alt="Making Kibana navigation accessible" style="display: block; margin: auto;">
</p>
<h2>Mindset shift</h2>
<p>Years ago, we promised to continue improving our process around creating accessible experiences for everyone. Since then, we’ve been able to imbue many parts of our process with a larger accessibility focus:
</p>
<ul>
	<li>Members of our QA team have trained on how to use automated tools and screen readers to evaluate accessibility.</li>
	<li>Our design team is trained to think about accessibility up front, which means the design and UX is accessible from the ground up.</li>
	<li>Many PRs now start with accessibility already on the minds of implementing developers from our continued education efforts through Slack, team training, and engagement at company events.</li>
	<li>Accessibility specs for our more complicated components (e.g., <a href="https://github.com/elastic/eui/issues/2404">EuiSuggest</a>, <a href="https://docs.google.com/document/d/16Bje5R00cybqXeCvA0tLM4v8Dl3GwJG6o4etPCiChRM/edit?usp=sharing">EuiDataGrid</a>).</li>
</ul>
<p>But we’re most excited about our rollout of automated accessibility testing powered by <a href="https://www.deque.com/axe/">axe</a>. Automated testing can’t find every problem but it’s great at picking off that low-hanging fruit so that we can focus on the harder problems. <a href="https://github.com/elastic/kibana/pull/43584">Kibana is already up and running</a> with <a href="https://github.com/elastic/kibana/pull/54209">several high-level tests</a> and <a href="https://github.com/elastic/eui/pull/2569">EUI has kicked off the process</a> to follow suit.
</p>
<h2>Future work</h2>
<p>There’s always more work to do but here are some things that we’ve got our sights set on for the immediate future.
</p>
<h3>An accessible Charts library</h3>
<p>As Elastic Charts grows to become the future of all charting around Elastic, we recognize that it needs to work for all of our users. We’ve been talking about the best ways we can support sighted and vision-impaired screen reader users and have some concrete ways we plan to improve. This won’t be a one-and-done sort of effort, so we encourage you to monitor our progress at <a href="https://github.com/elastic/elastic-charts/issues/300">elastic-charts#300</a> and get involved.
</p>
<h3>Better navigation</h3>
<p>Navigating between pages in <a href="https://en.wikipedia.org/wiki/Single-page_application">SPAs</a> has always been a little more difficult for screen reader users than traditional websites have been. We have a <a href="https://github.com/elastic/kibana/issues/56232">big redesign</a> coming together for how to improve our navigation&nbsp;for everyone and are expressly tracking some of the <a href="https://github.com/elastic/kibana/issues/42379">high-level accessibility issues</a> that we plan on tackling at the same time.&nbsp;
</p>
<h2>How you can help</h2>
<p>Accessibility is a critical part of the user experience. If you'd like to help us make our interfaces more accessible, you can browse <a href="https://github.com/elastic/eui/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc+label%3Aaccessibility">EUI's</a> or <a href="https://github.com/elastic/kibana/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc+label%3AProject%3AAccessibility">Kibana’s</a> accessibility issues to find areas that need improvement. If you find a part of our UI that's inaccessible to you, please file an issue or <a href="mailto:accessibility@elastic.co">email</a> so we can work together to find a solution.
</p>

accessibility-blog-banner.png

accessibility-blog-thumb.png

Our accessibility journey: Mindset and tools

Start free trial

Blog Footer CTA

Sign up for Elastic Cloud free trial

Michail Yasonik

<p>By submitting you acknowledge that you've read and agree to our <a href="/legal/elastic-cloud-account-terms" target="_self">Terms of Service</a>, and you agree to receive the <a href="/legal/privacy-statement#how-we-use-the-information" target="_self">selected communications</a> at the contact details you provided above. See <a href="/legal/privacy-statement/" target="_self">Elastic’s Privacy Statement</a> for more details or to opt-out at any time.</p>

Communication Preferences - ONLY for /communication-preferences

<p>送信することにより、Elasticの<a href="/jp/legal/elastic-cloud-account-terms" target="_self">利用規約</a>を読み、同意したものと見なされます。また、上記で提供された連絡先に<a href="/jp/legal/privacy-statement#how-we-use-the-information" target="_self">特定の通知</a>が送信されることを認めたことになります。詳細については、<a href="/jp/legal/privacy-statement/" target="_self">Elasticのプライバシーポリシー</a>をご覧ください。これらの同意についてはいつでもオプトアウトすることが可能です。</p>

<p>By submitting you acknowledge that you've read and agree to our <a href="/legal/elastic-cloud-account-terms" target="_blank">Terms of Service</a>, and that Elastic may <a href="/legal/privacy-statement#how-we-use-the-information" target="_blank">contact you</a> about our related products and services, using the details you provide above. See <a href="/legal/privacy-statement/" target="_blank">Elastic’s Privacy Statement</a> for more details or to opt-out at any time.</p><p>By submitting this form, I agree to Elastic sharing my contact information with Google Cloud. I also agree to Elastic giving my information to the vendor for the purpose of shipping my food package.</p>

GDPR Text + Google Cloud

<p>送信することにより、Elasticの<a href="/jp/legal/elastic-cloud-account-terms" target="_self">利用規約</a>を読み、同意したものと見なされます。また、関連する製品やサービスについて、上記で提供された情報を使用してElasticから<a href="/jp/legal/privacy-statement#how-we-use-the-information" target="_self">連絡する</a>場合があることを認めたことになります。詳細については、<a href="/jp/legal/privacy-statement/" target="_self">Elasticのプライバシー</a>ポリシーをご覧ください。これらの同意についてはいつでもオプトアウトすることが可能です。</p><p>このフォームを送信することにより、Elasticが私の連絡先情報をGoogle Cloudに共有することに同意します。また、Elasticが私に食材パッケージを発送する目的で私の情報をベンダーに提供することにも同意します。</p>

<p>By submitting you acknowledge that you've read and agree to our <a href="/legal/serverless-preview-terms" target="_blank">Terms of Service</a>, and that Elastic may <a href="/legal/privacy-statement#how-we-use-the-information" target="_blank">contact you</a> about our related products and services, using the details you provide above. See <a href="/legal/privacy-statement/" target="_blank">Elastic’s Privacy Statement</a> for more details or to opt-out at any time.</p>

Serverless GDPR Text

<p>送信することにより、Elasticの<a href="/jp/legal/serverless-preview-terms" target="_self">利用規約</a>を読み、同意したものと見なされます。また、関連する製品やサービスについて、上記で提供された情報を使用してElasticから<a href="/jp/legal/privacy-statement#how-we-use-the-information" target="_self">連絡する</a>場合があることを認めたことになります。詳細については、<a href="/jp/legal/privacy-statement/" target="_self">Elasticのプライバシー</a>ポリシーをご覧ください。これらの同意についてはいつでもオプトアウトすることが可能です。</p>

<p>By submitting you agree to <a href="/agreements/global/cloud-services-monthly" rel="nofollow">Elastic Cloud Terms of Service</a>. Your personal data will be processed in accordance with <a href="/legal/privacy-statement">Elastic's Privacy Statement</a>.</p>

Cloud Trial GDPR Text

<p>送信することにより、<a href="/jp/agreements/global/cloud-services-monthly" rel="nofollow">Elastic Cloud利用規約</a>に同意したものとみなされます。個人情報は<a href="/jp/legal/privacy-statement">Elasticのプライバシーポリシー</a>に基づいて取り扱われます。</p>

<p>By submitting you acknowledge that you've read and agree to our <a href="/legal/terms-of-use" target="_blank">Terms of Service</a>, and that Elastic may <a href="/legal/privacy-statement#how-we-use-the-information" target="_blank">contact you</a> about our related products and services, using the details you provide above. See <a href="/legal/privacy-statement/" target="_blank">Elastic’s Privacy Statement</a> for more details or to opt-out at any time.</p>

Newsletter GDPR Text

<p>送信することにより、Elasticの<a href="/jp/legal/terms-of-use" target="_self">利用規約</a>を読み、同意したものと見なされます。また、関連する製品やサービスについて、上記で提供された情報を使用してElasticから<a href="/jp/legal/privacy-statement#how-we-use-the-information" target="_self">連絡する</a>場合があることを認めたことになります。詳細については、<a href="/jp/legal/privacy-statement/" target="_self">Elasticのプライバシー</a>ポリシーをご覧ください。これらの同意についてはいつでもオプトアウトすることが可能です。</p>

Explore similar demos

Overview

Speakers

Close

See more insights

The content on this page is not available in the selected language. As Elastic grows globally, we continue to support content in multiple languages.

The content on this page is not available in the selected language.

このページのコンテンツは、選択された言語ではご利用いただけません。Elasticでは現在、コンテンツをさまざまな言語でご利用いただけるよう取り組んでいます。お使いの言語が準備されるまでお待ちくださるようお願いいたします。

Author

Articles by

Watch now (no PT)

Watch now

See all top stories

すべてのトップストーリーを見る

All (no PT translation)

Contact information

Press Release

Share on Reddit

Share this story

Share by Email

Thank you for your interest!

Contact Info

Follow us on Youtube

Load More

Share on LinkedIn

Search Integrations

All Solutions

Video for

See when this webinar starts in my time zone

現在のタイムゾーンでこのウェビナー開始時間を見る

Register to Watch

See All Posts

Can't make it? Register and we'll send you the recording. You'll also receive an email with related content

他の予定と重なってしまった…という場合も、問題ありません。参加登録されると、録画配信をご利用いただけます。関連コンテンツのご案内もメールでお届けします。

Author

Articles by Michail Yasonik

Our accessibility journey: Mindset and tools

Sign up for Elastic Cloud free trial