Skip to main content

Data Visualisation

Accessibility in data visualisation

Data visualisations create barriers when they rely on colour perception, fine motor interaction, or visual proximity to convey meaning. These requirements apply to all charts and maps in Open Point products.

Core requirements

Every data visualisation in Orbit must meet the following minimum requirements:

  • Text alternative — All charts must have a text-based alternative: either a data table that presents the same information, or a descriptive text summary. This alternative must be reachable via keyboard without interacting with the chart.
  • No colour-only encoding — Colour must not be the only means of conveying information. Support colour with labels, patterns, shapes, or direct annotation.
  • Keyboard operable — All interactive chart elements (data points, filters, legend toggles) must be operable via keyboard. Focus order should follow a logical sequence.
  • Focus visible — Interactive elements must have a visible focus ring that meets WCAG 2.1 AA (minimum 3:1 contrast against the adjacent colours).
  • Descriptive title and caption — Every chart must have a visible title. Where the chart requires interpretation, a caption or summary should describe the main finding.

Colour contrast

WCAG 2.1 Success Criterion 1.4.11 (Non-text Contrast) applies to all graphical objects in charts:

  • Data series fills — Must achieve 3:1 contrast against adjacent colours and the chart background
  • Data point markers — Must achieve 3:1 contrast against their background
  • Chart borders and axis lines — Must achieve 3:1 contrast against the chart background
  • Tick marks and grid lines — Low-contrast grid lines are acceptable if they are purely decorative and the axis labels are sufficient to convey scale

For chart colour sequences, see Colour in charts.

Screen reader patterns

  • Role and structure — Charts rendered as SVG should include appropriate ARIA roles. Simple charts can use role=“img” with an aria-label that describes the chart. Complex interactive charts should use a more detailed description via aria-describedby pointing to a text summary.
  • Data tables — When a data table alternative is provided, it should be structured with <th> headers for both rows and columns. Use scope=“col” and scope=“row” appropriately.
  • Live regions — If a chart updates dynamically (e.g., filtering by date), use an aria-live=“polite” region to announce the update without interrupting the user.
  • Tooltip content — Tooltip text that appears on hover must also be exposed on keyboard focus. Use aria-label or aria-describedby on the focusable element.

Cognitive accessibility

  • Simplify where possible — A chart that requires significant interpretation may not be appropriate for a general government audience. Prefer simpler chart types and supplement with written summary.
  • Consistent scale — When displaying multiple charts of the same type, use consistent axis ranges so users can compare without recalibrating
  • Avoid jargon in labels — Apply the Orbit voice and tone guidelines to all chart labels, tooltips, and captions
  • Highlight the key insight — Annotate or highlight the most important data point or trend. This helps users with cognitive disabilities, non-specialist audiences, and anyone skimming the page

Was this page helpful?