treeitem

Quand l’utiliser

À l’intérieur d’un role="tree", pour chaque nœud visible. Si le nœud a des enfants, définir aria-expanded="true" ou "false" et contenir ou posséder un role="group" regroupant les treeitems enfants. Si le nœud n’a pas d’enfants, omettre entièrement aria-expanded (ne PAS le définir à "false" sur une feuille — cela annonce « réduit » sans rien à développer).

Définir aria-level (profondeur indexée à 1), aria-posinset (position parmi les nœuds de même niveau, indexée à 1) et aria-setsize (total des nœuds de même niveau) sur chaque treeitem lorsque l’imbrication visuelle ne peut pas être déduite de la hiérarchie DOM.

Pour une navigation qui n’est en réalité qu’« une liste de liens avec des sous-liens imbriqués », <nav> avec des <ul> imbriqués et des <a> est le meilleur choix. Utiliser treeview uniquement lorsque l’expérience est un navigateur hiérarchique à arrêt unique.

Contrat clavier + focus

Conformément au modèle APG treeview :

• Tab déplace le focus dans l’arborescence, vers le treeitem courant ; Tab permet d’en sortir.
• Les flèches Haut/Bas déplacent le focus entre les nœuds visibles (en ignorant les enfants réduits).
• Flèche Droite : si le nœud est réduit, le développer ; si développé, aller au premier enfant.
• Flèche Gauche : si le nœud est développé, le réduire ; si réduit, aller au parent.
• Début / Fin se déplacent vers le premier / dernier nœud visible.
• Entrée ou Espace active (sélectionne) l’élément courant.
• Saisie anticipée : taper une lettre déplace le focus vers le prochain nœud visible correspondant.

Erreurs courantes

• aria-expanded="false" sur un nœud feuille — annonce un état réductible fantôme.
• Chaque treeitem a tabindex="0". Le modèle impose un seul arrêt de tabulation ; seul l’élément actif porte tabindex="0".
• La flèche Droite/Gauche utilisée pour « nœud suivant / nœud précédent » plutôt que développer/réduire.
• Treeitems enfants placés directement dans le <li> parent sans conteneur role="group". Les lecteurs d’écran ne peuvent pas annoncer le groupe comme une unité.
• aria-level manquant lorsque le DOM est plat (quand l’arborescence est rendue avec un positionnement absolu, par exemple).

Exemple

<ul role="tree" aria-label="Files">
  <li role="treeitem" aria-expanded="true" tabindex="0">
    Documents
    <ul role="group">
      <li role="treeitem" tabindex="-1">Resume.pdf</li>
      <li role="treeitem" aria-expanded="false" tabindex="-1">
        Photos
        <ul role="group">
          <li role="treeitem" tabindex="-1">2025-summer.jpg</li>
        </ul>
      </li>
    </ul>
  </li>
  <li role="treeitem" tabindex="-1">Downloads</li>
</ul>