Accessible charts done right

on YouTube ↗24m

" summary

Covers four practical techniques: short descriptive alt/label + <desc> for simple charts, making each mark focusable with tabindex=0 and aria-label so screen readers read points, and adding a skip link to avoid tabbing dozens of elements (recommend switching strategy over ~20 items). For complex data, pair charts with simple split tables using <caption> and scope, or offer CSV/PDF downloads. For heavy pages (250 charts caused ~17s on an old phone) consider server-side rendering of static SVG/HTML to save client CPU.

AI-written summary · about

" chapters (11)

1. 0:00Introduction and sound check
2. 1:06About the speaker and topic
3. 2:52Why accessible charts matter
4. 3:57Simple chart accessibility
5. 7:30Complex charts accessibility
6. 10:19Skip links for navigation
7. 13:30Accessible data vs charts
8. 16:26Charts and tables combination
9. 18:55Performance in accessibility
10. 21:27Server-side chart rendering
11. 21:48Summary and resources

" related talks

• 35mAccessible Charts Done RightSergei Kriger · FrontEnd Con 2018
• 34mAccessible Charts Done Right: Myth or RealitySergei Kriger · CSS-Minsk-JS 2018
• 41mAccessible Charts Done RightSergei Kriger · Inclusive Design 24 (#id24) 2018
• 50mAddressing the Core Issue of Data Visualization AccessibilityThomas Watkins · ConveyUX 2023
• 15mThe Future of Data Visualization on the WebAlan Mendelevich · You Gotta Love Frontend 2019
• 01h 02mDeveloping Accessible ChartsSergey Kriger · HolyJS 2018 Moscow
• 33mPainting with DataRichard Westenra · RS Conf 2019
• 21mMusical Charts: Using OSS to Make Data Visualizations Accessible to Visually Impaired UsersJulianna Langston · Open Source in Finance Forum New York 2022