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:

SVG and accessibility

We at amCharts use SVG for displaying charts in amCharts 4 library. 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.

WAI-ARIA

WAI stands for Web Accessibility Initiative and ARIA is Accessible Rich Internet Applications Suite. It defines a way to make Web content (especially dynamic, made with AJAX, JavaScript etc) more accessible to people with disabilities. The main idea is simple – they introduced new attributes, such as aria-label, aria-button or role which are understood by screen readers and also allows users to navigate through page not only by pressing tab key but using other keys in the keyboard (sometimes this only works when you use browser together with screen reader). Again, not all browsers and readers support WAI-ARIA tags at the moment, however as WAI-ARIA 1.0 was published as a completed W3C Recommendation, eventually all browsers and readers will support it.

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.

Navigation

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.

Screen reading

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.

Using controls

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.

Element roles

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.

Visibility status

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.

Customization options

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.

Legacy versions

If you are looking for the information about amCharts 3 (previous verison) accessibility, please click here.