Accessibility

Explanation of accessibility features provided by the Highcharts module and how to customize them.

Introduction

(information)

In progress

As our current data visualization offerings are in progress, these guidelines may change. We will update these pages when new features are supported. Please raise a GitHub discussion for any feedback or requests.

Highcharts offers an accessibility module which we recommend always enabling. If using our BaseChart implementation this is taken care of. It provides many useful features that help visually impaired users interact and understand charts. Features that are offered are:

Announces chart meta data such as title, subtitle, and description.
Allows keyboard navigation of series, points and legend items.
Describes series when focused.
Describes points when focused.
Announces the legend item when focused and describes whether the series is hidden or shown.
Toggle series visibility via keyboard.
Switching from series the legend items announces they are used to toggle series along with title of chart.

Announcements

The accessibility module provides announcements by default for the series and point formatters. These can be overridden by passing additional props. See below for more details. Note that the default formats are in English only and for any trnslations you would need to override them.

When switching points, announce the point index and x axis then value. 2 (point 2) x 3 (x axis = 3) 8105 (y value) Installation [series name].
When focusing on a series, announce series name, sereis position of total and how many points. e.g. Installation, line 1 of 2 with 8 data points.

Customizing Announcements

To override the default announcements you can set the accessibility attribute in the support options of the Chart Provider

The point and series will be passed to the descriptionFormatter to retrieve the correct values such as axis values and series names.

Example

Below is an example of a chart with custom descriptionFormatter for the series and point. The title and sub title are both specified but hidden. They will still be included in the screen reader announcements to give context to visually impaired users but not be visible on the chart.

If you inspect the rendered chart element you will see that an aria-label is applied to both the series and the point with the correct formatting provided in the config.

aria-label="The series Installation has a total of 8 points" is applied to the series.
aria-label="The point 0 has a value of 43934" is applied to the point.

Notes

When focusing on points the tooltip is not announced by screen readers. Instead the point description is read out. If you have key information in the tooltip be sure to include it in the point.descriptionFormatter.