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 précis de conteneur, par exemple un onglet qui doit se trouver dans une liste d’onglets, et confirme que le conteneur requis est présent.

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

<!-- Correctif : enveloppez 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, un option est un choix dans une liste, un row fait partie d’un tableau. Les déduisent la position, le nombre et le comportement de navigation à partir du widget parent. Sans celui-ci, l’élément peut être mal identifié, annoncé sans contexte, ou complètement ignoré — l’auteur a ajouté la moitié d’un widget et les utilisateurs n’obtiennent de façon fiable aucune des deux moitiés.

Comment corriger

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

Paires courantes : tab requiert tablist ; option requiert listbox ; menuitem requiert menu ou menubar ; radio dans un groupe ARIA requiert radiogroup ; treeitem requiert tree ; row requiert grid, table, treegrid ou rowgroup ; les cellules et en-têtes requièrent row.

Comment Silktide vérifie cela

Trouver chaque élément dont le rôle ARIA exige un rôle parent spécifique.
Remonter ses ancêtres, en suivant aussi toute adoption via aria-owns, à la recherche d’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 comptent : un <option> à l’intérieur d’un <select> n’a pas besoin de rôles explicites, car les deux portent implicitement les bons rôles. Des constats apparaissent quand un rôle d’élément explicite est utilisé sans parent qualifiant, explicite ou implicite.

Cette vérification ne rapporte rien même si je m’attends à des constats

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