Confinement du focus dans une boîte de dialogue modale

Silktide identifie les pages qui contiennent une boîte de dialogue modale — un pop-up qui bloque l’interaction avec le reste de la page — et vous demande de vérifier que le focus clavier est correctement géré pendant que la boîte de dialogue est ouverte. Il s’agit d’une vérification manuelle : les tests automatisés peuvent trouver la boîte de dialogue, mais ne peuvent pas observer son comportement à l’ouverture et à la fermeture.

Pourquoi c’est important

Pendant qu’une boîte de dialogue modale est ouverte, la page derrière reste visible mais inactive. Si le peut s’échapper de la boîte de dialogue, les utilisateurs au clavier et de se retrouvent à tabuler dans du contenu qu’ils ne peuvent ni voir ni utiliser, lisent la page sous-jacente hors contexte et perdent complètement leur repère. Et si le focus n’est pas restitué à la fermeture de la boîte de dialogue, ils sont renvoyés en haut de la page et devront revenir là où ils étaient.

Comment corriger

Ouvrez chaque boîte de dialogue de la page et vérifiez au clavier uniquement :

À l’ouverture de la boîte de dialogue, le focus s’y déplace — généralement sur le premier contrôle ou sur la boîte de dialogue elle-même.
La pression des touches Tab et Maj+Tab fait circuler le focus parmi les contrôles de la boîte de dialogue sans jamais atteindre la page située derrière.
La touche Échap ferme la boîte de dialogue (pour les boîtes de dialogue qui peuvent être fermées).
À la fermeture de la boîte de dialogue, le focus revient sur l’élément qui l’a ouverte.

Si l’un de ces points échoue, corrigez votre implémentation de boîte de dialogue. L’élément natif <dialog> ouvert avec showModal() fournit la plupart de ces comportements par défaut ; les boîtes de dialogue personnalisées doivent les implémenter par script. Si tout se comporte correctement, le constat.

Comment Silktide le teste

Recherche d’indices indiquant qu’une page contient une boîte de dialogue modale: un élément <dialog> natif, un élément avec role="dialog" ou role="alertdialog", un élément avec aria-modal="true", ou un élément avec un nom de classe usuel de style modal qui contient également des contrôles pouvant recevoir le focus.
Lorsque l’un de ces éléments est détecté, une demande d’examen est créée pour la page.

Silktide ne peut pas ouvrir la boîte de dialogue et observer le comportement du focus en temps réel ; ce contrôle n’échoue donc jamais automatiquement — il vous demande de vérifier.

Dépannage

La page n’a aucune fenêtre modale visible

De nombreux sites embarquent le balisage d’une boîte de dialogue dans chaque page (un pop-up de newsletter, une boîte de dialogue de cookies, une surcouche de recherche masquée) qui n’apparaît que dans certaines conditions. L’invite s’applique toujours : vérifiez le comportement de la boîte de dialogue dans l’état où elle s’ouvre. Si ce balisage est un reliquat qui ne peut jamais s’ouvrir, envisagez de le supprimer.

Nos boîtes de dialogue proviennent d’une bibliothèque tierce

Les bibliothèques de boîtes de dialogue reconnues gèrent généralement correctement le focus, mais la configuration et le contenu personnalisé peuvent le perturber. Vérifiez le comportement sur vos propres pages plutôt que de vous fier à la documentation de la bibliothèque.