Boîtes de dialogue modales (popins de dialogue)

Une mise à jour de la spécification ARIA est en cours d’officialisation : passage progressif de ARIA 1.0 (recommandation actuelle) à ARIA 1.1 (recommandation en cours d’homologation).

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 la version ARIA 1.1 officialisée.

Pour plus d’informations sur les changements relatifs au passage à ARIA 1.1, consulter les WAI-ARIA Authoring Practices 1.1.

Sommaire

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


<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

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

Lorsque la boîte de dialogue modale est fermée

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

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.

  1. Modal Dialog.
  2. The Incredible Accessible Modal Window, Version 4.

3 commentaires

  • Par Martine monjales, le 4 février 2017 à 7h53.

    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

    Répondre

    • Par Sébastien Delorme, le 5 février 2017 à 15h42.

      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.

      Répondre

  • Par Laurent Bracquart, le 10 juillet 2017 à 11h22.

    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 le 10/07/2017.

    Répondre

Ajouter un commentaire

Les champs avec astérisque (*) sont obligatoires.

Haut de page