Accessibility

[markov00]

📦 Meta issue for Accessibility project

Is your feature request related to a problem? Please describe. Charts should be made accessible from users with disabilities.

Describe the solution you'd like The chart should provide:

• alternative text
• keyboard navigation
• fill patterns

Describe alternatives you've considered Here are some reference links to accomplish that:

Alternative text:

• https://medium.com/nightingale/writing-alt-text-for-data-visualization-2a218ef43f81

Chart accessibility

• https://www.highcharts.com/blog/post/best-chart-accessibility-practices/
• https://www.elsevier.com/connect/making-charts-accessible-for-people-with-visual-impairments
• https://www.a11ywithlindsey.com/blog/accessibility-d3-donut-charts
• https://www.benjystanton.co.uk/blog/a-plan-for-accessible-charts/
• Doug Schepers - Invisible Visualization https://www.youtube.com/watch?v=f4P6JsAKrDM
• useR! International R User 2017 Conference Interactive graphs for blind and print disabled people
• https://www.youtube.com/watch?v=-oohdBWsESQ&feature=emb_logo&ab_channel=ICSE

Canvas accessibility

• https://www.w3.org/Talks/2014/0510-canvas-a11y/#1
• https://developer.paciellogroup.com/blog/2015/02/html5-canvas-sub-dom/
• https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility

Additional context

• General info on data visualization accessibility: https://equalentry.com/data-visualization-tips-for-making-complex-graphical-content-accessible-to-all-accessibility-nyc-meetup-recap/

• dataviz A11y https://github.com/dataviza11y/resources

• What we can learn from Apple's dataviz accessibility by Sarah L. Fossheim

• How (not) to make accessible data visualizations, illustrated by the US presidential election. by Sarah L. Fossheim

• An introduction to accessible data visualizations with D3.js by Sarah L. Fossheim

• An intro to designing accessible data visualizations by Sarah L. Fossheim

• Writing Alt Text for Data Visualization

• Why Accessibility Is at the Heart of Data Visualization

• How Does This Data Sound?

Kibana Cross Issues

• [ ] https://github.com/elastic/kibana/issues/36386
• [ ] https://github.com/elastic/kibana/issues/10726
• [ ] https://github.com/elastic/kibana/issues/22142
• [x] https://github.com/elastic/kibana/issues/11842
• [ ] https://github.com/elastic/kibana/issues/117540
• [x] https://github.com/elastic/kibana/issues/75206

Checklist

• [x] this request is checked against already exist requests
• [ ] every related Kibana issue is listed under Kibana Cross Issues list
• [x] kibana cross issue tag is associated to the issue if any kibana cross issue is present

Phasing

• [ ] WCAGA https://github.com/elastic/elastic-charts/issues/621

[markov00]

from @myasonik

Demo of a simple accessible canvas: https://codepen.io/myasonik/pen/mdbwxNY

Tabbable canvas example: https://www.html5accessibility.com/tests/canvas.html

[myasonik]

Just to elaborate a bit further:

Making a truly accessible canvas is... difficult. And currently a lot of the tools to do so seem to be experimental (namely, hit regions ). So, my "accessible" demo above provides a SR alternative to the canvas that can by dynamically generated.

It's not a complete solution for all cases but it's a good place to start from.

[markov00]

Tableau narrative: https://www.tableau.com/about/blog/2016/8/bringing-power-natural-language-tableau-58325 https://narrativescience.com/products/quill/extensions/tableau/

[markov00]

Added dataviz A11y group resources

[markov00]

Added few Sarah Fossheim's articles and one from Amy Cesal about writing alt text for datavis

[alexstine]

Hello everyone,

My employer uses Kibana to monitor servers and I find it very hard to use. None of the charts read, OCR can't make any sense out of them, and by the time I navigate to a table I need, the system outage could be over. I mean, it really is a lose lose situation.

Are there any plans to continue pushing this one forward? Being totally blind in the SysOps space is probably a rarity in itself, but it would be awesome if I could use the same tool as my team, have access to the same info, and not be out of luck or 15min late to the party every time. Kibana is especially nice for viewing stats across multiple servers/containers and resources. Stuff that would take forever to do server by server.

My background is also in accessibility testing and development. Please do let me know if there's anyway I can help.

Thanks.

[nickofthyme]

Hey @alexstine, thanks for your comment!

First of all, our accessibility efforts in charts is just beginning and @rshen91 has been chipping away at the backlog. You can monitor the progress via this project https://github.com/elastic/elastic-charts/projects/12.

Also if we are missing anything in our backlog that you think is a must or a better way to implement accessibility please don't hesitate to comment or open new issues, your input is very much welcome! 🤗

[alexstine]

Hello @nickofthyme

I think that is a good list. My suggestion is, focus on the keyboard navigation issues and screen reader issues right now. At this point, using charts is still not possible and colors can always be improved later as it is more of a quick task. The structural work for screen readers will be the biggest under taking. It is also hard for me to tell from that linked view what is currently being worked on. :(

Thanks.

[nickofthyme]

That's great advise that I will pass along.

It is also hard for me to tell from that linked view what is currently being worked on

I know sorry 😞. We are thinking to change our planning in the future to something that is easier to understand from an outsider's perspective what are our top priorities across all projects. Hopefully this will be better in the near future.