ARIA & Semantic HTML

ARIA exists for cases where HTML semantics fall short. Use semantic HTML first; reach for ARIA only when needed. Master the basics: role, aria-label, aria-expanded.

ARIArolearia-labelsemantic

Duration

⏱ About 1.5 hours

Level

📊 Intermediate

Prerequisite

🎯 a11y-01

OUTCOME

Mark up custom widgets so screen readers can understand them

What you'll learn

1Apply the first rule of ARIA
2Use roles to describe widget purpose
3Announce dynamic state with aria-expanded, aria-checked
4Label icon-only buttons with aria-label

1. The First Rule of ARIA

⚠️

"If you can use a native HTML element instead of an ARIA role/property to achieve the same accessibility, do so." — W3C

html

<!-- Bad: re-implementing a button -->
<div role="button" tabindex="0" onclick="...">Click</div>

<!-- Good: just use a button -->
<button onclick="...">Click</button>

2. Common Roles

role	Use
banner	Top of page header
navigation	<nav> equivalent
main	<main> equivalent
contentinfo	<footer> equivalent
search	Search region
dialog	Modal dialog
alert	Time-sensitive notice (assertive)
status	Status update (polite)

3. State & Properties

html

<!-- A toggle button -->
<button aria-pressed="false">Mute</button>

<!-- An accordion -->
<button aria-expanded="false" aria-controls="panel-1">FAQ</button>
<div id="panel-1" hidden>Answer...</div>

<!-- An icon-only button -->
<button aria-label="Close dialog">
  <svg ...></svg>
</button>

<!-- A live region -->
<div role="status" aria-live="polite">3 items saved.</div>

4. Landmarks Help Navigation

Screen-reader users press a shortcut to jump between landmarks. Semantic HTML (header/nav/main/footer) creates them for free.

Example code / lecture materials

All lecture materials and example code are openly available on GitHub.

View on GitHub ↗