Accessibility Tree
HTML / CSS 🟡 MidDefinition
Représentation parallèle au DOM que le navigateur construit pour les technologies d'assistance. Chaque noeud contient un rôle, un nom, un état et une valeur accessibles.
Analogie
Comme le plan d'évacuation d'un bâtiment : une vue simplifiée qui ne montre que les infos essentielles pour naviguer.
Exemple de code
<!-- Le navigateur crée un noeud accessible : -->
<!-- Role: button, Name: 'Envoyer', State: enabled -->
<button aria-label="Envoyer le formulaire">
<svg>...</svg>
</button>
Cas d'usage
Pour comprendre et déboguer ce que les lecteurs d'écran communiquent réellement aux utilisateurs.
Anti-pattern
Ne jamais inspecter l'arbre d'accessibilité dans DevTools et supposer que le rendu visuel suffit.