- 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
On an e-book reader's library page, a visitor hits this wall: charts rendered by JS libraries (Chart.js, D3, Highcharts) as canvas/SVG with no accessible data table or summary.
Why it matters
Blind and low-vision people using screen readers, and anyone who browses with images disabled, when icons or photos carry meaning. Here, on an e-book reader's library page, the result is they miss information that's only conveyed visually.
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
Publish an accessible data table or text summary alongside script-rendered charts.
Outcome
After the fix, the same visitor to an e-book reader's library page can now get the same information as everyone else.
Who is affected
Blind and low-vision people using screen readers, and anyone who browses with images disabled, when icons or photos carry meaning.
Learn more
- Understanding Understanding document (opens in a new tab)
Related scenarios
- Product Photo Added as a CSS Background With No Alt Text
- Chart Alt Text That Never Explains What Each Color Means
- Outdated Alt Text That No Longer Matches the Image
- Alt Text Left as a Filename Instead of a Real Description
- Decorative Image Not Hidden From Screen Reader Users
- Decorative Image Given Alt Text Instead of Being Marked Silent