Accessible Data Visualization and Charts

The plain-language idea

Charts have a specific accessibility problem that most components don't: they're often the richest source of information on a page, and they're often built with technology that has zero built-in semantics. A <canvas> element has no DOM structure at all for assistive technology to read — it's pixels, indistinguishable from an image, no matter how much data went into producing it. An SVG chart has some DOM structure, but by default it's a pile of <path> and <circle> elements with no meaning attached — a screen reader has nothing sensible to announce.

Meanwhile, a sighted user looking at that same chart extracts real conclusions from it at a glance: which line is trending up, which category is the outlier, roughly how big the gap between two bars is. None of that reaches a screen reader user by default, even though it's the entire point of the chart.

The fix is a layered approach, not a single attribute:

• A text alternative that states the actual takeaway, not a content-free label. "Bar chart" as an aria-label tells a screen reader user nothing a sighted user doesn't already get instantly from looking at it — the useful equivalent is the conclusion itself: "Revenue grew 40% year over year, driven mostly by Q4."
• An accessible data table as a genuine alternative or supplement, not an afterthought. A table's cell-by-cell reading order actually works for inspecting real data point by point — something a canvas chart fundamentally can't offer no matter how good its labels are.
• For canvas specifically, role="img" plus a real aria-label (or a linked text summary) is close to the minimum viable accessible treatment, not a nice-to-have polish pass — without it, a canvas chart is functionally invisible to a screen reader.

See it in a real thing: the same chart, three layers deep

<figure>
  <canvas
    role="img"
    aria-label="Bar chart of quarterly revenue, 2023 to 2024. Revenue grew from
      $2.1M to $2.9M, a 38% increase, with the largest single jump in Q4 2024."
    width={600}
    height={300}
  />
  <figcaption>
    Quarterly revenue grew 38% year over year, driven mostly by a strong Q4.
    <details>
      <summary>View underlying data as a table</summary>
      <table>
        <thead>
          <tr><th>Quarter</th><th>Revenue</th></tr>
        </thead>
        <tbody>
          <tr><td>Q1 2024</td><td>$620K</td></tr>
          <tr><td>Q2 2024</td><td>$640K</td></tr>
          <tr><td>Q3 2024</td><td>$680K</td></tr>
          <tr><td>Q4 2024</td><td>$960K</td></tr>
        </tbody>
      </table>
    </details>
  </figcaption>
</figure>

This isn't three redundant copies of the same thing — each layer does a different job. The aria-label gives a screen reader user the takeaway immediately, without them needing to expand anything. The visible figcaption gives every user, including a sighted one skimming quickly, the same headline conclusion in text. The collapsed table gives anyone who wants to actually inspect the real numbers — sighted or not — a structure built for exactly that, which the chart itself, canvas or SVG, was never going to provide.

What people usually miss

Watch out

• A generic chart-type label is not a text alternative. aria-label="Line chart" technically satisfies "has an accessible name" while conveying none of the actual information a sighted user gets from looking at it — the label needs to carry the conclusion, not just the chart type.
• Canvas has literally nothing for assistive tech without explicit work. Unlike a poorly-labeled <div>, which at least has some fallback semantics, a bare <canvas> is indistinguishable from a blank image to a screen reader — role="img" and a real aria-label aren't extra credit, they're the floor.
• A data table isn't a downgrade from a "real" chart — it's a genuinely different, legitimate way to access the same data. Treating the table as a lesser fallback undersells it; for actually inspecting specific values rather than absorbing an overall trend, a table often works better for everyone, not just screen reader users.
• This is the same color-only failure mode from earlier in this track, just at higher stakes. A dashboard's central chart is usually the highest-value piece of information on the page — repeating the "color is the only differentiator" mistake there is more consequential than the same mistake on a small status dot.

Why this matters in interviews

"How would you make a dashboard's main chart accessible to a screen reader user?" is a real, increasingly common question as data-heavy UIs get more common — a strong answer names the layered approach (meaningful text summary, canvas/SVG labeling, an accessible table alternative) rather than reaching for a single attribute as if it were a complete fix.