ARIA: the good parts

Incorrect ARIA is often worse than no ARIA at all. Learn the few attributes that safely improve accessibility and which common ones create more problems than they solve.

#1about 5 minutes

Addressing the negative perception of ARIA

ARIA is often associated with more accessibility errors, but it was created to improve the web when used correctly.

#2about 9 minutes

How ARIA provides semantics for assistive technology

ARIA modifies the accessibility meta-information, including roles, states, and properties, that assistive technologies use to build an interface for users.

#3about 7 minutes

Using ARIA to convey page structure and state

Use landmarks to define key page regions and attributes like `aria-expanded` and `aria-pressed` to communicate the state of interactive controls.

#4about 8 minutes

Providing context with labels and live regions

Use `aria-label` for unlabeled controls, `aria-current` for active items, and `aria-live` to announce important dynamic UI changes.

#5about 4 minutes

Handling complex widgets and decorative content

Complex widgets like menus require careful implementation of roles and keyboard interactions, while `aria-hidden` can remove purely decorative content.

#6about 5 minutes

Common ARIA pitfalls and implementation mistakes

Avoid common mistakes like misinterpreting authoring guides, creating conflicts between ARIA states and the visual UI, or losing focus after an action.

#7about 17 minutes

ARIA attributes to avoid and key takeaways

Be cautious with attributes like `role="application"` and `aria-roledescription` that can break user expectations, and remember that ARIA adds semantics, not behavior.