Jour 61 - L'arbre d'accessibilité
Comment est généré l’arbre d’accessibilité d’une page web ?
Ce que j’ai fait :
- lire l’article Le chemin critique du rendu et les attributs HTML async et defer(lien externe) de Pierre Giraud
- lire l’article Le DOM, c’est quoi exactement ?(lien externe) de Ire Aderinokun
- lire la notice Arbre d’accessibilité(lien externe) de Mozilla
- regarder la vidéo The Accessibility Tree(lien externe) de Udacity
Ce que j’ai appris
Avant de s’intéresser plus en détails à l’arbre d’accessibilité, il est essentiel de comprendre comment est généré une page web et comment est construit le DOM (Document Object Model), sur lequel est basé l’arbre d’accessibilité.
Le chemin critique du rendu
Une page web, construite à partir d’un fichier source HTML, est affichée sur un navigateur en plusieurs étapes que l’on appelle “chemin critique du rendu” :
- Construction du DOM : il s’agit d’une représentation des éléments
- Construction du CSSOM (CSS Object Model) : il s’agit d’une représentation des styles associés aux éléments
- Exécution du code Javascript
- Création de l’arbre de rendu : il s’agit d’une combinaison du DOM et du CSSOM, il représente ce qui va être affiché sur la page.
- Génération de la mise en page : il s’agit de déterminer la taille de la fenêtre active (ou viewport) pour pouvoir appliquer les styles CSS en conséquence
- Conversion du contenu visible final de la page en pixels
Au terme de ces 6 étapes, le fichier source HTML initial est affiché dans le navigateur.
Le DOM
Le DOM, traduit par modèle objet de document, est donc une représentation du code HTML source. Il permet au développeur d’accéder, de modifier, d’ajouter ou de supprimer les données d’un document HTML. Autrement dit, le DOM permet de convertir le document HTML en un modèle objet manipulable par différents programmes ou langages (comme le Javascript).
La structure du DOM est représentée sous la forme d’un arbre ou node tree, qui signifie “arborescence de noeuds”. On l’appelle ainsi car il ressemble à un arbre se ramifiant en plusieurs branches :
- le premier parent est l’élément racine
<html> - les branches sont les éléments imbriqués
- les feuilles sont le contenu des éléments
Le DOM n’est pas nécessairement une représentation exacte du code source HTML :
-
si le code HTML n’est pas valide : le navigateur peut être amené à corriger les éléments invalides lors de la construction du DOM. Par exemple : ajouter une balise
<body>manquante dans le code source. -
si le DOM est modifié par du Javascript : il est possible d’ajouter des éléments supplémentaires en Javascript. Le DOM sera bien mis à jour mais pour autant le document HTML source restera inchangé.
Le DOM n’est pas la page qui s’affiche dans le navigateur. Ce qui s’affiche dans le navigateur, c’est l’arbre de rendu, c’est à dire la combinaison du DOM et du CSSOM. L’arbre de rendu ne comprend que ce qui sera visible à l’écran, il exclut donc les éléments visuellement cachés, par exemple ceux stylés avec la propriété display: none;.
Le DOM n’est pas exactement le code affiché dans l’inspecteur d’éléments DevTools. L’inspecteur d’éléments inclue des informations supplémentaires qui ne sont pas présentes dans le DOM. C’est le cas par exemple des pseudo-éléments CSS ::before et ::after. Ils font bien partie du CSSOM et de l’arbre de rendu, mais pas du DOM, pourtant nous pouvons les voir dans l’inspecteur DevTools. Pour autant, le rendu de l’inspecteur d’éléments est ce qui se rapproche le plus du DOM.
L’arbre d’accessibilité
Les navigateurs créent également un arbre d’accessibilité basé sur le DOM. L’arbre d’accessibilité ressemble un peu à l’arbre du DOM, mais il contient un nombre plus restreint d’éléments ainsi que des informations légèrement différentes à leur sujet. Ces éléments et ces informations sont destinés à être utilisés par les technologies d’assistance, telles que les lecteurs d’écran, pour restituer le contenu d’une page à l’internaute.
Un objet de l’arbre d’accessibilité contient 4 éléments :
-
un nom (a name), pour faire référence à l’objet en question
-
une description (a description), pour décrire un objet et apporter des informations en plus de son nom
-
un rôle (a role), pour expliquer à quoi sert l’objet
-
un état (a state), par exemple coché/décoché pour les checkboxes