Talkin' Tables
summary
Covers concrete rules and failures: use caption element as the table name, put row headers in the first column and column headers in the first row, and avoid spanning cells because headers="" is often ignored and different browser+screen‑reader combos assign wrong headers. For responsive, wrap the table in a focusable scrolling container, give it role=region and name from the caption to satisfy SC1410. For sticky headers use position:sticky with logical inset properties; sortable columns use a button in TH with aria-sort and a live region for inconsistent announcements. Test widely.
AI-written summary · about
chapters (10)
- 0:00Welcome
- 1:57HTML table basics
- 5:29Complex tables
- 10:35Responsive tables
- 17:27Fixed headers
- 23:34Labeling controls
- 26:51Selecting entire rows in tables
- 29:43Expando rows
- 33:24Sortable columns
- 45:05Q&A
related talks
28mSemantic HTML: What, Why, and How
50mAddressing the Core Issue of Data Visualization Accessibility
35mAccessible Charts Done Right
49mGetting to the Core of Data Visualization Accessibility
01h 12mPractical Tips for Building More Accessible Front-Ends by Sara Soueidan
34mAccessible Charts Done Right: Myth or Reality
24mAccessible charts done right
47mBuilding Accessible Web Components