SVG — Accessibility Deep-Dive

A chart's shapes mean nothing to a screen reader on their own. Give it a name, a text alternative, and keyboard access. Tab into the bars, toggle the data table, and compare the two markup approaches.

an accessible chart

Tab through the bars below — each is focusable and announces its value.
Quarterly revenue 2025 Bar chart: Q1 42, Q2 78, Q3 60, Q4 90 (in thousands).

The role="status" region above announces the focused bar to assistive tech without stealing focus.

inaccessible shapes only
<svg viewBox="0 0 300 180">
  <rect x="10" y="40" width="40" height="100"/>
</svg>
<!-- screen reader: "graphic" … nothing useful -->
accessible labelled + text alternative
<svg role="img" aria-labelledby="t d">
  <title id="t">Quarterly revenue 2025</title>
  <desc id="d">Q1 42, Q2 78, Q3 60, Q4 90 (thousands).</desc>
  <rect tabindex="0" role="img" aria-label="Q1: 42"/> …
</svg>
<!-- plus a visually-hidden <table> for full data -->

Best practice for data viz: a <title>/<desc> summary on the SVG, focusable bars with aria-label, an aria-live readout, and a real data <table> as the canonical alternative.