L'arbre d'accessibilité

Tout navigateur construit une seconde représentation de la page qu’il affiche : un arbre de rôles et de noms, destiné aux technologies d’assistance. Un lecteur d’écran s’en sert pour dire « bouton, Se connecter » plutôt que de décrire des pixels.

Ce n’est pas une invention de Diwall. L’arbre est déjà là, dans chaque page que vous avez jamais ouverte, et il se trouve être exactement ce dont un modèle de langage a besoin.

À quoi il ressemble

diwall-shot --url http://localhost:8765/demo_som_en.html --a11y --mode fast \
  --guide-version 1.3

- banner:
  - strong: Admin panel
  - navigation:
    - link "Dashboard":
      - /url: "#a"
    - link "Sites":
      - /url: "#b"
- main:
  - heading "Sign in" [level=2]
  - textbox "User name":
    - /placeholder: operator
  - textbox "Password":
    - /placeholder: ••••••••
  - combobox "Environment":
    - option "production" [selected]
    - option "staging"
  - button "Sign in"
  - button "Cancel"

Lancé sur la page de test livrée avec Diwall : 1 099 ms, sans aucune capture. --mode fast renvoie l’arbre et rien d’autre — pas de PNG, pas d’analyse d’image.

Ce qu’il porte et qu’une image ne porte pas

Regardez ce que cet extrait dit en toutes lettres, et qu’aucune capture ne pourrait dire :

Les rôles. button, textbox, combobox, heading [level=2]. Pas « un rectangle aux coins arrondis » — ce que l’élément est.

Les destinations. link "Dashboard" suivi de /url: "#a". Où il mène, avant de cliquer.

Les états. option "production" [selected]. Quel choix est actif en ce moment.

La structure. Ce qui appartient au bandeau, ce qui appartient au contenu principal, ce qui s’imbrique dans quoi. Une image écrase tout cela sur un seul plan.

Une capture vous montre à quoi une page ressemble. L’arbre vous dit ce qu’elle est.

Souvent, il suffit à lui seul

Quatre pages, trois requêtes, le mot-clé trouvé avec son contexte — et aucun modèle de vision appelé à aucun moment.

C’était un exercice réel : trouver un mot-clé sur un site public sans savoir quelle page le contient. --a11y seulement. Le mot est apparu dans un <strong>, et l’arbre a donné le contexte autour.

L’arbre se suffit à lui-même pour toute une catégorie de travaux :

• chercher un texte ou une balise
• naviguer par les liens, puisque chaque href y figure
• vérifier qu’un élément est présent
• découvrir comment une page est organisée

Un modèle de vision ne devient nécessaire que lorsque la cible n’a aucune représentation sémantique accessible — une image cliquable, une zone graphique, un canevas. C’est une vraie catégorie, et elle est plus petite qu’on ne le croit.

Pourquoi cela dépasse Diwall

Une page dotée d’un arbre d’accessibilité bien construit est lisible par un lecteur d’écran, par un moteur de recherche et par un agent — le même arbre sert les trois. Une page qui peint ses boutons avec des <div> et les habille pour qu’ils aient l’air cliquables est opaque pour les trois à la fois.

L’arbre n’est pas une fonction d’accessibilité qui aiderait les machines par hasard. C’est la structure de la page, rendue explicite. Celui qui écrit la page décide si cette structure existe.

Voir la même page de trois façons →

En bref

• Le navigateur construit cet arbre pour chaque page, à l’intention des technologies d’assistance.
• Il porte les rôles, les destinations, les états et la structure — une image n’en porte aucun.
• --a11y --mode fast le renvoie sans capture, en une seconde environ.
• Ne recourez à un modèle de vision que lorsqu’il n’y a rien de sémantique à lire.