Rôle parent ARIA manquant

Silktide vérifie les éléments dont le rôle ARIA n’a de sens qu’à l’intérieur d’un type spécifique de conteneur, par exemple un onglet qui doit se trouver dans une barre d’onglets, et confirme que le conteneur requis est présent.

<!-- Problème : un onglet sans tablist autour -->
<button role="tab">Aperçu</button>

<!-- Correction : encapsulez les onglets dans leur conteneur requis -->
<div role="tablist">
  <button role="tab">Aperçu</button>
</div>

Pourquoi c’est important

Les rôles d’élément dans sont définis par leur contexte : un tab est le troisième de cinq onglets, une option est un choix dans une liste, une row fait partie d’un tableau. Les déduisent la position, le nombre et le comportement de navigation à partir du widget parent. Sans cela, l’élément peut être mal identifié, annoncé sans aucun contexte, ou entièrement ignoré - l’auteur n’a fourni que la moitié d’un composant, et les utilisateurs n’obtiennent de manière fiable aucune des deux parties.

Comment le corriger

Placez l’élément dans un conteneur avec le rôle requis - par exemple, mettez les éléments avec role="tab" à l’intérieur d’un role="tablist".
Si le parent ne peut pas englober physiquement les enfants dans le code, ajoutez aria-owns sur le parent logique pour les adopter.
Si l’élément n’est pas réellement de ce type, supprimez ou corrigez son rôle.

Associations courantes : tab a besoin de tablist ; option a besoin de listbox ; menuitem a besoin de menu ou menubar ; radio dans un groupe ARIA a besoin de radiogroup ; treeitem a besoin de tree ; row a besoin de grid, table, treegrid ou rowgroup ; les cellules et les en-têtes ont besoin de row.

Comment Silktide teste cela

Rechercher chaque élément dont le rôle ARIA exige un rôle parent spécifique.
Remonter ses ancêtres, en suivant également toute adoption via aria-owns, pour trouver un élément avec un rôle parent requis.
Signaler les éléments pour lesquels aucun tel ancêtre n’est trouvé.

Dépannage

Le rôle parent se trouve sur un élément avec un rôle implicite

Les éléments natifs sont pris en compte : un <option> dans un <select> n’a pas besoin de rôles explicites, car les deux portent implicitement les bons rôles. Des signalements apparaissent lorsque un rôle d’élément explicite est utilisé sans aucun parent adéquat, explicite ou implicite.

Ce contrôle ne remonte rien alors que je m’attends à des signalements

Les tests ARIA peuvent être désactivés par site web. Consultez les paramètres avancés du site.