Annonces pour l’accessibilité (aria-live)
Utilisez des régions aria-live pour annoncer les changements sans voler le focus. Choisissez entre une annonce polie et assertive, définissez aria-atomic et centralisez les annonces.
Annonces pour l’accessibilité (aria-live) est une leçon React Academy gratuite sur CoddyKit. Ceci est la leçon 3 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 utiliser les annonces ?
Objectif : annoncer les changements aux lecteurs d’écran sans voler le focus.
- aria-live : mode poli ou assertif
- role="status" / role="alert"
- aria-atomic pour des messages complets
Mode poli ou assertif
- Poli : annoncez bientôt ; n’interrompez pas
- Assertif : urgent ; peut interrompre
- Atomique : lisez tout le nœud lorsqu’il change
- Préférez status pour les informations de réussite ; alert pour les erreurs
Démonstration : région status polie
Une région status annonce les mises à jour de texte sans déplacer le focus.
<div id="root"></div>Démonstration : crochet useAnnounce (poli)
Centralisez les annonces avec un petit contexte et crochet Announcer.
<div id="root"></div>Démonstration : alerte d’erreur assertive
Utilisez le mode assertif (ou role="alert") avec parcimonie pour les erreurs qui nécessitent une attention immédiate.
<div id="root"></div>Conseils et liste de contrôle
- Préférez le mode poli (role=status) pour les réussites et les informations
- Utilisez alert/assertif pour les erreurs urgentes
- Définissez aria-atomic="true" pour les messages complets
- Ne déplacez pas le focus, sauf si nécessaire
Vérification des bases des annonces
Récapitulatif
Récapitulatif : ajoutez une région centrale aria-live (polie) pour les mises à jour courantes ; utilisez le mode assertif ou alert pour les erreurs urgentes. Gardez les messages atomiques et évitez de voler le focus.
Questions Fréquemment Posées
La leçon « Annonces pour l’accessibilité (aria-live) » est-elle gratuite ?
Oui — le texte complet de « Annonces pour l’accessibilité (aria-live) » 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 « Annonces pour l’accessibilité (aria-live) » ?
Utilisez des régions aria-live pour annoncer les changements sans voler le focus. Choisissez entre une annonce polie et assertive, définissez aria-atomic et centralisez les annonces. 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 3 sur 3.
Combien de temps prend la leçon « Annonces pour l’accessibilité (aria-live) » ?
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)