ARIA Basics

ARIA (Accessible Rich Internet Applications) adds accessibility information to elements when HTML alone isn't enough. But remember: native HTML is always preferred.

The First Rule of ARIA

Rule #1: If you can use native HTML, do it.

• <button> over <div role="button">
• <nav> over <div role="navigation">
• <main> over <div role="main">

ARIA Labels

Common labeling attributes:

• aria-label - Provides invisible label
• aria-labelledby - Points to element with label
• aria-describedby - Points to description

ARIA Landmarks

Landmark roles help screen reader users navigate:

• banner - Header
• navigation - Nav
• main - Main content
• complementary - Aside
• contentinfo - Footer
• search - Search area

ARIA for Dynamic Content

Live region values:

• polite - Announce when convenient
• assertive - Announce immediately (use sparingly)

ARIA States

Common states:

• aria-expanded - Expanded/collapsed
• aria-selected - Selected item
• aria-checked - Checked state
• aria-disabled - Disabled state
• aria-hidden - Hidden from screen readers

ARIA for Forms

Form ARIA:

• aria-required - Field is required
• aria-invalid - Field has error
• aria-errormessage - Error message reference

Skip Links

Skip links let keyboard users bypass repetitive content.

Exercise: Add ARIA Attributes

Improve the accessibility with appropriate ARIA:

ARIA enhances accessibility when native HTML isn't enough - use it wisely!