Accessibility Plugin

A drop-in plugin that adds a semantic accessibility layer to a chart. One instance is attached per pane, so each pane becomes its own keyboard-focusable region. This example has a price pane (with two series) and a separate volume pane.

Press Tab to move between the panes (or click the chart — this example sets focusOnPointerDown — or press Focus the chart), then use the keyboard:

← / → — move between data points
↑ / ↓ — switch between series in the pane
Page Up / Page Down — jump ten points
Home / End — first / last point
+ / − — zoom, and announce the new visible range
Enter / Space — read a summary of the series
T — show the data as a table, Esc to close it
H — show / hide the shortcuts panel (and announce the controls)

A visible focus ring tracks the active point and stays aligned with the canvas as you scroll or zoom; syncCrosshair moves the chart's crosshair with it. Everything the plugin says is mirrored into the caption line above the description through onAnnounce, so you can follow along without a screen reader — but do use one (VoiceOver, NVDA) to hear it properly.

The price series carries two markers and a price line. Both are purely visual, so the plugin announces them: a marker when the focus lands on its point (markers), the price lines with the Enter summary.

Language switches the announcements between English and the bundled Spanish translation at runtime — one applyOptions({ messages: esMessages, lang: 'es' }) call, as the README describes. The choice is kept in the URL (?lang=es).

Start live updates streams a new bar into every series every couple of seconds, simulating a real-time feed. Updates are announced through one shared polite aria-live region. By default only the active (last-focused) pane is announced — you hear the price pane until you focus the volume pane — which stops a multi-pane chart talking over itself. Pass dataUpdates: { mode: 'all' } to addAccessibilityPlugin to hear every pane combined into one announcement.

Use Announce: visible range / all data to switch the dataScope option. The arrow keys always page through the whole series; this option only changes the spoken summaries and the table. In visible range mode the Enter / Space summary, the T table and the live-update announcements describe only the points currently on screen; in all data mode they describe the full data set.

This example also opts into the visible shortcuts overlay (showShortcuts: true): focus the chart to see a Press H for keyboard shortcuts hint, then press H to toggle an on-screen list — for sighted keyboard users. Enable high contrast flips the plugin's highContrast option: the plugin restyles its own focus ring and overlay and calls onHighContrastChange, which this example uses to restyle the chart's own series and grid to match. Large font increases the chart's text size. By default highContrast is 'auto', following the operating system's contrast setting.

Play the data as sound routes the focused point through createToneSonifier(), the ready-made onSonify handler: hold → to hear the series as a rising and falling tone.