Highcharts Accessibility Module Configuration

Highcharts has one of the most complete accessibility implementations among commercial chart libraries. Its accessibility module (built into recent versions and enabled by default when loaded) adds keyboard navigation between series and points, a hidden screen reader section describing the chart, ARIA labels on points, legend items as toggle buttons and options for data tables and sonification. The defaults are good. The problems in real dashboards come from charts without descriptions, point descriptions without units, and dense charts that produce hundreds of verbose announcements.

This guide belongs to chart library accessibility.

Spec reference

  • accessibility.enabled — on by default when the module is loaded.
  • accessibility.description / caption.text — chart-level description and visible caption.
  • accessibility.point.valueDescriptionFormat, valuePrefix, valueSuffix, descriptionFormatter — how each point is announced.
  • accessibility.keyboardNavigation.order — which parts (legend, series, zoom, range selector, chart menu) are reachable and in what order.
  • accessibility.screenReaderSection.beforeChartFormat — the hidden text before the chart; can include title, type, axes, description and a link to the data table.
  • exporting.showTable / “View data table” — renders an HTML table of the data.
  • Relevant criteria: SC 1.1.1, 2.1.1, 4.1.2 (A), SC 1.4.11 (AA) for the visuals.
What the Highcharts module adds Layers: a hidden screen reader section before the chart; keyboard navigation for legend, series and points; ARIA labels on points; legend toggle buttons; and optional data table and sonification. What the Highcharts module addsScreen reader sectiontitle, type, axes, description, data table linkKeyboard navigationlegend, series, points, zoom and menu in a set orderPoint labelsvalue descriptions with units and contextLegenditems as buttons with pressed stateExtrasdata table view, sonification
You configure the content; the module provides the mechanics.

When to use — and when not to

Use the module on every Highcharts chart; there is no good reason to disable it. Write a real description for each chart and units for each series.

Do not rely on the auto-generated description alone (“Line chart with 3 lines”). Do not make every point of a 1,000-point series individually announced without considering verbosity; use pointDescriptionEnabledThreshold or series-level descriptions for dense data.

The misapplication: loading the module but leaving valueSuffix empty, so users hear “Q3, 4.2” without knowing whether it is millions of euros or percent.

Module defaults versus configured charts Comparison: defaults produce generic descriptions and unitless values; configured charts state purpose, units, key findings and offer the data table. Module defaults versus configured charts✗ Defaults"Line chart with 3 lines""Q3, 4.2"All parts in default keyboard orderData table not offeredEvery point verbose on dense series✓ Configured"Revenue by region, 2026; North grew fastest""Q3, 4.2 million euros"Order: series, legend, menu"View as table" linked from the summaryThreshold for point descriptions

Annotated code example

Highcharts.chart('revenue', {
  title: { text: 'Revenue by region, 2026' },
  caption: { text: 'North grew fastest (+18%); South declined in Q3.' },          // visible summary
  accessibility: {
    description: 'Quarterly revenue in millions of euros for three regions.',
    point: { valueSuffix: ' million euros', valueDecimals: 1 },                    // units (SC 1.1.1)
    keyboardNavigation: { order: ['series', 'legend', 'chartMenu'] },
    screenReaderSection: {
      beforeChartFormat: '<h3>{chartTitle}</h3><div>{typeDescription}</div><div>{chartLongdesc}</div><div>{viewTableButton}</div>',
    },
    series: { pointDescriptionEnabledThreshold: 200 },                            // limit verbosity on dense series
  },
  exporting: { showTable: false },                                                  // table available via button
  xAxis: { categories: ['Q1', 'Q2', 'Q3', 'Q4'], title: { text: 'Quarter' } },
  yAxis: { title: { text: 'Revenue (million euros)' } },
  series: [{ name: 'North', data: [4.0, 4.4, 4.6, 4.7] }, { name: 'South', data: [3.1, 3.3, 2.9, 3.0], dashStyle: 'Dash' }],
});

dashStyle gives a non-colour distinction between series (SC 1.4.1); markers with different symbols work similarly.

Keyboard & AT behaviour

Key Behaviour Expected announcement
Tab Into chart keyboard navigation First series or point
Left / Right Previous / next point “Q3, 4.6 million euros. North.”
Up / Down Previous / next series Series name and first point
Tab Next navigation group (legend) “Show North, toggle button, pressed”
Enter on legend item Toggle series Pressed state
Escape Leave chart navigation —
Settings that matter most Matrix of settings — description, valueSuffix and decimals, keyboardNavigation order, screenReaderSection format, point description threshold, dashStyle or markers — against their effect and default. Settings that matter mostEffectDefaultdescriptionChart purpose in wordsEmptyvalueSuffix / decimalsUnits and precisionNonekeyboardNavigation.orderLogical tab orderAll partsscreenReaderSection formatSummary and table linkGenericpointDescriptionEnabledThresholdLimits verbosityLibrary defaultdashStyle / markersNon-colour distinctionColour only
Five settings make the difference between generic and useful output.

Integration context

General chart alternatives are in data visualization & chart alternatives; colour guidance in chart colour & contrast. Highcharts-specific chart types are discussed in chart type-specific patterns. Sonification, which Highcharts supports, is discussed in sonifying time series charts.

Gotchas

Licensing and versions. Accessibility features have expanded across Highcharts versions; some options differ between major versions. Check the API for your version.

Custom tooltips. HTML tooltips (useHTML: true) must not trap focus or contain unique information.

Exported images. PNG exports have no text alternative; offer the data table alongside.

Worked example

A SaaS dashboard used Highcharts for twelve widgets with the module loaded but no descriptions or units. Screen reader users heard “Line chart with 4 lines” and unitless values. The team added a description and caption per widget, units through valueSuffix, a consistent keyboard order and a “View as table” button in the screen reader section, and set a point description threshold for dense series. Feedback from a blind analyst: the charts went from “decoration” to usable, with the table view as the main route for detailed work.

Shared defaults

// One place for accessibility defaults across every chart
Highcharts.setOptions({
  accessibility: {
    keyboardNavigation: { order: ['series', 'legend', 'chartMenu'] },
    screenReaderSection: { beforeChartFormat: '<h3>{chartTitle}</h3><div>{typeDescription}</div><div>{chartLongdesc}</div><div>{viewTableButton}</div>' },
    series: { pointDescriptionEnabledThreshold: 200 },
  },
  plotOptions: { series: { marker: { enabled: true } } },     // symbols help distinguish series
});

Per-chart code then only needs a title, caption, description and units, which keeps reviews focused on content rather than configuration.

Testing it with a screen reader

  1. Reach the chart in browse mode; confirm the screen reader section reads title, type, description and table link.
  2. Tab into the chart; move between points; confirm values with units.
  3. Move between series with Up and Down; confirm series names.
  4. Tab to the legend; toggle a series; confirm pressed state.
  5. Open the data table; confirm headers and values.

Common mistakes

  • No description or caption.
  • Unitless point values.
  • Default keyboard order including rarely used parts.
  • Colour-only series distinction.

Adoption checklist for teams

  1. Create a Highcharts theme or defaults object with accessibility options pre-set.
  2. Require title, caption and accessibility.description for every chart in code review.
  3. Set units per series through valueSuffix.
  4. Provide dash styles or marker symbols per series.
  5. Include the data table link in the screen reader section.

FAQ

Is the accessibility module enabled by default?

In recent versions, when the module is loaded it is enabled by default. Make sure it is included in your bundle.

Does Highcharts handle colour-blind users?

It provides options (dash styles, markers, patterns via the pattern-fill module); you configure them.

Can screen reader users get the raw data?

Yes, through the data table view or export features.

How do I limit verbosity on large series?

Use point description thresholds and rely on series descriptions and the data table.

Does it support sonification?

Yes, through the sonification module; offer it as an optional feature.

Are Highcharts legends accessible?

Legend items are exposed as toggle buttons with the module.

What about Highcharts Stock and Maps?

They use the same accessibility module, with additional components such as range selectors that need labels and keyboard order.

How do I describe annotations on a chart?

Highcharts annotations can carry descriptions that the module includes; also mention the most important annotations in the chart’s caption.

← Back to Chart Library Accessibility