Plotly.js config: screen reader access to individual scatter plot points

Question

In current Plotly.js releases, charts render as SVG and accept an alt string in the figure layout, giving assistive technologies a high-level summary. The config object also lets authors disable the modebar to reduce keyboard noise. For a dense scatter plot with thousands of points, the goal is to let screen-reader users reach individual traces or legend entries through native keyboard focus without injecting custom ARIA attributes into the SVG after render.
The uncertainty is where Plotly's built-in accessibility boundary ends. Basic zoom and pan interactions are keyboard-operable, but the granularity of focusable elements varies by chart type, and hover-driven tooltips are not announced without additional implementation. Because screen readers interpret SVG roles differently, it is unclear whether relying on Plotly's default DOM output produces a consistent experience for navigating data series.
Which configuration options, if any, control the focus order and ARIA labeling of legend items or data traces in Plotly.js? Is there a documented way to make individual points or aggregated bins reachable by keyboard without post-processing the rendered SVG? What is the recommended pattern for verifying that these behaviors hold across NVDA and VoiceOver?

Tasadduq Burney · Answer

AnswerNo. Plotly.js does not expose a config option that makes individual scatter points or legend entries keyboard focusable or gives them per-element ARIA labels. The only accessibility-related config is the optional top-level config.accessibility provided by the plotlyjs-accessibility bundle, which can set a static role="img" and a single aria-label for the whole chart container. It does not control focus order or labeling of traces, legend items, or points.Confirmed factsScatter points are rendered as SVG or elements without tabindex, role or aria-label.Legend items are SVG containers with ; they also lack native keyboard focus.config.accessibility affects only chart-level description, not per-point or per-legend granularity.Likely explanationPlotly’s built-in accessibility boundary is chart-level. Zoom and pan are keyboard operable via the modebar, and hover tooltips are visual only. Screen readers therefore receive a high-level summary from the container label, not a data-point stream. Because SVG roles are interpreted inconsistently across NVDA, VoiceOver and TalkBack, Plotly does not add per-element ARIA by default.Steps for this caseProvide a chart-level description: set layout.title.text and, with the accessibility bundle, use config.accessibility or wrap the div with role="img" and an aria-label.Disable modebar noise if needed via config.displayModeBar.Accept that per-point or per-legend keyboard reachability requires post-render DOM augmentation; there is no documented config-only way to achieve it.Verification patternRender a small scatter plot and inspect DOM to confirm points and legend groups lack tabindex and ARIA labels.With NVDA or VoiceOver active, press Tab. Focus should land on the chart container only, announcing the container label.Repeat on macOS VoiceOver and Windows NVDA to check consistency.Assumption: Plotly.js ≥ 2.2.0 where the accessibility bundle exists. If you are on an older version, even the static image role is unavailable. What Plotly.js version are you using? The recommendation changes for pre-2.2 releases.

Plotly.js config: screen reader access to individual scatter plot points

1 answer

Answer

Confirmed facts

Likely explanation

Steps for this case

Verification pattern

Your perspective belongs here.

0 question comments