block by mmazanec22 d3cc26bc753f960cdb05f5075d5eae2f

Accessible Bar Chart

Full Screen

Accessible Bar Chart Prototype

This is a quick and imperfect prototype to illustrate two ideas that might allow a blind or visually impaired user to experience a bar chart. One concept is using pitch to indicate the relative height of the different bars (building upon this gist: http://bl.ocks.org/aholachek/6e18a82c0f0ada144b854f788c07d7a4). To try this, any user may use the mouse or the arrow keys to navigate the bars.

The other idea is to apply aria labels and roles to make the different svg elements available to screen readers. To try this, turn on the screen reader (on a Mac, cmd + F5), tab your way into the chart, then use the arrow keys to navigate the bars. The screen reader will announce x and y values (the pitch will still sound as well– in a real implementation, this should probably be turned off by default so as not to conflict with the screen reader).

Feedback and improvements are welcome!

index.html

bar.js