Échap pour fermer et rendre le focus
Offrez une sortie fiable qui ramène l'utilisateur à son point de départ.
Échap pour fermer et rendre le focus est une leçon Web Accessibility Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Web Accessibility Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Web Accessibility Academy comprend 4 leçons au total.
Toute fenêtre modale a besoin d’une sortie
Une fenêtre modale dont on ne peut pas sortir est un piège. Les utilisateurs s’attendent à un moyen rapide et fiable de la fermer sans devoir chercher un minuscule bouton.
Échap est la touche universelle
La touche Échap est le raccourci convenu pour fermer une boîte de dialogue. Les utilisateurs du clavier et des lecteurs d’écran l’essaient en premier : prenez-la donc toujours en charge.
La boîte de dialogue native gère Échap
Une boîte de dialogue native dialog ouverte avec showModal() se ferme automatiquement avec Échap et déclenche un événement d’annulation que vous pouvez écouter si nécessaire.
dialog.addEventListener('cancel', onClose);Gérez vous-même Échap
Pour une fenêtre modale personnalisée, écoutez l’événement keydown et fermez-la lorsque la touche est Échap. Cela ne demande que quelques lignes, mais ne l’omettez jamais.
if (e.key === 'Escape') closeModal();Souvenez-vous de l’emplacement du focus
Avant d’ouvrir la fenêtre modale, enregistrez l’élément qui avait le focus. document.activeElement est le déclencheur vers lequel vous reviendrez plus tard.
const opener = document.activeElement;Restaurez le focus à la fermeture
Lorsque la fenêtre modale se ferme, renvoyez le focus vers le déclencheur enregistré. Cette étape de restauration du focus rend la fermeture naturelle.
closeModal();
opener.focus();Pourquoi la restauration est importante
Sans restauration, le focus revient en haut de la page. L’utilisateur perd son emplacement et doit parcourir toute la page avec Tab pour y retourner. C’est frustrant et évitable. 😕
Ajoutez aussi un bouton de fermeture visible
Échap ne suffit pas à lui seul. Proposez un bouton de fermeture clairement étiqueté afin que les utilisateurs de la souris et des appareils tactiles disposent eux aussi d’une sortie évidente.
<button aria-label="Close dialog">×</button>Cliquer sur l’arrière-plan
De nombreuses fenêtres modales se ferment également lorsque vous cliquez sur l’arrière-plan assombri. C’est un complément pratique, mais il ne doit jamais remplacer Échap ou le bouton.
Soyez prudent avec les actions destructrices
Pour les boîtes de dialogue qui confirment une action risquée, vous pouvez empêcher la fermeture rapide afin qu’un Échap accidentel ne fasse pas ignorer un choix important.
Testez le parcours complet
Ouvrez avec le clavier, appuyez sur Échap et vérifiez que le focus revient exactement sur le déclencheur de départ. C’est l’objectif de ce parcours complet. ✅
Vérification rapide
Un utilisateur ouvre une fenêtre modale depuis un bouton et appuie sur Échap. Où le focus doit-il se placer ?
Récapitulatif : fermez proprement
Vous avez appris à prendre en charge Échap, à proposer un bouton de fermeture visible et à restaurer le focus sur le déclencheur afin que la fermeture ne laisse jamais l’utilisateur sans repère. 🎯
Apprends HTML avec un tuteur IA — gratuit
Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.
- Cours
- 30
- Leçons
- 120
Questions Fréquemment Posées
La leçon « Échap pour fermer et rendre le focus » est-elle gratuite ?
Oui — le texte complet de « Échap pour fermer et rendre le focus » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Web Accessibility Academy, passe à CoddyKit PRO. Le cours Web Accessibility Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Échap pour fermer et rendre le focus » ?
Offrez une sortie fiable qui ramène l'utilisateur à son point de départ. Tu pratiques Web Accessibility Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Web Accessibility Academy ?
Aucune expérience préalable n'est requise. Web Accessibility Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.
Combien de temps prend la leçon « Échap pour fermer et rendre le focus » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Web Accessibility Academy ?
Oui. Chaque leçon Web Accessibility Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Rôles des boîtes de dialogue et élément dialog natif
- Piéger le focus dans la fenêtre modale
- Échap pour fermer et rendre le focus
- Arrière-plan inerte et aria-modal