Accessibility

Every chart in this library is accessible by default. No configuration needed. This page documents the four layers of accessibility built into every component.

1. Screen Reader Descriptions

Every chart's <svg> has role="img" with a <title> and <desc> element linked via aria-labelledby. Descriptions are auto-generated from the data:

Line chart auto-description:

"Line chart: Unemployment rate, 2020–2024. 36 data points with 2 series. Values range from 3.4 to 14.7. Average: 5.8. Source: Bureau of Labor Statistics."

Bar chart auto-description:

"Bar chart: Most populous US states. 10 categories. Highest: California at 39,538. Lowest: Michigan at 10,077. Source: US Census Bureau."

The title prop is required on every chart — TypeScript will error at compile time if it's missing. This prevents the single most common accessibility failure in data visualization.

2. Data Table Alternatives

Every chart renders a full HTML <table> with the underlying data. The table is visually hidden using the .sr-only clip pattern (not display:none) so it remains accessible to screen readers and keyboard users.

What screen reader users experience:

  1. A "Skip chart, view as data table" link appears on focus
  2. The table has a <caption> matching the chart title
  3. Column headers use <th scope="col">
  4. Values are formatted consistently

In print, the table becomes visible alongside the chart — readers get both the visual and the precise values.

3. Keyboard Navigation

All interactive chart elements are keyboard accessible using a roving tabindex pattern:

Tab Enter the chart / move to next interactive element
Arrow Left / Right Navigate between data points along a series
Arrow Up / Down Switch between series (multi-series charts) or navigate bars
Home / End Jump to first / last data point
Enter / Space Announce current data point value via live region
Escape Return focus to chart container

When a data point receives focus, its value is announced to an aria-live="polite" region — so screen reader users hear the data as they navigate.

4. System Preferences

Charts automatically respond to three system-level accessibility settings:

prefers-reduced-motion

All animations (line draw-on, bar growth, dot pop-in) are instantly disabled. The animated prop defaults to false when this preference is detected.

prefers-contrast: more

Chart automatically switches to high-contrast mode — black/white palette, thicker strokes, no gradients.

@media print

Forces grayscale palette, shows data table, hides tooltips, adds dash patterns to lines for grayscale reproduction.

5. Colorblind Safety

Every categorical palette has a -a11y variant optimized for deuteranopia and protanopia. Line charts always render dash patterns alongside color — so series are distinguishable even with no color vision at all.

Enabling colorblind mode:

<LineChart data={data} title="..." colorMode="colorblind" />

Implementation Details

Core Module

packages/core/src/a11y/

  • describe.ts — auto-generates chart descriptions from data statistics
  • table.ts — builds structured table specs for the AccessibleTable component
  • keyboard.ts — chart-agnostic keyboard navigation handler
  • announcer.ts — singleton live region for screen reader announcements

Svelte Primitives

  • AccessibleTable.svelte — visually-hidden table with skip link
  • Svg.svelte — wraps <svg> with role, title, desc
  • use-keyboard-nav.svelte.ts — reactive keyboard nav hook