JavaScript ChartsAccessibility

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

Web Conformance Guidelines Copy Link

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:

• ADA - US Department of Justice.
• Section 508 - US federal agencies.
• WCAG 2.0 - Globally accepted standard.

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 Copy Link

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, in this order:

  • Title, Subtitle
  • Series
  • Footnote
  • Cross lines
  • Legend
  • Legend pagination control
  • Toolbars and Buttons
  • Navigator

  Captions and cross lines are only included when they have a click listener, set on the item itself or at a higher level. See Events.

• ←→ moves focus between items in a series, between legend items, or between cross lines.

• ↑↓ moves focus between series in a chart. Please note that datapoints are traversed in declared order which may not match the visual display. Series are traversed in declared order unless a Series Focus Order is set.

• PgUpPgDown jumps focus backward or forward by a page of data items, scrolling to keep the focused item in view.

• HomeEnd jumps to the first or last data item.

• ↵ 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.

• Esc hides the tooltip for the focused data item without moving focus. Moving focus to another item shows its tooltip again. It also closes an open context menu or settings popup, and cancels any annotation creation or drag selection in progress.

• Alt+↑ and Alt+↓ collapse and expand nodes in the Org Chart.

import {
  AgCartesianChartOptions,
  AgCharts,
  AnimationModule,
  BarSeriesModule,
  CategoryAxisModule,
  ContextMenuModule,
  CrosshairModule,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-enterprise";
import { DataType, getData } from "./data";

ModuleRegistry.registerModules([
  AnimationModule,
  BarSeriesModule,
  CategoryAxisModule,
  CrosshairModule,
  LegendModule,
  NumberAxisModule,
  ContextMenuModule,
]);

const options: AgCartesianChartOptions<DataType> = {
  title: {
    text: `Renewable sources used to generate electricity for transport fuels`,
  },
  data: getData(),
  animation: { enabled: false },
  series: [
    {
      type: "bar",
      xKey: "year",
      yKey: "Onshore wind",
      yName: "Onshore Wind",
    },
    {
      type: "bar",
      xKey: "year",
      yKey: "Offshore wind",
      yName: "Offshore Wind",
    },
    {
      type: "bar",
      xKey: "year",
      yKey: "Landfill gas",
      yName: "Landfill Gas",
    },
    {
      type: "bar",
      xKey: "year",
      yKey: "Solar photovoltaics",
      yName: "Solar Photovoltaics",
    },
    {
      type: "bar",
      xKey: "year",
      yKey: "Small scale Hydro",
      yName: "Small Scale Hydro",
    },
    {
      type: "bar",
      xKey: "year",
      yKey: "Large scale Hydro",
      yName: "Large Scale Hydro",
    },
  ],
  axes: {
    y: {
      type: "number",
      title: {
        text: `kilotonnes of oil equivalent (ktoe)`,
      },
      label: {
        formatter: (params) => `${params.value / 1000}K`,
      },
    },
  },
  legend: {
    maxHeight: 40,
    maxWidth: 800,
  },
  listeners: {
    seriesNodeClick: (e) => {
      console.log(e.type, e.seriesId, e.datum[e.xKey!], e.datum[e.yKey!]);
    },
  },
};

options.container = document.getElementById("myChart");

const chart = AgCharts.create(options);

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 ENTER or SPACE when a bar is focused will trigger a click listener which logs a message to the console.
• Pressing ESC when a bar is focused hides its tooltip while focus stays on the bar. Moving to another bar shows its tooltip again.
• 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.

Series Focus Order Copy Link

Focus moves between series in the order they are declared. Use the focusIndex series property to change this order.

{
    series: [
        { type: 'bar', xKey: 'month', yKey: 'volume' },
        { type: 'line', xKey: 'month', yKey: 'price', focusIndex: 0 },
    ],
}

In this snippet, the line series is focused first, even though the bar series is declared first.

• Series with a lower focusIndex are focused first. Only the relative order matters, so values do not need to be consecutive.
• Series without a focusIndex are focused after those with one, in the order they are declared.
• Series with the same focusIndex are focused in the order they are declared.

Initial Focus Copy Link

Use keyboard.initialFocus to choose which data item receives focus when keyboard navigation first enters the chart. The default is 'data-start'.

{
    keyboard: {
        initialFocus: 'viewport-start',
    },
}

• 'data-start' and 'data-end' focus the first or last item in the full dataset.
• 'viewport-start' and 'viewport-end' focus the first or last item in the initial visible zoom range.

Screen Readers (ARIA) Copy Link

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 Copy Link

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 Copy Link