Invalid ARIA role: how to find and fix it

What it means

An ARIA role mismatch occurs when an element carries an ARIA role attribute that doesn't align with its native HTML semantics. For instance, a <div> with role="button" is valid, but a <button> with role="button" is redundant and often flagged as invalid. The issue also appears when a role is applied to an element that doesn't support it, or when the role value is misspelled.

Why it matters

ARIA roles form part of the semantic accessibility tree that Googlebot and AI agents parse alongside the DOM. A mismatched role can confuse these systems about whether an element is interactive, and whether it carries an accessible name. Since screen readers and AI retrieval agents consume pages as semantic trees rather than pixels, incorrect roles can degrade content extraction and reduce the likelihood of your page being cited in AI Overviews.

How to fix it

1. Audit the element with axe DevTools or Lighthouse and identify the specific role mismatch.
2. Prefer native HTML semantics over ARIA — use <button> instead of <div role='button'>.
3. Remove redundant roles that duplicate native semantics, such as <button role='button'>.
4. If a custom role is necessary, ensure it is applied to a non-interactive element and paired with an accessible name.

When it's not a problem

This is a notice-level issue, not a critical error. A single mismatched role on a decorative element rarely affects ranking. If the role is on a visually hidden element (aria-hidden="true") or inside a component that falls outside the main content area, it can be safely ignored.

How common is it?

204 audited sites in our corpus currently show this issue. The breakdowns below show which platforms, gatekeepers, verticals and countries are most exposed.