Accessible Charts Done Right

on YouTube ↗41m

" summary

Claims that charts can be fully usable with screen readers and keyboard navigation, demonstrated using SVGs generated by D3 and tested with VoiceOver on Chrome. Implements element-level accessibility with tabindex=0 and unique labels, hides redundant axes with aria-hidden, adds a skip link and paired HTML data tables (with scope attributes) for screen-reader users. Notes rough counts: 217M low vision, 300M+ colorblind, 36M blind; flags usability breakpoints (≈20 focusable points, 250 mini-charts causing ~17s load) and offers server-side SVG rendering or downloadable CSV/PDF as fallbacks.

AI-written summary · about

" chapters (13)

1. 0:00Introduction
2. 4:20Accessible Charts
3. 6:40Chart Description
4. 16:20Charts vs Accessible Data
5. 17:17Combining Charts and Tables
6. 24:01Flatten Tables
7. 24:38Three Ways of Making Accessible Charts
8. 27:50Render in the Server
9. 28:58Summary
10. 29:51How to make charts accessible
11. 30:43Resources
12. 32:11Questions
13. 34:13Slate Engine

" related talks

• 34mAccessible Charts Done Right: Myth or RealitySergei Kriger · CSS-Minsk-JS 2018
• 35mAccessible Charts Done RightSergei Kriger · FrontEnd Con 2018
• 24mAccessible charts done rightSergei Kriger · WebCamp Zagreb 2018
• 01h 02mDeveloping Accessible ChartsSergey Kriger · HolyJS 2018 Moscow
• 48mAccessibility in Data VisualizationSARAH L. FOSSHEIM · SmashingConf Freiburg 2024
• 38mAccessibility in Data Visualizations: Two Case StudiesCaterina Amato, Ilenia Baronio · Accessibility Days 2023
• 21mMusical Charts: Using OSS to Make Data Visualizations Accessible to Visually Impaired UsersJulianna Langston · Open Source in Finance Forum New York 2022
• 50mAddressing the Core Issue of Data Visualization AccessibilityThomas Watkins · ConveyUX 2023