tree

Quand l’utiliser

Pour un véritable navigateur hiérarchique : système de fichiers, organigramme, taxonomie profondément imbriquée. Les enfants sont role="treeitem", regroupés si nécessaire par des conteneurs intermédiaires role="group".

Si votre « arborescence » n’est en réalité qu’un menu de navigation composé de liens à deux ou trois niveaux, n’utilisez pas role="tree". Utilisez plutôt <nav> avec des <ul> imbriqués et des <a> — Tab + Entrée est ce qu’attendent les utilisateurs pour la navigation ; la navigation par touches fléchées dans un menu de site est peu familière et lente.

Un tree DOIT avoir un nom accessible. Définir aria-multiselectable="true" si plusieurs treeitems peuvent être sélectionnés simultanément.

Contrat clavier + focus

Conformément au modèle APG treeview :

• Tab déplace le focus dans l’arborescence, vers le treeitem actif (ou le premier) ; 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 réduit, développer ; si développé, aller au premier enfant.
• Flèche Gauche : si développé, 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 sélectionne le treeitem courant.
• Saisie anticipée : taper des lettres saute vers les nœuds visibles correspondants.
• Pour les arborescences multi-sélection : Maj+Flèche étend la sélection contiguë ; Ctrl/Cmd+Clic bascule la sélection individuelle.

Utiliser un tabindex roulant : seul le treeitem actuellement actif a tabindex="0".

Erreurs courantes

• Chaque treeitem avec tabindex="0". Le modèle impose un seul arrêt de tabulation.
• Arborescence sans nom accessible. La navigation par repères du lecteur d’écran n’a rien à annoncer.
• Treeitems enfants à l’intérieur du parent sans conteneur role="group". Les lecteurs d’écran ne peuvent pas annoncer le groupe comme une unité.
• aria-expanded="false" sur des treeitems feuilles — annonce un état réductible vide.
• Les flèches Droite/Gauche utilisées pour le passage au nœud suivant/précédent au lieu de développer/réduire.

Exemple

<ul role="tree" aria-label="Project files">
  <li role="treeitem" aria-expanded="true" tabindex="0">
    src
    <ul role="group">
      <li role="treeitem" tabindex="-1">index.ts</li>
      <li role="treeitem" aria-expanded="false" tabindex="-1">
        components
        <ul role="group">
          <li role="treeitem" tabindex="-1">Button.tsx</li>
        </ul>
      </li>
    </ul>
  </li>
  <li role="treeitem" tabindex="-1">README.md</li>
</ul>