When to Use ARIA vs Native HTML
Follow the first rule of ARIA: prefer native semantics.
What Is ARIA?
ARIA (Accessible Rich Internet Applications) is a set of attributes that can be added to HTML to improve accessibility for assistive technologies. It fills gaps when native HTML semantics are insufficient.
The First Rule of ARIA
The most important ARIA guideline: don't use ARIA if native HTML can do it:
<!-- BAD: ARIA on a div -->
<div role="button" tabindex="0" onclick="submit()">Submit</div>
<!-- GOOD: use a real button -->
<button type="submit">Submit</button>
<!-- Native HTML elements:
- Are keyboard accessible by default
- Have correct semantics built in
- Work in more contexts
- Require less code
-->All lessons in this course
- When to Use ARIA vs Native HTML
- role button alert dialog and landmark
- aria-label aria-labelledby and aria-describedby
- aria-hidden and aria-live