It's the Markup that Matters
summary
Explains concrete markup actions: ensure a <title> stays updated, use semantic headings (h1–h3) and landmarks so screen readers can navigate by heading and find regions, label form controls with a label element with for/id (WebAIM finds roughly 60% of inputs unlabeled), prefer native elements over ARIA, use role=alert for toasts, inspect the accessibility tree, and consider the emerging Accessibility Object Model (AOM) JS API to read or set accessibility info and automate testing.
AI-written summary · about
chapters (11)
- 0:00Start
- 2:41Accessible code points
- 5:01What's on this page? Landmarks
- 6:43Tables make tabular data easier to navigate
- 7:07No meaningful mark-up for your component? ARIA can polyfill!
- 7:30Expandables
- 8:12Meaning without mark-up: the Accessibility Object Model
- 8:54Setting semantics without mark-up
- 9:20Events from Assistive Technologies
- 9:39Reading accessibility tree through JavaScript
- 9:57Good mark-up makes a difference, gives us lots of accessibility for free
related talks
33mIt's the markup that matters
33mMarkup matters
28mHumanizing The Markup Language: Thoughtful Semantics for Better Web Experiences
51mWhy Good Markup Matters for All Users
52mCommon Accessibility Pitfalls
45mA Web for Anyone, Anywhere, Anytime
01h 01mA web for anyone, anywhere, anytime
46mSemantics and How to Get Them Right