Comprendre WAI-ARIA, un guide complet


<h2>Comment une page web est-elle construite ?</h2>

Le cheminement d'un navigateur partant d'un document source HTML pour finalement afficher une page stylée et interactive s'appelle le chemin critique du rendu (<i>critical rendering path</i>). Ce processus peut comporter de nombreuses étapes, comme je le montre dans [mon article sur le sujet](https://bitsofco.de/understanding-the-critical-rendering-path/), mais celles-ci peuvent être regroupées en deux grandes étapes. La première consiste en **l'analyse du document** par le navigateur pour déterminer ce qui sera finalement rendu sur la page, et la seconde est **le rendu** par le navigateur.

<figure role="group"><img src="/images/HTML-to-Render-Tree-to-Final-compressor.png" width="828" height="442" alt="la décomposition du processus en deux étapes"/></figure>

La première étape permet de construire l'arbre de rendu (<i>render tree</i>), une représentation sous forme d'arbre des **éléments HTML** qui seront rendus sur la page ainsi que leurs styles associés. Pour cela, le navigateur a besoin de deux choses&nbsp;:

1. le CSSOM, une représentation des styles associés aux éléments
2. le DOM, la représentation des éléments

<h2>Comment le DOM est créé, et à quoi il ressemble</h2>

Le DOM est une représentation du document HTML source. Comme nous le verrons plus loin, il comporte quelques différences, mais il s’agit pour l'essentiel d’une conversion de la structure et du contenu du document HTML en un modèle objet utilisable par divers programmes.

La structure d'objet du DOM est représentée par ce qu'on appelle une "arborescence de noeuds" (<i>node tree</i>). On l'appelle ainsi parce qu'il peut être considéré comme un arbre qui se ramifie en plusieurs branches enfants, chacune pouvant avoir des feuilles. Le premier parent est l'élément racine `<html>`, les "branches" enfants sont les **éléments** imbriqués et les "feuilles" sont le **contenu** des éléments.

Prenons par exemple ce document HTML&nbsp;:

```
<!doctype html>
<html lang="en">
 <head>
   <title>My first web page</title>
  </head>
 <body>
    <h1>Hello, world!</h1>
    <p>How are you?</p>
  </body>
</html>
```

Ce document peut être représenté comme une arborescence de noeuds&nbsp;:

<figure role="group"><img src="/images/node-tree-example-compressor.png" width="866" height="539" alt=""/></figure>
 
<h2>Ce que n'est pas le DOM</h2>

De l'exemple ci-dessus on pourrait conclure que le DOM est un mapping exact du document source HTML ou de ce que vous voyez dans votre DevTools. Cependant, il y a des différences. Pour bien comprendre ce qu'est le DOM, nous devons d'abord comprendre ce qu'il n'est **pas**.

<h3>Le DOM n'est pas votre HTML source</h3>

Bien que créé à partir du document source HTML, le DOM n'en est pas toujours l'exact reflet. Il peut en différer dans deux cas&nbsp;:

<h4>1. Lorsque le HTML n'est pas valide</h4>
    
Le DOM est une interface pour les documents HTML valides. Pendant le processus de création du DOM, le navigateur peut être amené à corriger des informations invalides.
    
Prenons ce document HTML par exemple :
    
```
<!doctype html>
<html>
Hello, world!
</html>
```

Il manque les éléments `<head>` et `<body>` à ce document, alors qu'ils sont requis dans un HTML valide. Si nous inspectons l'arborescence créée, nous pouvons constater que l'erreur a été corrigée&nbsp;:

<figure role="group"><img src="/images/corrected-html-compressor.png" width="866" height="285" alt=""/></figure>
    
<h4>2. Lorsque le DOM est modifié par JavaScript</h4>

En plus d'être une interface permettant de visualiser le contenu d'un document HTML, le DOM peut être modifié, ce qui en fait une ressource vivante.

Nous pouvons par exemple créer des noeuds supplémentaires via JavaScript.

```
var newParagraph = document.createElement("p");
var paragraphContent = document.createTextNode("I'm new!");
newParagraph.appendChild(paragraphContent);
document.body.appendChild(newParagraph);
```

Le DOM sera mis à jour, mais bien entendu notre document source HTML restera inchangé.

<h3>Le DOM n'est pas ce que vous voyez dans le navigateur</h3>

Ce que vous voyez dans le viewport de votre navigateur c'est l'arbre de rendu qui, nous l'avons vu, est un mélange de DOM et de CSSOM. Ce qui distingue le DOM de l'arbre de rendu c'est que ce dernier ne comprend que ce qui sera "peint" à l'écran. De ce fait, il exclut les éléments visuellement cachés, par exemple ceux stylés `display: none`.

```
<!doctype html>
<html lang="en">
  <head></head>
  <body>
    <h1>Hello, world!</h1>
    <p style="display: none;">How are you?</p>
  </body>
</html>
```

Le DOM comprendra l'élément`<p>`:

<figure role="group"><img src="/images/dom-with-p-compressor.png" width="866" height="418" alt=""/></figure>

Cependant l'arbre de rendu —&nbsp;et donc ce qui est visible dans le viewport&nbsp;— ne comprendra pas cet élément.

<figure role="group"><img src="/images/rendertree-without-p-compressor.png" width="866" height="244" alt=""/></figure>

<h3>Le DOM n'est pas ce que vous voyez dans DevTools</h3>

Cette différence ne tient pas à grand chose car l'inspecteur d'éléments DevTools offre la meilleure approximation du DOM disponible dans le navigateur. Toutefois DevTools inclut des informations qui ne sont pas dans le DOM.

Le meilleur exemple en est [les pseudo-éléments CSS](/articles/les-pseudo-elements-css-before-et-after/) créées via les sélecteurs `::before` et `::after`. Ils font partie du CSSOM et de l'arbre de rendu mais techniquement ils n'appartiennent pas au DOM puisque celui-ci est construit à partir du seul document source HTML, qui ne comprend pas les styles appliqués aux éléments.

Bien que ne faisant pas partie du DOM, les pseudo-éléments apparaissent dans notre inspecteur DevTools&nbsp;:

<figure role="group"><img src="/images/Pseudo-element-in-devtools-inspector.png" width="1522" height="580" alt=""/></figure>
    
C'est la raison pour laquelle les pseudo-éléments ne peuvent pas être ciblés par JavaScript, parce qu'ils ne font pas partie du DOM&nbsp;!
    
<h2>On récapitule</h2>

Le DOM est une interface vers un document HTML. Il est utilisé par les navigateurs dans une première étape pour déterminer ce qui peut être rendu à l'écran, et par JavaScript pour modifier le contenu, la structure ou le style de la page.

Bien que similaire à d'autres formes de documents source HTML, il en diffère en plusieurs points&nbsp;:

- son HTML est toujours valide
- c'est un modèle vivant qui peut être modifié par JavaScript
- il ne comprend pas de pseudo-éléments (p.ex. `::after`)
- il ne comprend pas d'élémens cachés (p.ex. via `display: none`)
