• Success Criterion 1.1.1
  • Conformance level A

JavaScript Chart With No Accessible Data Table Behind It

1.1.1 — Non-text Content

Scenario

Setting

An e-book reader's library page

What’s wrong

Charts rendered by JS libraries (Chart.js, D3, Highcharts) as canvas/SVG with no accessible data table or summary.

Example 

<div id="reading-stats-chart"></div>
<!-- Chart.js renders a pie chart of genres read this year -->

Why it matters

A reader checking their yearly reading stats gets nothing from a JS-rendered pie chart, missing data that's freely visible to sighted users.

How to test

Look for a data table or text summary next to script-rendered charts (Chart.js, D3, Highcharts): if the chart is canvas/SVG-only with no equivalent, it fails.

How to fix

Pair the chart with an aria-label summary or a real data table. JS charting libraries render to canvas or SVG that's invisible to assistive tech by default.

<div id="reading-stats-chart" role="img" aria-label="Genres read this year: Fiction 45%, Non-fiction 30%, Sci-fi 25%"></div>
<table class="visually-hidden">
  <caption>Genres read this year</caption>
  <tr><th>Fiction</th><td>45%</td></tr>
  <tr><th>Non-fiction</th><td>30%</td></tr>
  <tr><th>Sci-fi</th><td>25%</td></tr>
</table>

Outcome

A reader hears their exact genre breakdown for the year, getting the same insight the chart gives sighted users.

Who is affected

Blind and low-vision readers want the same year-in-review data sighted users get from the chart.

Learn more

Related scenarios