Accessibility in amCharts 4
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
SVG and accessibility
We at amCharts use SVG for displaying charts. Unfortunately, SVG cannot be made as accessible as regular HTML simply because not all browsers support simple tabindex tag on SVG elements, yet. The tabindex attribute specifies the order at which an element is selected when user hits TAB key. Vision-impaired people use it quite a lot to navigate the web pages by jumping from one element to the other – more often than not, mouse is not an option.
The standard is there and hopefully all browsers will implement the support soon. Here’s a list of the browsers that support tabindex on SVG elements at the moment. To sum up, at the moment of this writing only Chrome, Safari and Opera do it well, FF and IE – not yet.
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 4 accessibility documentation.
If you are looking for the information about amCharts 3 (previous verison) accessibility, please click here.