Libellés 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.

On balise une boîte de dialogue 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 dit 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, elle n’entend que « boîte de dialogue » : elle est détournée de 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 en 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, sur chaque page, tous les éléments dont le role est dialog.
Déterminer le nom accessible de chaque boîte de dialogue, à partir d’attributs tels que 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 un clic sur un bouton — peut ne pas être testée, mais elle a tout de même besoin d’un libellé pour les visiteurs qui y accèdent.

J’utilise l’élément de dialogue natif

Ce contrôle examine les éléments qui déclarent explicitement role="dialog". Un élément <dialog> natif sans ce rôle n’est pas testé, mais les conseils restent valables : donnez-lui un nom accessible avec aria-labelledby ou aria-label.