Markup matters

on YouTube ↗33m

" summary

Claim: semantic HTML is the actual accessibility work and it fixes real failures, not a vague practice. Demos use screen readers, voice control and the browser Accessibility Tree API; tools cited include HeadingsMap, Wave and Axe-core. Concrete failures shown: a nav reduced to 24 tab stops and a div with click handler that voice control reads as “+ Add New User” so it fails, plus forms that make a task take 25s vs 2s. Fixes: correct headings, links vs buttons, labeled SVGs, minimal ARIA.

AI-written summary · about

" chapters (18)

1. 0:00Start
2. 2:20Charlie’s journey into accessibility
3. 3:26The breadth of assistive technology scenarios beyond disability alone
4. 5:43The web as a conversation between humans and machines
5. 6:58What happens when CSS or JavaScript are removed from a page versus removing HTML entirely
6. 8:15How a visually polished interface completely collapses for assistive tech because of div based markup and click handlers
7. 10:18Why semantic HTML is not more work
8. 10:56Where accessibility standards come from
9. 12:02DOM as the layer assistive tech interacts with and why its structure must remain consistent
10. 13:31Users navigate using DOM meaning, not visual styling
11. 14:21How screen readers behave between visually identical forms, with very different markup
12. 16:23Browser accessibility trees and why assistive tech cannot guess missing info
13. 17:42Top Laravel markup issues
14. 18:10How visual styling overrides semantic meaning
15. 19:40Building reusable components that enforce semantic headings and meaningful hierarchy decisions
16. 20:44When to use a link, a button or static text, and why mismatching behaviour confuses assistive tech users
17. 22:04Silent SVGs, meaningful versus decorative images, and why icon only buttons must have accessible names
18. 23:10Demonstration of labelled versus unlabelled SVG icons when using voice control and screen readers

" related talks

• 46mSemantics and How to Get Them RightHidde de Vries · beyond tellerrand Düsseldorf 2021
• 44mWeb accessibility for ArtisansFranz Liedke · Laracon EU 2016
• 22mBetter accessibility with a user-centric viewMarianna Österlund · React Finland 2022
• 52mCommon Accessibility PitfallsChris DeMars · DevReach 2022
• 11mIt's the Markup that MattersHidde de Vries · Next.js Conf 2020
• 01h 07mA web for anyone, anywhere, anytimeRowdy Rabouw · NDC Melbourne 2022
• 33mIt's the markup that mattersHidde de Vries · JSConf Budapest 2022
• 28mHumanizing The Markup Language: Thoughtful Semantics for Better Web ExperiencesTanja Ulianova · NG-BE 2024