Scan gratuit

Corriger « Rôle ARIA sans le parent requis » en HTML

Pourquoi c'est un problème

L'inverse de la règle précédente : un tab hors d'une tablist, une option hors d'une listbox, un menuitem hors d'un menu. Isolé, l'élément est annoncé sans son contexte — l'utilisateur entend « onglet » sans savoir à quel groupe il appartient ni combien il y en a.

Comment corriger — HTML

Placez l'élément dans le conteneur au rôle attendu, en enfant direct ou via role="none" sur les intermédiaires. Si le composant n'est pas réellement un groupe d'onglets ou une liste d'options, retirez le rôle : un simple <button> ou un lien suffit souvent.

À éviter
<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>

Vérifiez votre site en 30 secondes

Conformly détecte ce type de problème sur toutes vos pages, en continu, et vous alerte à chaque régression.

Scan gratuit

Autres corrections