Accessibility Tree

HTML / CSS 🟡 Mid

Definition

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.
#core#accessibility