Boîtes de dialogue modales (popins de dialogue)
Depuis la rédaction de cette fiche, une mise à jour de la spécification ARIA a eu lieu : passage de ARIA 1.0 (ancienne version) à ARIA 1.1 (nouvelle version).
Cette fiche s’appuie sur les motifs de conception ARIA 1.0 issus du document WAI-ARIA Authoring Practices 1.0, et les recommandations ci-dessous pourront faire l’objet d’ajustements une fois les motifs de conception ARIA 1.1 officialisés.
Pour plus d’informations sur les changements relatifs au passage à ARIA 1.1, consulter les WAI-ARIA Authoring Practices 1.1.
Sommaire
- Principe.
- Socle HTML.
- Rôles, états et propriétés ARIA.
- Interactions au clavier.
- Comportements attendus.
- Remarques.
- Composants.
Principe
Les boîtes de dialogue modales sont un cas particulier de fenêtres modales.
Elles interrompent la navigation de l’utilisateur et apparaissent dans le but de lui demander de renseigner une information ou de soumettre une réponse.
Cette fiche s’appuie sur le motif de conception « Dialog (Modal) » détaillé dans les WAI-ARIA 1.0 Authoring Practices du W3C.
Socle HTML
Le socle HTML d’une boîte de dialogue modale varie légèrement selon qu’elle possède ou non un titre affiché à l’écran.
Boîte de dialogue modale avec titre affiché à l’écran
Boîte de dialogue modale sans titre affiché à l’écran
Rôles, états et propriétés ARIA
role="dialog"
doit être appliqué sur le conteneur de la boîte de dialogue modale.- Si le titre de la boîte de dialogue modale est affiché à l’écran, il doit être rattaché à la boîte de dialogue modale via l’attribut
aria-labelledby
:- Le titre de la boîte de dialogue modale doit posséder un attribut
id
renseigné avec une valeur unique. - Le conteneur de la boîte de dialogue modale doit posséder un attribut
aria-labelledby
renseigné avec la valeur de l’attributid
du titre de la boîte de dialogue modale.
- Le titre de la boîte de dialogue modale doit posséder un attribut
- Si le titre de la boîte de dialogue modale n’est pas affiché à l’écran,
aria-label
doit être appliqué et renseigné sur le conteneur de la boîte de dialogue modale.
Interaction au clavier
Tab
Lorsque la boîte de dialogue modale est affichée, déplace successivement le focus clavier vers chacun des éléments interactifs contenus dans la boîte de dialogue modale. Si le focus clavier est positionné au niveau du dernier élément interactif contenu dans la boîte de dialogue modale au moment où la touche est pressée, le focus clavier est déplacé au niveau du premier élément interactif contenu dans la boîte de dialogue modale.
Maj + Tab
Même comportement qu’avec la touche Tab, mais cette fois dans l’ordre inverse de lecture. Si le focus clavier est positionné au niveau du premier élément interactif contenu dans la boîte de dialogue modale au moment où la combinaison de touches est pressée, le focus clavier est déplacé au niveau du dernier élément interactif contenu dans la boîte de dialogue modale.
Entrée
Lorsque la boîte de dialogue modale est affichée, déclenche l’action par défaut de la boîte de dialogue modale.
Échap
Lorsque la boîte de dialogue modale est affichée, ferme la boîte de dialogue modale, et déplace le focus clavier sur l’élément interactif qui a déclenché l’ouverture de la boîte de dialogue modale.
Comportement attendu
Lorsque la boîte de dialogue modale est affichée à l’écran
- Le focus clavier est positionné dynamiquement sur le premier élément interactif contenu dans la boîte de dialogue modale.
- Le focus clavier doit être bloqué à l’intérieur de la boîte de dialogue modale et l’utilisateur ne doit pas pouvoir tabuler sur le reste de la page, en-dessous de la boîte de dialogue modale. Pour cela, deux possibilités :
- Rajouter dynamiquement un attribut
tabindex="-1"
sur chacun des éléments interactifs du reste de la page. - Placer un écouteur sur le dernier élément interactif contenu dans la boîte de dialogue modale, et déplacer le focus clavier au niveau du premier élément interactif contenu dans la boîte de dialogue modale, lorsque la touche Tab est pressée. Faire de même pour, respectivement, le premier élément interactif de la boîte de dialogue modale, et la combinaison de touches Maj + Tab.
- Rajouter dynamiquement un attribut
- Il est possible de fermer la boîte de dialogue modale avec la touche Échap.
Lorsque la boîte de dialogue modale est fermée
- Les éventuels attributs
tabindex="-1"
rajoutés en arrière-plan doivent être supprimés. - Le focus clavier doit être replacé au niveau de l’élément qui a déclenché l’ouverture de la boîte de dialogue modale.
- Si la boîte de dialogue modale reste présente dans le code source,
aria-hidden="true"
etdisplay: none
ouvisibility: hidden
doivent être appliqués sur son conteneur.
Remarques
Dans la situation où les conteneurs HTML de la boîte de dialogue modale et celui du reste de la page sont frères dans le code source, c’est-à-dire au même niveau hiérarchique dans l’arbre DOM, appliquer un attribut aria-hidden="true"
sur le conteneur du reste de la page, lorsque la boîte de dialogue modale est affichée :
Supprimer ensuite l’attribut aria-hidden="true"
appliqué sur le conteneur du reste de la page, lorsque la boîte de dialogue modale est fermée :
Composants
Les composants ci-après sont proposés ici car leur niveau d’accessibilité est jugé bon ou très bon.
Toutefois, avant de les utiliser dans votre projet, il est important de vérifier le respect des spécifications présentées ci-avant. Certains pouvant nécessiter quelques ajustements, variables en fonction de la version utilisée.
2 commentaires
-
C’est quoi le focus ?
Et comment dois-je faire pour déplacer des icônes pla c’est sur ma page d’accueil alors que je veux les garder mais pas sur ma 1ere page.
Merci à vous de me répondre
Salutations
Martinique-
Bonjour,
Le focus clavier (focus définition sur Wikipedia) correspond à l’emplacement courant du clavier sur l’interface. Lorsqu’on utilise la touche tabulation pour se promener de lien en lien, on déplace le focus de lien en lien.
Pour le reste, je suis désolé, mais je ne comprends pas votre question.Sébastien.
-
Ajouter un commentaire
Mises à jour
- 09/01/2018
- Modification de l’encart informatif concernant la mise à jour de la spécification ARIA depuis la version ARIA 1.0 vers la version ARIA 1.1 en introduction de la fiche.
- 10/07/2017
- Ajout d’un encart informatif concernant la mise à jour de la spécification ARIA depuis la version ARIA 1.0 vers la version ARIA 1.1 en introduction de la fiche.