How To Make Your Website More Accessible with WAI-ARIA
summary
The talk argues ARIA has clear, usable pieces and clear hazards: landmarks, aria-expanded and aria-pressed reliably convey state; accessible naming, aria-current and aria-live help navigation and announcements; aria-hidden removes redundancy. Practical tooling examples include the HTML popover attribute which gives ARIA for free and authoring patterns (menu + roving tabindex) that must implement many keys. Pitfalls include mismatched attributes, poor focus management, role=application and aria-owns/roledescription having inconsistent or harmful support.
AI-written summary · about
chapters (20)
- 0:00WAI-ARIA introduction
- 3:11What WAI-ARIA is
- 7:04WAI-ARIA ontology
- 10:58When ARIA helps
- 12:02Landmarks in navigation
- 13:27aria-expanded for toggles
- 14:32aria-pressed for toggles
- 15:14Labeling elements
- 16:36aria-label vs aria-description
- 18:00aria-current for current items
- 19:03aria-live for updates
- 20:49Hiding content
- 21:55Complex ARIA patterns
- 26:05Documentation pitfalls
- 28:54HTML provides ARIA
- 30:42Common ARIA mistakes
- 31:47Focus management
- 32:50Role application dangers
- 34:16Unreliable ARIA attributes
- 36:49Key takeaways
related talks
49mARIA A Grande Method Of Accessible Markup
18mWarm-Up Talk: ARIA Serious?
25mARIA: A Grande Method Of Accessible Markup with Chris DeMars
34mIntroduction to ARIA: A Developer's Guide
50mARIA: the good parts
47mBuilding Accessible Web Components
33mAccessibility Done Right
32mEmpowering Rich Internet Applications (RIAs) with Accessibility