Arbre d’accessibilité d’une page

Ce que contient l’arbre d’accessibilité

Un lecteur d’écran ne lit pas le HTML. Le navigateur construit la page (le DOM), en tire un arbre d’objets qui décrit l’interface, puis le système d’exploitation le transmet au lecteur d’écran par son API d’accessibilité. La spécification WAI-ARIA 1.2 appelle cet arbre l’« accessibility tree » : chaque nœud y représente un élément de l’interface tel que l’API l’expose.

Chaque nœud porte un rôle (lien, bouton, titre, case à cocher, repère de navigation), qui dit ce qu’est l’élément et ce qu’on peut en faire. Il porte aussi un nom : le texte d’un lien, l’étiquette d’un champ, l’alternative d’une image. Parfois une valeur, pour un champ ou une liste déroulante, et des états : coché, replié ou déplié, désactivé, obligatoire, invalide.

Le calcul du nom suit la spécification Accessible Name and Description Computation. Pour un lien, le glossaire du RGAA en reprend l’ordre : d’abord aria-labelledby, puis aria-label, puis le contenu du lien, puis l’attribut title.

Les rôles sont affichés en français, suivis du nom que leur donne Chromium (heading, link, StaticText…), celui que vous retrouverez dans les outils de développement.

Ce que le RGAA vérifie dans cet arbre

Plusieurs critères du RGAA 4.1.2 reviennent à vérifier qu’un élément a un nom, ou que son rôle et ses états sont transmis :

• critère 6.2 : chaque lien a un intitulé, du texte ou une alternative d’image ;
• critère 11.1 : chaque champ de formulaire a une étiquette (label, aria-label, aria-labelledby, title ou bouton adjacent) ;
• critère 1.1 : chaque image porteuse d’information a une alternative textuelle. L’outil montre chaque image avec son alternative et signale celles qui n’ont pas de nom ;
• critère 7.1 : un composant généré ou contrôlé par JavaScript transmet son nom, son rôle, sa valeur et ses changements d’états aux technologies d’assistance par une API d’accessibilité (test 7.1.1). Son nom doit être pertinent et contenir au moins l’intitulé visible, son rôle doit être pertinent (test 7.1.3).

Le critère 7.1 renvoie notamment au critère de succès 4.1.2 Name, Role, Value des WCAG 2.1. Le glossaire du RGAA, à l’entrée « Le nom, le rôle, la valeur, le paramétrage et les changements d’états », donne l’exemple d’aria-expanded, l’état qui signale qu’un composant est ouvert ou fermé.

Ce qu’il faut y chercher

• Un élément marqué « sans nom ». Un bouton fait d’une seule icône, un lien autour d’une image sans alt, un champ sans label : le rôle est là, rien ne dit à quoi sert l’élément. La tuile « Sans nom » du résumé ne garde qu’eux dans l’arbre, avec les éléments qui les contiennent.
• Un point « à vérifier ». Un titre qui saute un niveau, un lien ou un bouton nommé « En savoir plus », deux navigations sans nom pour les distinguer : rien n’est faux à coup sûr, mais la page se parcourt moins bien à l’écoute. La carte des repères montre les grandes zones de la page, leurs titres et ce qui n’est dans aucune zone.
• Un élément cliquable qui apparaît comme texte ou conteneur. Un div ou un span qui réagit au clic, sans rôle de bouton ni de lien, n’est pas présenté comme interactif.
• Un bouton d’ouverture sans état. Un bouton qui ouvre un menu ou un panneau devrait porter « replié » ou « déplié ». Comme l’arbre est relevé au chargement, vous voyez l’état fermé ; vérifiez dans votre navigateur qu’il change à l’ouverture.
• Un nom qui ne reprend pas le texte affiché. Un bouton qui affiche « Rechercher » et se nomme « Lancer » contredit le test 7.1.3 du RGAA et le critère de succès 2.5.3 Label in Name des WCAG : une personne qui commande sa machine à la voix prononce ce qu’elle voit.

Un relevé, pas une simulation

Un lecteur d’écran reçoit cet arbre, puis décide quoi en dire, dans quel ordre et avec quelle verbosité. NVDA, JAWS, VoiceOver et TalkBack ne formulent pas la même chose, et chacun se règle. Reproduire leur voix reviendrait à inventer une restitution. L’outil montre ce qui est réellement transmis : c’est à ce niveau que se trouvent la plupart des défauts, un nom absent ou un rôle manquant.

L’arbre dépend aussi du navigateur. Il est relevé ici dans Chromium, alors que sur ordinateur l’environnement de test du RGAA associe NVDA ou JAWS à Firefox, et VoiceOver à Safari ; sur Android, il associe TalkBack à Chrome. Le calcul des noms est normalisé, mais deux navigateurs peuvent encore exposer un élément différemment. Pour trancher un critère, la méthode demande de tester dans cet environnement.

Comment l’outil relève l’arbre

Notre serveur ouvre la page dans Chromium, dans une fenêtre de 1 280 × 800 pixels, attend que le HTML soit analysé (DOMContentLoaded), puis demande l’arbre par la fonction snapshot de Puppeteer. Cette fonction ne garde que les repères, les éléments interactifs ou qui reçoivent le focus, et les textes, titres ou images qui ont un nom ; le moteur y ajoute les images sans nom. Le reste disparaît (listes, tableaux, paragraphes, conteneurs, titres vides) et ce qu’il contenait remonte au parent. Le contenu des cadres (iframe) est relevé sous le cadre qui le contient ; un cadre pas encore chargé au moment du relevé reste vide.

Le moteur ajoute deux simplifications. Sous un élément nommé par son contenu (lien, bouton, titre, onglet, option), le texte qui répète ce nom en entier n’est pas recopié en dessous. Sous la page, une région ou un formulaire, les textes restent, même quand ils reprennent leur nom. Un nom de plus de 300 caractères est coupé, ce que marque « … ». Chromium donne enfin parfois un nom par défaut : un bouton image sans alt s’appelle « Envoyer ».

Le relevé s’arrête à 3 000 éléments. Dans la page, la vue en arbre ne construit d’abord qu’environ 150 lignes, en largeur, et construit les branches suivantes quand vous les dépliez ; une vue filtrée ne garde que les éléments choisis et leurs parents. La page reste ainsi utilisable sur un long article ou une boutique.

Sources

RGAA 4.1.2, critère 1.1 (alternative textuelle des images) ; RGAA 4.1.2, critère 6.2 (intitulé des liens) ; RGAA 4.1.2, critère 7.1 (scripts compatibles avec les technologies d’assistance) ; RGAA 4.1.2, critère 11.1 (étiquette des champs de formulaire) ; RGAA 4.1.2, glossaire : Le nom, le rôle, la valeur, le paramétrage et les changements d’états ; WCAG 2.1, critère de succès 4.1.2 Name, Role, Value, en anglais ; WCAG 2.1, critère de succès 2.5.3 Label in Name, en anglais ; WAI-ARIA 1.2, définition de l’arbre d’accessibilité, en anglais ; HTML Accessibility API Mappings : img avec alt vide, en anglais .

Page mise à jour le 13 novembre 2026.