When semantic HTML isn’t enough (but it usually is)
ARIA (Accessible Rich Internet Applications) is powerful. It’s also really easy to mess up.
The First Rule of ARIA
Don’t use ARIA.
No, really. The first rule of ARIA is literally “If you can use a native HTML element… then do so.”
<!-- Bad: ARIA doing HTML's job -->
<div role="button" tabindex="0" onclick="submit()">Submit</div>
<!-- Good: HTML doing HTML's job -->
<button onclick="submit()">Submit</button>The Second Rule of ARIA
Don’t change native semantics.
<!-- WRONG -->
<h2 role="button">Don't do this</h2>
<!-- Also WRONG: Redundant ARIA -->
<button role="button">Submit</button>When You Actually Need ARIA
Sometimes you’re building complex interfaces. Sometimes you’re stuck with legacy code. Sometimes HTML doesn’t have what you need.
That’s when ARIA helps:
<!-- Describing relationships -->
<input
type="password"
aria-describedby="password-help"
>
<span id="password-help">
Must be at least 8 characters with a number
</span>
<!-- Live regions for dynamic content -->
<div aria-live="polite" aria-atomic="true">
<p>Your changes have been saved</p>
</div>
<!-- Labeling when you can't use a real label -->
<button aria-label="Close dialog">
<svg>...</svg> <!-- Just an X icon -->
</button>
<!-- States for interactive widgets -->
<button
aria-expanded="false"
aria-controls="menu"
>
Menu
</button>
<ul id="menu" hidden>...</ul>Common ARIA Mistakes
<!-- Bad: Conflicting semantics -->
<h2 role="button">Don't do this</h2>
<!-- Bad: Wrong ARIA -->
<div aria-label="Main navigation">
<!-- aria-label doesn't work on divs without a role -->
</div>
<!-- Bad: ARIA without behavior -->
<div role="button">
<!-- Looks like a button to screen readers but
doesn't act like one -->
</div>
<!-- Bad: Over-ARIA'd -->
<div role="button" tabindex="0" aria-pressed="false"
aria-label="Submit" onclick="submit()">
Submit
</div>Remember: ARIA changes what assistive technology announces, not what elements do. A div with role=”button” doesn’t magically become keyboard accessible.
ARIA is like seasoning. A little goes a long way. Too much ruins the dish.
→ When you actually need ARIA:
- ARIA Authoring Practices – The official patterns
- Using ARIA – When and how (and when not to)