principlejavascriptMajor
ARIA roles — when NOT to use them (native semantics first)
Viewed 0 times
ARIA 1.2, HTML5
aria rolesfirst rule of arianative semanticsrole button divwhen to use aria
Problem
Developers add ARIA roles to generic elements (divs, spans) when a native HTML element already carries the correct role. This produces redundant markup and can override default browser behavior, introducing bugs for screen reader users.
Solution
Use native HTML elements before reaching for ARIA. The first rule of ARIA is: if you can use a native HTML element with the semantics you need, do so.
// BAD — redundant role
<div role="button" tabindex="0" onClick={...}>Submit</div>
// GOOD — use the native element
<button type="button" onClick={...}>Submit</button>
// BAD — role="heading" on a div
<div role="heading" aria-level="2">Section Title</div>
// GOOD
<h2>Section Title</h2>
// ARIA IS appropriate when no native element exists
<div role="tabpanel" aria-labelledby="tab-1">...</div>
// BAD — redundant role
<div role="button" tabindex="0" onClick={...}>Submit</div>
// GOOD — use the native element
<button type="button" onClick={...}>Submit</button>
// BAD — role="heading" on a div
<div role="heading" aria-level="2">Section Title</div>
// GOOD
<h2>Section Title</h2>
// ARIA IS appropriate when no native element exists
<div role="tabpanel" aria-labelledby="tab-1">...</div>
Why
Native HTML elements have built-in keyboard interactions, focus management, and implicit ARIA roles. Recreating them with ARIA requires you to re-implement everything manually and is error-prone.
Gotchas
- Adding role='button' to a div does NOT give it keyboard activation — you must also add tabindex='0' and keydown handlers
- role='presentation' and role='none' strip semantics — use them only when an element is purely decorative
- Some ARIA roles are abstract (e.g., 'widget', 'input') and must never be used directly on HTML elements
- Overriding an implicit role (e.g., role='presentation' on a <button>) removes accessibility entirely
Code Snippets
Native HTML elements with implicit ARIA roles
<!-- Five native elements that make ARIA unnecessary -->
<button>Click me</button> <!-- role=button -->
<a href="/">Home</a> <!-- role=link -->
<input type="checkbox"> <!-- role=checkbox -->
<select><option>A</option></select> <!-- role=listbox -->
<nav>...</nav> <!-- role=navigation -->Context
When marking up interactive or structural UI elements
Revisions (0)
No revisions yet.