Fenêtres modales (popins) (brouillon)

Sommaire

Principe

Les popins sont des fenêtres qui apparaissent directement à l’intérieur de la fenêtre courante du navigateur, au-dessus de la page web qui les appelle.

Il s’agit de fenêtres modales, c’est-à-dire de fenêtres qui prennent le contrôle de la page courante tant qu’elles sont affichées à l’écran.

Socle HTML

<div tabindex="-1">
  [Contenu de la popin]
</div>

Rôles, états et propriétés ARIA

tabindex="-1" doit être appliqué sur le conteneur de la popin.

Interactions au clavier

Tab

Lorsque la popin est affichée, déplace successivement le focus clavier vers chacun des éléments interactifs contenus dans la popin. Si le focus clavier est positionné au niveau du dernier élément interactif contenu dans la popin au moment où la touche est pressée, le focus clavier est déplacé au niveau du premier élément interactif contenu dans la popin.

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 popin 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 popin.

Échap

Lorsque la popin est affichée, ferme la popin et déplace le focus clavier sur l’élément interactif qui a déclenché l’ouverture de la popin.

Comportements attendus

Lorsque la popin est affichée à l’écran

Lorsque la popin est fermée

Remarques

Dans la situation où les conteneurs HTML de la popin 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 popin est affichée :

<body>
  <div aria-hidden="true">
    [Contenu du reste de la page]
  </div>
  <div tabindex="-1">
    [Contenu de la popin]
  </div>
</body>

Supprimer ensuite l’attribut aria-hidden="true" appliqué sur le conteneur du reste de la page lorsque la popin est fermée :

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

Haut de page