Fenêtre modale

Mots-clés

• Bouton modale : un bouton modale est un élément d’interface cliquable qui déclenche l’ouverture d’une fenêtre modale. Il fournit un indice visuel clair indiquant que l’interaction affichera du contenu supplémentaire ou nécessitera l’attention de l’utilisateur.
• Fenêtre modale : Une fenêtre modale, également appelée dialogue, est une fenêtre temporaire qui apparaît par-dessus le contenu principal d'un site web. Elle est utilisée pour afficher des informations importantes, demander une saisie de l'utilisateur ou confirmer une action. Elle nécessite généralement que l'utilisateur interagisse avec elle avant de revenir au contenu principal.
• Ordre de tabulation : L'ordre de tabulation fait référence à la séquence dans laquelle les éléments reçoivent le focus lorsque l'utilisateur navigue à travers la page en utilisant la touche Tab. Pour les fenêtres modales, il est essentiel de gérer l'ordre de tabulation de manière à ce que les utilisateurs puissent facilement naviguer à travers les éléments interactifs de la modale dans un ordre logique. Cela garantit une navigation fluide et logique pour les utilisateurs, en particulier ceux utilisant le clavier ou des technologies d'assistance.

Répartition des composants

Bouton Modale

1. Une balise <button> est utilisée pour l'élément afin de garantir l'accessibilité aux utilisateurs naviguant avec un lecteur d'écran et un clavier.
2. Pour indiquer aux utilisateurs de lecteurs d'écran que le bouton déclenche une fenêtre modale, l'attribut aria-haspopup="dialog" est ajouté à la balise du bouton, clarifiant ainsi l'action lors de son activation.

Vue d'ensemble du code

Fenêtre modale native

Les fenêtres modales natives sont implémentées à l'aide de la balise <dialog> native en HTML, offrant plusieurs avantages par rapport aux fenêtres modales personnalisées. Mais quels sont ces avantages ?

1. Accessibilité : Les fenêtres modales natives respectent intrinsèquement les normes d'accessibilité, garantissant ainsi leur compatibilité avec les lecteurs d'écran et la navigation au clavier.
2. Simplicité d'implémentation : La balise <dialog> simplifie la création de fenêtres modales en HTML, nécessitant moins de code que les implémentations personnalisées qui dépendent généralement de JavaScript et CSS supplémentaires pour gérer la visibilité, les animations et les fonctionnalités d'accessibilité.
3. Ordre de tabulation : lorsqu’une balise <dialog> est utilisée, l’ordre de tabulation est géré automatiquement. Par défaut, display: none masque la modale et exclut tous les éléments qu’elle contient de la navigation au clavier jusqu’à son ouverture.
4. Design réactif : les fenêtres modales natives s’adaptent automatiquement aux différentes tailles d’écran et orientations, recalculant leur mise en page (reflow) pour rester lisibles et accessibles sur tous les appareils.
5. Support du clavier : Le fait de prendre en compte l'utilisation de la touche Escape pour fermer la fenêtre modale est déjà prévu avec la balise <dialog>, ce qui réduit la nécessité de manipulation JavaScript.
6. Gestion de la compatibilité des navigateurs : Les dialogues natifs sont directement supportés et maintenus par les navigateurs. Cela signifie qu’à mesure que les navigateurs sont mis à jour et évoluent, la balise <dialog> bénéficiera automatiquement de toutes les améliorations ou corrections de bugs, réduisant ainsi le besoin de mises à jour manuelles et de corrections de compatibilité.
7. Gestion du focus dans les modales : lorsque la fenêtre modale est ouverte, le focus doit rester limité à son contenu. Les éléments en dehors de la modale doivent être rendus inaccessibles à la navigation clavier et aux technologies d’assistance, par exemple en utilisant l’attribut inert. Cette gestion doit être assurée via JavaScript pour garantir une expérience accessible et cohérente.

Fenêtre modale personnalisée

Le développement d'une fenêtre modale entièrement personnalisée nécessite une utilisation accrue des attributs d'accessibilité et de la manipulation JavaScript.

1. L'attribut role="dialog" est essentiel, car il indique aux technologies d'assistance que le contenu qui vient d'apparaître au centre de l'écran de l'utilisateur est une boîte de dialogue. Cela aide les utilisateurs à comprendre que la boîte de dialogue est séparée du reste de la page et qu'elle nécessite leur attention.
2. La boîte de dialogue doit inclure un titre principal <h1> associé via l'attribut aria-labelledby à l'élément de dialogue, garantissant que les utilisateurs de lecteurs d'écran comprennent le but de la boîte de dialogue dès son apparition.
3. L'ajout de l'attribut aria-modal="true" garantit que la boîte de dialogue se comporte comme une fenêtre modale, nécessitant l'attention exclusive de l'utilisateur jusqu'à sa fermeture, ce qui améliore la navigation et l'interaction.
4. Lors de l'apparition de la boîte de dialogue, le focus doit être automatiquement déplacé vers le premier élément interactif de la fenêtre modale, facilitant ainsi une navigation fluide pour les utilisateurs.
5. Bouton de fermeture : un bouton comportant uniquement une icône doit inclure un attribut aria-label afin que sa fonction soit compréhensible pour les utilisateurs de technologies d’assistance.
6. Pour maintenir l'attention de l'utilisateur, lorsque la boîte de dialogue est fermée, le focus revient sur le bouton qui a ouvert la boîte de dialogue, garantissant ainsi que les utilisateurs ne soient pas confus par la navigation.
7. Pour maintenir un ordre logique de tabulation et exclure les éléments de la boîte de dialogue lorsqu'elle est fermée, la propriété CSS display: none; est appliquée, assurant une expérience utilisateur fluide lors de la navigation.
8. Effet d’arrière-plan : ajouter un effet transparent ou assombri à l’arrière-plan lorsque la boîte de dialogue apparaît (par exemple via le pseudo-élément CSS ::backdrop) améliore l’accessibilité. Cela réduit les distractions visuelles pour les utilisateurs ayant une vision réduite ou des troubles cognitifs, en mettant l’accent sur le contenu de la modale et en facilitant la concentration et la compréhension des actions à effectuer.
9. Permettre l'utilisation de la touche Escape pour fermer la boîte de dialogue profite aux utilisateurs de claviers. Cela offre un moyen simple et efficace de fermer la boîte de dialogue sans nécessiter d'interactions complexes avec la souris.
10. Le focus doit être restreint à l'intérieur de la boîte de dialogue lorsqu'elle est ouverte, garantissant que les utilisateurs ne peuvent pas naviguer vers des éléments extérieurs à la modale, empêchant ainsi le focus de se placer sur des éléments en arrière-plan de la boîte de dialogue.

Lecteur d'écran

1. aria-haspopup="dialog" : Cet attribut est utilisé pour indiquer qu'activer un élément déclenchera une boîte de dialogue ou une fenêtre contextuelle. Il aide les technologies d'assistance à comprendre la relation entre l'élément déclencheur et la boîte de dialogue.
2. role="dialog" : Cet attribut est utilisé pour définir un élément comme une boîte de dialogue ou une fenêtre modale. Il aide les technologies d'assistance à identifier et à traiter correctement la boîte de dialogue, garantissant ainsi que les utilisateurs comprennent sa fonction et la manière dont ils doivent interagir avec elle.
3. aria-modal : Cet attribut est utilisé pour spécifier si un élément est une boîte de dialogue modale. Cela indique aux lecteurs d’écran que la modale est active et que le reste de la page n’est pas pertinent tant qu’elle est ouverte.
4. inert : à appliquer dynamiquement aux éléments en dehors de la modale (par exemple sur <body>) pour bloquer le focus et l’interaction tant que la modale est ouverte.
5. aria-labelledby : Cet attribut est utilisé pour associer une boîte de dialogue à un élément qui sert de titre. Il aide les utilisateurs de technologies d'assistance à comprendre l'objectif de la boîte de dialogue.