Free scan

Fix "ARIA role missing its required parent" in HTML

Why it's a problem

The reverse of the previous rule: a tab outside a tablist, an option outside a listbox, a menuitem outside a menu. On its own, the element is announced without context — the user hears “tab” without knowing which group it belongs to or how many there are.

How to fix it — HTML

Place the element inside the container with the expected role, as a direct child or through role="none" on intermediaries. If the widget is not really a tab set or option list, drop the role: a plain <button> or link is often enough.

Avoid
<ul>
  <li role="option">Paris</li>
  <li role="option">Lyon</li>
</ul>
Correct
<ul role="listbox" aria-label="Ville">
  <li role="option" aria-selected="true">Paris</li>
  <li role="option" aria-selected="false">Lyon</li>
</ul>

<!-- Ou l'élément natif, qui gère tout seul le clavier : -->
<label for="ville">Ville</label>
<select id="ville"><option>Paris</option><option>Lyon</option></select>

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