Skip to main content

Chart Accessibility

Accessibility features to make JavaScript charts compliant with accessibility standards such as section 508 and WCAG 2.0.

It is sometimes necessary to make charts accessible to people with disabilities and limitations. JSCharting provides an easy-to-use API to screen reader users. The features result in accessible charts using aria attributes such as aria-label as well as keyboard navigation of chart items to enhance impaired user experience.

Usage

To get started the feature can be enabled by setting the chart tabIndex property to 'auto' which places the chart into accessibility mode. This allows the main chart elements to be iterated using the keyboard tab button. When a main element is selected such as legend, a dropdown uiItem, or series, the arrow keys can be used to iterate over sub elements of those items.

The chart tabIndex property can be set with 'auto', 'none' or a tab index value for assigning tab indexes to specific chart elements.

{
  tabIndex: "auto"
}

Alternatively, specifying the description property for any chart element enables accessibility mode as well.

The list of objects below all have tabIndex and description properties. By setting tabIndex to 'none' for any specific items, it excludes them from keyboard navigation.

If the chart has labels like title, axis labels, series and point names, it will provide descriptions for most elements automatically. Custom descriptions can be specified for all chart elements through the following properties.

Interactive UiItems

In accessibility mode with interactive uiItems on the chart, navigation to iterate through each item is possible using the tab key. To adjust the value of a uiItems, the arrow keys can be used to select a new value. The new value is then applied by pressing Enter.

Chart as DataGrid

By enabling the chart html table view, chart data is shown in a data table format. This can be useful as an alternative chart view to enhance accessibility.

{
  grid: {
    enabled: true,
    //TabIndex of the chart/grid switch buttons.
    tabIndex: "auto"
  }
}

Color Impaired Vision

A few high-contrast palettes optimized for color impaired vision are available. It is easier to distinguish between the colors in these palettes despite the type of color impairment the viewer may suffer from.

{
  palette: "colorVision1"
}

To supplement or as an alternative, hatch patterns can further enhance the apparent differences between series and point colors. They can be enabled giving each data series a unique hatch pattern using the following code:

{
  hatchPalette: true
}

Or if each point of a series should be distinguishable, a color palette must be set for the series and the hatchPalette property can be set to true to assign each point of this series a unique hatch pattern.

{
  defaultSeries: {
    palette: "default",
    hatchPalette: true
  }
}