React ChartsAccessibility

AG Charts are fully accessible, providing keyboard navigation and screen reader support.

Web Conformance Guidelines

Even if you are not mandated to conform to any particular accessibility standard, it can be helpful to understand the guidelines outlined, as they are generally good practices worth incorporating into your web based applications.

Currently the most commonly encountered conformance guidelines are:

WCAG 2.0 has 3 levels of conformance; A, AA and AAA (in order of conformance).

As meeting WCAG 2.0 level AA guidelines also meets the ADA and Section 508 standards, it is likely that most organisations will want to target this standard.

Keyboard Navigation

AG Charts fully supports keyboard navigation as an element of accessibility, allowing interaction with chart elements and navigation through the displayed data without using a mouse.

The following keys are available:

  • ⇥ Tab moves focus between chart components. These include:
    • Series
    • Legend
    • Legend pagination control
    • Toolbars
    • Navigator
  • moves focus between items in a series, or between legend items.
  • moves focus between series in a chart.
    Please note that datapoints and series are traversed in declared order which may not match the visual display.
  • ↵ Enter or ␣ Space toggles legend items and triggers any click listeners for the focused item.
  • In Windows, ⇧ Shift+F10 or ≡ Menu opens the context menu. On Mac this is done with ⌃⌥⇧ M when Voiceover is enabled.

In this example:

  • Focusing on the top input box and pressing TAB will move focus into the chart.
  • Pressing TAB will move focus through the chart components.
  • The arrow keys move focus around within the chart components as described above.
  • Pressing TAB after all the chart components will move focus to the element below the chart.
  • SHIFT+TAB will move focus into, around and out of the chart in reverse order.

Screen Readers (ARIA)

Users who are visually impaired will typically require the assistance of a screen reader to interpret and interact with web-based applications.

Screen readers for Windows include NVDA, JAWS, Windows Narrator, and Mac users have the built-in VoiceOver screen reader. Our accessibility testing has focused on these screen readers.

AG Charts generates announcements for screen readers via a standards-based accessibility implementation based on the currently focused chart element.

High Contrast Theme

For users that are visually impaired due to colour deficiencies, care should be taken to provide enough contrast between adjacent colours. Additionally, when using charts it is common to use red and green to denote negative and positive values, however this can pose difficulties for people suffering from colour blindness.

To create a high contrast theme, please check out the Themes documentation for details.

API Reference