Semantic & Interactive

ARIA & Accessibility

role, aria-label, aria-hidden — make HTML usable for everyone.

1When to Reach for ARIA

First rule of ARIA: do not use ARIA. Native semantic HTML (button, nav, label) is always preferred. ARIA fills the gaps when no native element fits.

Example Code

<!-- Prefer this -->
<button>Close</button>

<!-- ARIA only when needed -->
<div role="button" tabindex="0" aria-label="Close menu">×</div>

<!-- Hide decorative elements -->
<svg aria-hidden="true">...</svg>

<!-- Live regions -->
<div role="status" aria-live="polite">Saved!</div>

Finished reading?

Mark this topic as complete to track progress.