Back to Learn
Pulseaccessibility

ARIA Roles Used on Compatible Elements

What This Audit Checks

This audit verifies that every ARIA role attribute is applied to an element whose implicit semantics allow that role. For example, you cannot put role="heading" on an <a> element because links and headings have fundamentally different semantics.

Why It Matters

When you assign an incompatible role to an element, assistive technologies receive contradictory signals. A screen reader might announce an element as a button but keyboard behavior remains that of a link, confusing users who rely on consistent interaction patterns.

How to Fix It

  • Use the correct native HTML element instead of overriding with ARIA. A <button> is always better than <div role="button">.
  • Check the allowed roles for each element in the ARIA in HTML spec.
  • Remove conflicting roles from elements that already have strong implicit semantics.
<!-- Bad: <a> cannot have role="button" reliably -->
<a href="/page" role="button">Click me</a>

<!-- Good: use a real button -->
<button onclick="navigate('/page')">Click me</button>

<!-- Good: or keep the link as a link -->
<a href="/page">Click me</a>

How Pulse Tracks This

Pulse flags this audit in your Lighthouse accessibility score. When the audit fails, Pulse shows which elements triggered it so you can fix them directly.

Resources