Scan gratuit

Corriger « Rôle ARIA sans les enfants requis » en HTML

Pourquoi c'est un problème

Certains rôles sont des conteneurs qui n'ont de sens qu'avec leurs enfants : une tablist contient des tab, une listbox des option, un menu des menuitem. Sans eux, le lecteur d'écran annonce un conteneur vide ou n'annonce ni le nombre d'éléments ni la position de chacun.

Comment corriger — HTML

Donnez aux enfants directs le rôle attendu par le conteneur, ou retirez le rôle du conteneur s'il ne correspond pas au composant réel. Attention aux <div> d'enveloppe ajoutés par un framework entre le parent et ses enfants : marquez-les role="none".

À éviter
<div role="tablist">
  <button>Mensuel</button>
  <button>Annuel</button>
</div>
Correct
<div role="tablist" aria-label="Période de facturation">
  <button role="tab" aria-selected="true" aria-controls="p-mois" id="t-mois">Mensuel</button>
  <button role="tab" aria-selected="false" aria-controls="p-an" id="t-an" tabindex="-1">Annuel</button>
</div>

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