Modale

La modale est un élément de mise en forme de contenu permettant de concentrer l’attention de l’usager exclusivement sur une tâche ou un élément d’information, sans perdre le contexte de la page en cours.

Le composant Modale est conçu pour être accessible et respecter les critères du RGAA. Voici les points clés à prendre en compte pour en garantir l’accessibilité.

Interactions clavier

À l’intérieur de la fenêtre modale :

• Échap : referme la modale et place le focus sur le bouton d’ouverture de la modale ou à un endroit approprié si le bouton disparaît.
• Tab : place le focus sur le prochain élément focalisable de la modale.
• Maj + Tab : place le focus sur l'élément focalisable précédent.

Le focus doit rester dans la fenêtre modale tant qu’elle n’est pas fermée.

Règles d’accessibilité

Le composant Modale s’appuie sur le motif de conception ARIA Dialog de l’Authoring Practices Guide (APG).

• L’élément qui déclenche l’ouverture de la fenêtre modale doit être un button.
• La modale utilise l’élément HTML <dialog>.
• Elle dispose d’un attribut aria-modal="true" pour indiquer aux lecteurs d'écran que l’élément est une modale lorsqu'il est affiché.
• La modale doit avoir un nom accessible. Elle est nommée avec un attribut aria-labelledby défini sur l’ID du titre de la fenêtre modale.
• La modale a un titre de niveau h2 à h6, en fonction de son positionnement dans le DOM, ou sous forme de balise <p>.

Restitution par les lecteurs d’écran

L’élément <dialog> est restitué différemment selon les lecteurs d’écran.

Tous les lecteurs d’écran restituent le nom accessible et le rôle de la modale.

• Talkback, Narrateur et Jaws : nom, boîte de dialogue
• NVDA : nom, dialogue
• VO iOS / VO macOS : nom, boîte de dialogue web

Note : VoiceOver macOS ne restitue pas le nom de la modale avec Firefox et Chrome.

Capture du focus

Note : le focus n’est pas capturé avec les lecteurs d’écran mobiles sur la version actuelle du composant Modale.

---

Critères RGAA applicables

• Couleurs : 3.2
• Scripts : 7.1, 7.3
• Éléments obligatoires : 8.9
• Structuration : 9.1
• Présentation de l’information : 10.1, 10.2, 10.3, 10.4, 10.5, 10.7, 10.8, 10.11, 10.12
• Navigation : 12.8, 12.9
• Consultation : 13.9, 13.11

---

Références

• Référentiel général d’amélioration de l’accessibilité (RGAA 4.1.2)
• Motif de conception WAI-ARIA Dialog
• L’élément HTML dialog
• Attribut aria-modal