When Semantic HTML Isn't Enough, ARIA Helps
Accessibility & ARIA
ARIA attributes describe roles and states for screen readers. Use the minimum needed — semantic HTML beats ARIA.
What you'll learn
- Recognize the most useful ARIA attributes
- Avoid common misuse
- Test with a screen reader
ARIA (Accessible Rich Internet Applications) adds roles and state to HTML for assistive tech.
The First Rule of ARIA — Don’t Use ARIA
If a native element does the job, use it. <button> is better
than <div role="button"> every time.
Reach for ARIA when:
- A custom widget has no HTML equivalent (a tab panel, a tree)
- You need to express state HTML can’t (
aria-expanded,aria-busy) - You want to label / describe an element with text not visible in the DOM
Common Attributes
| Attribute | Use |
|---|---|
aria-label | Override the accessible name |
aria-labelledby | Point to another element as the label |
aria-describedby | Point to a longer description |
aria-hidden="true" | Hide from screen readers |
aria-current="page" | Indicate the current item in a nav |
aria-expanded | Is this collapsible item open? |
aria-controls | This element controls another (e.g., a panel) |
aria-live="polite" | Announce changes to this region |
role="status" | Like aria-live="polite" with extra context |
role="alert" | Urgent announcement |
Examples
Icon-only button
<button aria-label="Close">×</button>Without aria-label, a screen reader announces ”×”. With it,
“Close, button”.
Current-page link
<nav>
<a href="/" aria-current="page">Home</a>
<a href="/about">About</a>
</nav>Screen reader announces the current link as “current”.
Expandable panel
<button aria-expanded="false" aria-controls="panel-1">
Show details
</button>
<div id="panel-1" hidden>...</div>JS toggles aria-expanded between true and false, and the
hidden attribute on the panel.
Decorative icon
<svg aria-hidden="true">...</svg>The icon is purely visual; screen reader ignores it.
Live region
<div role="status" aria-live="polite">
Saved!
</div>When JS updates this text, the screen reader announces the new content.
Anti-Patterns
- Slapping
role="button"on a<div>— use a real<button> - Using
aria-labelfor visible text — the visible text already serves aria-hidden="true"on focusable elements — confuses screen readers- Overusing live regions — they fight for attention
Test With a Screen Reader
- VoiceOver — built into macOS / iOS (Cmd-F5)
- NVDA — free on Windows
- TalkBack — Android
Tab through your page with the screen reader on. Listen. Anything confusing? Fix it.
Up Next
Color contrast — the easiest accessibility win.
Color Contrast →