L’arbre d’accessibilité : ce qu’entendent les lecteurs d’écran
Découvrez comment le navigateur construit un arbre parallèle à partir de votre DOM.
L’arbre d’accessibilité : ce qu’entendent les lecteurs d’écran 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.
Un arbre parallèle
Le navigateur transforme votre DOM en une seconde structure appelée arbre d’accessibilité. C’est la version que les technologies d’assistance lisent réellement.
Construit à partir de votre DOM
L’arbre d’accessibilité est construit directement à partir de votre HTML. Une bonne sémantique produit un arbre riche ; une soupe de div produit un arbre vide et inutile.
Les nœuds ont un rôle
Chaque nœud porte un rôle qui indique ce qu’il est : bouton, en-tête, lien, liste. Un véritable bouton reçoit le rôle de bouton sans aucun effort de votre part.
Les nœuds ont un nom
Chaque nœud possède également un nom accessible, c’est-à-dire le texte prononcé par un lecteur d’écran. Pour un bouton, il s’agit généralement de l’étiquette visible qu’il contient.
<button>Save changes</button>Les nœuds ont un état
Les nœuds interactifs exposent également un état, par exemple coché, développé ou désactivé. C’est ainsi qu’un utilisateur apprend qu’une case est déjà cochée.
Rôle, nom, état, valeur
Chaque nœud se résume donc à un rôle, un nom, un état et une valeur. Ce petit ensemble contient tout ce dont un lecteur d’écran a besoin pour annoncer un élément.
Les éléments masqués disparaissent
Tout élément masqué avec display none ou aria-hidden est supprimé de l’arbre. S’il n’y figure pas, un lecteur d’écran ne peut pas l’atteindre.
<span aria-hidden="true">decorative</span>Les pixels ne font pas partie de l’arbre
Les styles visuels comme la couleur et la taille n’entrent jamais dans l’arbre d’accessibilité. Un utilisateur de lecteur d’écran reçoit le sens et la structure, pas votre mise en page.
Mauvais balisage, arbre défaillant
Un div cliquable apparaît dans l’arbre comme un nœud générique sans rôle ni nom. L’utilisateur n’entend rien d’utile, même si l’élément ressemble à un bouton.
Vous pouvez l’inspecter
Les DevTools du navigateur affichent l’arbre d’accessibilité actif de n’importe quel élément. C’est le moyen le plus rapide de vérifier ce qu’un lecteur d’écran annoncera réellement.
Le balisage est la source
La grande leçon est la suivante : votre balisage est la source de l’arbre. Corrigez le HTML et l’arbre se corrige de lui-même, sans correctif supplémentaire.
Vérification rapide
Voyons ce que les lecteurs d’écran entendent.
Récapitulatif
L’arbre d’accessibilité est votre DOM réduit à un rôle, un nom, un état et une valeur. Corrigez le balisage et l’arbre suivra. Les éléments masqués disparaissent. 🎉
Questions Fréquemment Posées
La leçon « L’arbre d’accessibilité : ce qu’entendent les lecteurs d’écran » est-elle gratuite ?
Oui — le texte complet de « L’arbre d’accessibilité : ce qu’entendent les lecteurs d’écran » 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 « L’arbre d’accessibilité : ce qu’entendent les lecteurs d’écran » ?
Découvrez comment le navigateur construit un arbre parallèle à partir de votre DOM. 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 « L’arbre d’accessibilité : ce qu’entendent les lecteurs d’écran » ?
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
- Les balises ont un sens : pourquoi la soupe de div échoue
- Éléments textuels : paragraphes, listes et emphase
- L’arbre d’accessibilité : ce qu’entendent les lecteurs d’écran
- Natif ou personnalisé : quand choisir un véritable élément