Free scan

Fix "Invalid ARIA role" in HTML

Why it's a problem

A role that does not exist in the specification (typo, invented role, abstract role) is ignored or misread. The element loses the semantics you meant to give it: a “button” is no longer announced as one.

How to fix it — HTML

Use a non-abstract role defined by WAI-ARIA (button, dialog, tab, navigation…). Better: prefer the matching native HTML element, which carries the role and keyboard behaviour for free.

Avoid
<div role="buton" tabindex="0">Envoyer</div>
<nav role="landmark">…</nav>
Correct
<!-- L'élément natif : rôle, focus et clavier inclus -->
<button type="submit">Envoyer</button>
<nav aria-label="Navigation principale">…</nav>

Check your site in 30 seconds

Conformly detects this kind of issue across all your pages, continuously, and alerts you on every regression.

Free scan

Other fixes