Portails, piège de focus et fermeture avec Échap
Rendez les modales via des portails, piègez le focus pour les utilisateurs au clavier et fermez-les avec Échap ou via l’arrière-plan pour une base solide en accessibilité.
Portails, piège de focus et fermeture avec Échap est une leçon React Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 3. 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 React Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours React Academy comprend 3 leçons au total.
Pourquoi les portails et les pièges de focalisation ?
Objectif : créez des fenêtres modales accessibles à tous.
- Portail vers le corps de la page
- Le piège de focalisation garde la tabulation à l’intérieur
- Échap/arrière-plan pour fermer
Principes essentiels d’accessibilité
- Utilisez role="dialog" et aria-modal="true"
- Placez la focalisation sur le premier élément interactif à l’ouverture
- Restaurez la focalisation sur le déclencheur à la fermeture
Démonstration : fenêtre modale avec portail (ouverture et fermeture)
Rendez la boîte de dialogue via un portail afin qu’elle soit placée au-dessus de tout le reste.
<div id="root"></div>Démonstration : principes essentiels du piège de focalisation
Placez automatiquement la focalisation sur le premier bouton et confinez la touche Tabulation à l’intérieur de la boîte de dialogue.
<div id="root"></div>Démonstration : méthodes de fermeture et restauration de la focalisation
Fermez avec Échap ou l’arrière-plan, puis restaurez la focalisation sur le bouton déclencheur.
<div id="root"></div>Conseils et liste de vérification
- Ajoutez role="dialog" et aria-modal="true"
- Placez la focalisation sur le premier contrôle à l’ouverture ; restaurez la focalisation sur le déclencheur à la fermeture
- Gérez Échap et le clic sur l’arrière-plan
Vérification de l’accessibilité des fenêtres modales
Récapitulatif
Récapitulatif : rendez les fenêtres modales via un portail, gardez la focalisation à l’intérieur et permettez leur fermeture avec Échap ou l’arrière-plan, tout en restaurant la focalisation sur le déclencheur.
Questions Fréquemment Posées
La leçon « Portails, piège de focus et fermeture avec Échap » est-elle gratuite ?
Oui — le texte complet de « Portails, piège de focus et fermeture avec Échap » 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 React Academy, passe à CoddyKit PRO. Le cours React Academy comprend 3 leçons au total.
Qu'est-ce que j'apprendrai dans « Portails, piège de focus et fermeture avec Échap » ?
Rendez les modales via des portails, piègez le focus pour les utilisateurs au clavier et fermez-les avec Échap ou via l’arrière-plan pour une base solide en accessibilité. Tu pratiques React 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 React Academy ?
Aucune expérience préalable n'est requise. React 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 1 sur 3.
Combien de temps prend la leçon « Portails, piège de focus et fermeture avec Échap » ?
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 React Academy ?
Oui. Chaque leçon React 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
- Portails, piège de focus et fermeture avec Échap
- Gestionnaire global des superpositions (contexte et réducteur)
- Annonces pour l’accessibilité (aria-live)