---
title: "Accessibility"
framework: react
version: "14.1.0"
---

# Accessibility

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:

- [ADA](https://www.ada.gov/) - US Department of Justice.
- [Section 508](https://www.section508.gov/) - US federal agencies.
- [WCAG 2.0](https://www.w3.org/WAI/standards-guidelines/wcag/) - 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

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 and Buttons
  - 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.
- `PgUp``PgDown` jumps focus backward or forward by a page of data items, scrolling to keep the focused item in view.
- `Home``End` 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.
- `Alt`+`↑` and `Alt`+`↓` collapse and expand nodes in the [Org Chart](https://www.ag-grid.com/charts/react/org-chart/).

#### Keyboard Navigation

```tsx
import React, { useState, Fragment } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgCartesianChartOptions,
  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 ChartExample = () => {
  const [options, setOptions] = useState<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!]);
      },
    },
  });

  return (
    <Fragment>
      <div className="example-controls">
        <div className="controls-row">
          <label htmlFor="above-chart">Element before chart:</label>
          <input type="text" id="above-chart" />
        </div>
      </div>

      <AgCharts options={options} />

      <div className="example-controls">
        <div className="controls-row">
          <label htmlFor="below-chart">Element after chart:</label>
          <input type="text" id="below-chart" />
        </div>
      </div>
    </Fragment>
  );
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
```

[Live example: Keyboard Navigation](https://www.ag-grid.com/charts/reactFunctionalTs/accessibility/examples/keyboard-navigation)

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 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](https://www.nvaccess.org/download/), [JAWS](https://support.freedomscientific.com/Downloads/JAWS), [Windows Narrator](https://support.microsoft.com/en-us/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1), and Mac users have the built-in [VoiceOver](https://support.apple.com/en-gb/guide/voiceover/welcome/10) 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](https://www.ag-grid.com/charts/react/themes/) documentation for details.

## API Reference

#### Keyboard Navigation

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| enabled | boolean | true | Toggles the keyboard navigation feature. |
| tabIndex | number | 0 | Allows setting the tabIndex of the chart canvas. |
| initialFocus | 'data-start' \| 'data-end' \| 'viewport-start' \| 'viewport-end' | 'data-start' | Determines which datum receives focus when keyboard navigation first enters the chart.  - `'data-start'` and `'data-end'` reference the full dataset - `'viewport-start'` and `'viewport-end'` reference the initial visible zoom viewport |