Rock & roll guide to HTML5 & ARIA
summary
HTML5 elements map to ARIA roles so browsers and AT get clearer semantics, ARIA 1.0 is a W3C recommendation (1.1 is a draft), and the spec lists ~30 roles plus states and properties. Practical takeaways: use tabindex="0" to add focus, avoid positive tabindex, use aria-live="polite" or aria-live="assertive" with aria-atomic for concise updates, prefer native HTML5 landmarks but add roles for older AT, map tabs with role="tablist"/"tab"/"tabpanel" and always implement keyboard handlers and scripting for expected behavior.
AI-written summary · about
chapters (14)
- 0:00Intro
- 1:32Overview
- 2:24Web accessibility stack v2
- 4:41W3C specification
- 6:51Tabindex
- 13:42Native HTML
- 16:05Adding a role
- 17:11Adding focus
- 17:31Adding keyboard support
- 22:56HTML4 + ARIA landmarks
- 26:29HTML5 + ARIA landmarks exception
- 35:04HTML5 + ARIA roles
- 38:40Tab widget in action
- 40:03Resources
related talks
34mIntroduction to ARIA: A Developer's Guide
49mARIA A Grande Method Of Accessible Markup
38mHow To Make Your Website More Accessible with WAI-ARIA
18mWarm-Up Talk: ARIA Serious?
25mARIA: A Grande Method Of Accessible Markup with Chris DeMars
26mLet’s Keep Our Promises: ARIA, Styles and Keyboard Navigation
50mARIA: the good parts
33mAccessibility Done Right