Étiquettes des boîtes de dialogue

Silktide vérifie que les boîtes de dialogue — des fenêtres contextuelles qui apparaissent au-dessus de la page — déclarent un nom que les peuvent lire à voix haute, afin que les personnes sachent ce qui vient de s’ouvrir.

Une boîte de dialogue est balisée en en donnant à un élément le rôle dialog. Ce rôle indique aux technologies d’assistance qu’une fenêtre distincte est apparue, mais, à lui seul, il ne précise pas à quoi sert cette fenêtre.

<!-- Problème : une boîte de dialogue sans nom accessible -->
<div role="dialog">
  <p>Votre session est sur le point d’expirer.</p>
</div>

Pourquoi c'est important

Lorsqu’une boîte de dialogue s’ouvre, un l’annonce et place le focus du visiteur à l’intérieur. Si la boîte de dialogue a un nom, la personne entend quelque chose comme "Expiration de la session, boîte de dialogue" et comprend immédiatement l’interruption. Sans nom, la personne n’entend que "boîte de dialogue" — elle est arrachée à ce qu’elle faisait sans explication et doit explorer le contenu pour comprendre pourquoi.

Comment corriger

Donnez à chaque boîte de dialogue un , en utilisant l’une des méthodes suivantes :

aria-labelledby pointant vers l’id du titre visible de la boîte de dialogue — la meilleure option, car les visiteurs voyants voient le même nom :

<!-- Corrigé : la boîte de dialogue est nommée par son titre -->
<div role="dialog" aria-labelledby="timeout-title">
  <h2 id="timeout-title">Expiration de la session</h2>
  <p>Votre session est sur le point d’expirer.</p>
</div>

aria-label avec le nom sous forme de texte, lorsque la boîte de dialogue n’a pas de titre visible :

<div role="dialog" aria-label="Expiration de la session">
  ...
</div>

Comment Silktide teste cela

Trouver chaque élément sur chaque page dont le role est dialog.
Déterminer le nom accessible de chaque boîte de dialogue, à partir d’attributs comme aria-label et aria-labelledby.
Signaler chaque boîte de dialogue dont le nom accessible est manquant ou vide.

Dépannage

Ma boîte de dialogue n’apparaît qu’après une interaction de l’utilisateur

Silktide examine chaque page lors de son chargement. Une boîte de dialogue qui n’est ajoutée à la page que plus tard — par exemple après avoir cliqué sur un bouton — peut ne pas être testée, mais elle a quand même besoin d’un nom accessible pour les visiteurs qui y accèdent.

J’utilise l’élément dialog natif

Cette vérification examine les éléments qui déclarent role="dialog" explicitement. Un élément <dialog> natif sans ce rôle n’est pas testé, mais les conseils s’appliquent tout de même : donnez-lui un nom accessible avec aria-labelledby ou aria-label.