Rendre le focus après la fermeture d'une couche
Ramenez l'utilisateur à l'endroit où il s'était arrêté.
Rendre le focus après la fermeture d'une couche 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.
Certaines parties de cette leçon n'ont pas encore été traduites et s'affichent en anglais.
Layers Borrow Focus
When a modal, menu, or drawer opens, focus moves inside it. When it closes, you are responsible for returning focus to where the user was.
The Lost-Focus Problem
If a closed layer leaves focus on a removed element, it falls back to the page body. The user is stranded with no sense of place.
Remember the Trigger
The fix starts before opening: save a reference to the element that triggered the layer, usually document.activeElement.
const trigger = document.activeElement;Restore on Close
When the layer closes, call focus() on that saved trigger so the user lands right back where they started.
trigger.focus();The Full Round Trip
Open: store the trigger and focus the layer. Close: hide it and restore the trigger. That loop is the focus contract of any dismissible layer. 🔁
Native dialog Helps
The browser's dialog element restores focus to the opener automatically when you call close(), saving you the manual bookkeeping.
myDialog.close();Handle Every Exit Path
Restore focus no matter how the layer closes: a Close button, the Escape key, or a click on the backdrop should all return the user.
When the Trigger Is Gone
If the trigger was removed while the layer was open, send focus to a sensible nearby element instead, never to nowhere.
Why This Matters So Much
Sighted mouse users barely notice, but for keyboard and screen reader users a missed focus return can make a feature unusable.
Test It Keyboard-Only
Open the layer with Enter, close it with Escape, and confirm the focus ring reappears on the button that opened it.
Make It a Habit
Treat focus return as part of building any overlay, not an afterthought. Wire it the moment you add open and close logic.
Quick Check
A custom modal closes. What is the correct destination for focus?
Recap
You can now close the loop: save the trigger on open, restore focus to it on every close path, and lean on native dialog when you can. 🎯
Questions Fréquemment Posées
La leçon « Rendre le focus après la fermeture d'une couche » est-elle gratuite ?
Oui — le texte complet de « Rendre le focus après la fermeture d'une couche » 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 « Rendre le focus après la fermeture d'une couche » ?
Ramenez l'utilisateur à l'endroit où il s'était arrêté. 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 « Rendre le focus après la fermeture d'une couche » ?
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
- tabindex 0, -1 et jamais positif
- Déplacer le focus après une action
- Rendre le focus après la fermeture d'une couche
- Gérer le tabindex itinérant dans les composants