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

css

<!-- 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>

2Put the element in context

ARIA can add names, relationships, and states when native HTML does not fully express an interaction. It does not implement the interaction itself. Incorrect roles can mislead assistive technology, so begin with the appropriate native element and add only necessary semantics.

3Practice with a small page

Compare a native button with a styled div given a button role. Test keyboard activation and focus to see what the role does not provide. Add an accessible name to an icon-only native button and check that its decorative icon is not announced separately.

Finished reading?

Mark this topic as complete to track progress.