Attention, cette version d'AcceDe Web est obsolète,
pour consulter la dernière version, se rendre sur www.accede-web.com/notices/ !

2.2.1. Fenêtres modales (pop-in)

Principe

Les pop-in sont des fenêtres qui apparaissent directement à l’intérieur de la fenêtre courante du navigateur, au-dessus de la page web ou de l’application. Elles sont à opposer aux pop-up et pop-under, qui déclenchent respectivement l’ouverture de nouvelles fenêtres externes, par-dessus et par-dessous la fenêtre courante.

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. Pour poursuivre sa navigation, l’utilisateur doit donc nécessairement effectuer une action dans la pop-in.

Code HTML de base

Le contenu des pop-in peut être intégré dans la page, indifféremment, de deux façons :

  1. Soit le contenu est présent par défaut dans le DOM, mais masqué, avant d’être affiché dans la pop-in sur action de l’utilisateur. Il faut alors veiller à ce que l’ordre de lecture reste cohérent, lorsque les CSS sont désactivées (cf. recommandation 1.2.1 Écrire le code HTML en suivant la logique de l'ordre de lecture dans la notice d’accessibilité HTML et CSS).
  2. Soit le contenu est absent par défaut du DOM, avant d’être chargé dynamiquement dans la pop-in sur action de l’utilisateur. Il faut alors veiller à ce que le contenu soit supprimé à nouveau du DOM lorsque la pop-in se referme.

Selon le mode d’intégration privilégié, le comportement sera différent, lorsque JavaScript n’est pas activé :

  1. Dans le premier cas, l’élément qui déclenche l’apparition de la pop-in devra pointer sur le contenu de la pop-in, présent par défaut dans le DOM.
  2. Dans le second cas, l’élément qui déclenche l’apparition de la pop-in devra pointer sur une autre page où l’utilisateur pourra accéder au contenu de la pop-in.

Comportement avec JavaScript

Lorsqu’une pop-in est affichée à l’écran :

  1. Le focus doit être placé au niveau du conteneur de la pop-in. Rajouter pour cela un tabindex=“0” sur le conteneur, et y placer dynamiquement le focus en JavaScript.
  2. L’utilisateur ne doit pas pouvoir tabuler sur le reste de la page, à l’arrière de la pop-in. Rajouter pour cela un tabindex=”-1” sur tous les éléments tabulables du reste de la page.
  3. La touche Echap du clavier doit permettre à l’utilisateur de fermer la pop-in.

Lorsqu’une pop-in est fermée :

  1. Tous les tabindex=”-1” rajoutés dynamiquement à l’ouverture doivent être supprimés du code source pour permettre à nouveau la navigation au clavier dans la page.
  2. Le focus doit être replacé au niveau de l’élément qui a déclenché l’ouverture de la pop-in.
notices/interfaces-riches-javascript/fenetres-modales-pop-in.txt · Dernière modification: Le 24/01/2014 à 16:55 par Régis Lapeze
 

Projet coordonné par Atalan.

En partenariat avec :

Et le soutien de :