30 August 2017 Engineering

Making Kibana Accessible

By Tim RoesAlex FrancoeurCJ Cenizal

Try this feature today. Download 6.0.0 preview release to become an Elastic Pioneer.

Inclusivity and diversity are primary ingredients of Elastic’s culture. Those two values are present in just about every aspect of our company. Elastic consists of nearly 600 globally distributed employees in more than 30 countries around the world, all with very unique backgrounds and life stories. We have company wide discussions that are not only internal updates, but refreshingly optimistic and unbiased responses to some of the more worrisome issues in recent news. Our CEO, Shay Banon, will send follow up emails that result in paid time off to volunteer at your favorite charity and direct responses to US immigration policies earlier this year. We even have a slack channel focused specifically on the topics of diversity, inclusion and belonging. The list goes on.

At our core, Elasticians are open-minded and inclusive of all walks of life. We believe our products should be an extension of our company culture and uphold the same values. It is for this very reason that we’ve started our journey to make Kibana accessible to all.

Adios, Kibana Pink

In 6.0, you'll notice that our signature pink is gone from the side navigation. Not that we don't like pink, but the low level of contrast it had with the white text made the navigation difficult to read for many users.

A screenshot showing the new Kibana 6 color scheme with a better contrast


We improved the color contrast throughout Kibana, using recommendations from the WCAG 2.0 (Web Content Accessibility Guidelines) by the World Wide Web Consortium. The WCAG are widely accepted recommendations for accessibility and are used as the basis for all our efforts.

Screen Reader Friendly

Fixing contrast levels is just one part of improving Kibana's accessibility. We're also focused on improving Kibana's keyboard accessibility and broader support for assistive technology such as screen readers.

For example, though icons are beautiful and simple, screen readers can’t read them unless they’re accompanied by labels. Labeling parts of the user interface isn’t just limited to text alternatives for icons. We use the WAI-ARIA standard and attributes to give our user interface all the semantic information assistive technologies might profit from - like signaling the state of collapsible panels, making autocompletion properly accessible and much more.

Improved Keyboard Navigation

Improving the accessibility of a user interface has the nice side effect of improved usability for all users. This is most evident in the area of keyboard accessibility. If you have tried using Kibana purely by keyboard you may have noticed it isn’t the best experience. Prior to 6.0, some parts of the Kibana UI were completely unreachable and other areas trap your keyboard focus as soon as you interacted with them. Our goal is to improve keyboard navigation for all, both for users who require it and users who prefer this form of navigation. This doesn’t only involve fixing some technical debt, where we have not strictly followed HTML semantics (e.g., not using`buttons` where `buttons` should have been used). We are also investigating and developing new interaction models for parts of the interface, as you can see in our new keyboard mode for code editors.

Just the Beginning. Feedback is Welcome.

We didn't have accessibility in mind when we originally designed Kibana. We acknowledge that fact and are now fixing our past mistakes as well as improving our process for new features. With 6.0, we begin our journey to make Kibana truly accessible. To track our progress, we welcome you to look at the accessibility meta issue, issues tagged with the accessibility label and contribute to the Kibana repository.

Making an accessible user interface that’s primary focus is data exploration and visualization is not an easy task. If you’re a user that depends on any of these evolving accessibility features, we would greatly value your feedback. We’d love to hear any ideas or experiences you’ve had with similar products. If you’d like to participate in Elastic’s accessibility initiative, we would really appreciate if you would get in touch with us by sending an email to accessibility@elastic.co.

As you explore the 6.0 preview releases, we invite you to submit feedback a part of our Pioneer Program. It helps us make Kibana better, plus there’s the bonus of an opportunity to get some cool swag.