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 Focus the chart), then use the keyboard:
A visible focus ring tracks the active point and stays aligned with the canvas as you scroll or zoom. Use a screen reader (VoiceOver, NVDA) to hear each point announced.
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
announceDataUpdates: true 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. In
visible range mode the Enter / Space
summary 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.