ARIA in Practice

What you'll learn

• Why bad ARIA is worse than no ARIA at all
• The difference between roles, states, and properties
• How accessible names are calculated, and which attribute wins
• When to use a live region — and which kind
• Four ways to hide content, and what each one means to a screen reader
• Patterns for buttons, disclosures, tabs, and checkboxes that don't break
• How to read the ARIA Authoring Practices Guide without copy-pasting blindly

1. 01
   The five rules of ARIA

   Including the rule everyone forgets: no ARIA is better than bad ARIA.
   14 min
2. 02
   Roles, states, and properties

   The three categories. Why aria-disabled is not the same as disabled.
   17 min
3. 03
   Naming and describing

   aria-label, aria-labelledby, aria-describedby, and how the accessible name is computed.
   17 min
4. 04
   Live regions

   Announcing dynamic changes. Polite, assertive, status, alert, atomic.
   17 min
5. 05
   Hiding content thoughtfully

   aria-hidden vs hidden vs display:none vs .visually-hidden.
   15 min
6. 06
   Common widget patterns

   Fake buttons, custom checkboxes, disclosure, and the tab pattern.
   17 min
7. 07
   The composite widgets

   Comboboxes, listboxes, tree views, grids — and why they're hard.
   18 min
8. 08
   Reading the ARIA Authoring Practices Guide

   How APG is structured, and when a pattern is a starting point — not a rule.
   15 min