Rôle enfant ARIA manquant

Silktide vérifie les widgets conteneurs construits avec des rôles ARIA, tels que les barres d’onglets, les menus et les boîtes de liste, et s’assure que chacun contient le type d’éléments qu’il est censé accueillir. Une barre d’onglets sans onglets, ou un menu sans éléments de menu, est annoncé comme un widget mais n’offre rien à manipuler.

<!-- Problème : un tablist doit contenir des éléments avec role="tab" -->
<div role="tablist">
  <button>Aperçu</button>
</div>

<!-- Correctif : donnez aux éléments enfants leur rôle requis -->
<div role="tablist">
  <button role="tab">Aperçu</button>
</div>

Pourquoi c’est important

Les rôles composites décrivent un widget dans son ensemble : tablist promet des onglets, listbox promet des options, menu promet des éléments de menu. Les passent à une navigation spécialisée pour ces widgets, en s’attendant aux éléments enfants promis. Lorsque les enfants n’ont pas leurs rôles, le widget s’annonce puis se comporte comme une coquille vide : les utilisateurs peuvent l’atteindre mais ne trouvent rien à l’intérieur, tandis que les utilisateurs voyants voient un contrôle pleinement fonctionnel.

Comment le corriger

Ajoutez le rôle requis à chaque élément à l’intérieur du conteneur – par exemple, role="tab" sur chaque contrôle à l’intérieur d’un role="tablist".
Si les éléments doivent se trouver ailleurs dans le code, reliez-les au conteneur avec aria-owns.
Si le conteneur n’est pas réellement ce type de widget, supprimez ou corrigez plutôt son rôle.

Associations courantes : tablist a besoin de tab ; listbox a besoin de option ; menu et menubar ont besoin de menuitem (ou de ses variantes case à cocher et radio) ; radiogroup a besoin de radio ; tree a besoin de treeitem ; grid et table ont besoin de row ; row a besoin de cellules ou d’en-têtes.

Comment Silktide teste ceci

Trouver chaque élément dont le rôle ARIA exige des rôles enfants spécifiques.
Parcourir ses descendants, y compris les éléments adoptés via aria-owns, pour trouver au moins un élément avec un rôle enfant requis.
Signaler les conteneurs pour lesquels aucun n’a été trouvé.

Dépannage

Les éléments sont chargés plus tard par un script

Silktide teste la page lors de son chargement. Si une listbox ou un menu n’est renseigné qu’à la demande, il sera annoncé comme vide jusque-là ; lorsque c’est possible, affichez au moins les premiers éléments avec la page.

Ce contrôle ne signale rien alors que je m’attends à des problèmes

Les tests ARIA peuvent être désactivés pour chaque site. Vérifiez les paramètres avancés du site web.