Boîtes de dialogue modales (popins de dialogue)

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.

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

<div role="dialog" aria-labelledby="titre-modale">
  <h1 id="titre-modale">[Titre de la boîte de dialogue modale]</h1>
  [Contenu de la boîte de dialogue modale]
  <button>Annuler</button>
  <button>[Action par défaut]</button>
</div>

Boîte de dialogue modale sans titre affiché à l’écran

<div role="dialog" aria-label="[Titre de la boîte de dialogue modale]">
  [Contenu de la boîte de dialogue modale]
  <button>Annuler</button>
  <button>[Action par défaut]</button>
</div>

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’attribut id du titre de la boîte de dialogue modale.
• 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 :
  1. Rajouter dynamiquement un attribut tabindex="-1" sur chacun des éléments interactifs du reste de la page.
  2. 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.
• 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" et display: none ou visibility: 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 :

<body>
  <div aria-hidden="true">
    [Contenu du reste de la page]
  </div>
  <div role="dialog" aria-labelledby="titre-modale">
    <h1 id="titre-modale">[Titre de la boîte de dialogue modale]</h1>
    [Contenu de la boîte de dialogue modale]
    <button>Annuler</button>
    <button>[Action par défaut]</button>
  </div>
</body>

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 :

<body>
  <div>
    [Contenu du reste de la page]
  </div>
</body>

Composants

4 commentaires

Haut de page