Accessibility in amCharts 5
Accessibility in Web
Accessible web sites are becoming a standard in modern web. A lot of government institutions and socially responsible companies have website accessibility requirements in place.
Making HTML accessible is a relatively old topic. The possibilities are quite well implemented. There is a lot of material on the topic. Here are some articles:
- Introduction to Web Accessibility
- Web Accessibility Initiative
- Making Your Website Design Accessible
- Make WordPress Accessible
Making charts accessible
All charts and maps in amCharts 4 – current and latest version of our data visualization library – are designed to be accessible out of the box.
Accessibility features work as soon as you instantiate the chart.
The most common mean of navigation through elements of the charts/maps is using the TAB key.
When repeatedly pressing the TAB key, the chart will select different elements and controls, while highlighting it with a high-contrast outline, to make it easier to identify for people with impaired vision or color blindness.
Besides visual distinction, each element has also textual information attached to it via ARIA labels. That information will be read out loud if a screen reader software is running.
The textual information is tailored to intuitively describe a selected object as best as possible.
For example, if a grip on a scrollbar is selected, it will read out the grip’s current position as well as provide additional information on how keyboard can be used to zoom the chart.
To ensure maximum accessibility, each control on the chart can be used with keyboard-only setups.
Scrollbars can be moved using ARROW keys.
Basically, any element that can be dragged with a mouse or by touch, can be moved by focusing it using TAB key, then pressing arrows in the required direction.
Legend items can be toggled by pressing ENTER key.
Similarly, zoom keys – both in charts and maps – can be invoked using ENTER key.
Each element or control on the charts have their “role” set, to help screen readers identify importance and act accordingly.
For example, a popup is identified uniquely so that screen reader knows something important just happened, which requires immediate user’s attention.
Or, that scrollbar grip is a navigation control.
In data visualization, not all elements might be visible all the time. Say, a Series on an XY Chart might be hidden using legend.
In such a case, it not only hides from the screen, but also from screen reader.
Absolutely any content, presented to a screen reader can be customized by the developer implementing the charts.
For more information about configuring accessibility, please visit amCharts 5 accessibility documentation.
If you are looking for the information about amCharts 4 (previous version) accessibility, please click here.