Accessibility in amCharts 5
Accessible JavaScript charts
Accessible JavaScript charts matter when your product has to meet WCAG or Section 508, as many government, education and enterprise buyers require. amCharts 5 is tested for compliance with WCAG 2.0 Levels A and AA, documented in its Section 508 conformance report (VPAT), and lets developers control focus order, keyboard interaction, grouping and screen reader text for every chart element.
WAI-ARIA
WAI-ARIA (Accessible Rich Internet Applications) is the W3C standard that lets dynamic web content describe itself to assistive technology, using attributes such as role and aria-label. Screen readers use them to announce what an element is and what it does. For an introduction to the topic, see W3C’s Introduction to Web Accessibility.
Making charts accessible
amCharts 5 charts and maps render on canvas and add a layer of invisible, focusable HTML elements for assistive technology. Legend items, buttons and series columns are focusable by default, and any other element, such as pie slices, bullets or map areas, can be made focusable with a single setting. Each focused element gets a high-contrast outline, an ARIA role and a screen reader label you can customize.
Accessibility features work as soon as you instantiate the chart.
Navigation
The most common means of navigating through the elements of charts and maps is 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 focusable element also has 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 focusable element or control on the chart has its “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 5 accessibility documentation.
Legacy versions
If you are looking for the information about amCharts 4 (previous version) accessibility, please click here.