Tree - Arborescence

Rôle et attributs ARIA

Rôles et attributs ARIA générés par défaut

• Rôle ARIA principal : role="tree"
• Attributs ARIA utilisés :
• aria-multiselectable="true" si l’attribut selection est à "multiple", c’est à dire si plusieurs éléments tree-item enfants sont sélectionnables simultanément
• tabindex="-1" : permet de ne placer le focus que sur la dernière branche de l’arbre qui a été sélectionnée, laissant la navigation entre les branches principales se faire avec les flèches directionnelles

 

Attributs de l’élément ayant un impact sur l’accessibilité

 

Navigation et interaction clavier

Touches supportées :

• Flèches directionnelles haut et bas → Permettent de naviguer sur l’intégralité du contenu affiché, c’est à dire les tree-item ouverts ou fermés et les tree-item enfants de tree-item parents ouverts
• Flèches directionnelles gauche et droite → Permettent de naviguer sur l’intégralité du contenu d’un tree, en ouvrant les items qui sont fermés et en plaçant le focus sur chacun des tree-item. En naviguant en arrière (avec la flèche gauche), les tree-item parents sont fermés
• Space → Sélectionne le tree-item sur lequel est placé le focus.
  Si l’item est une “feuille” et que l’attribut selection a pour valeur parent, c’est son parent qui sera sélectionné.
• Enter → Sélectionne l’élément tree-item sur lequel est placé le focus.
  Si l’item est une “feuille” et que l’attribut selection a pour valeur parent, c’est son parent qui sera sélectionné.
• Home → Sélectionne le premier élément tree-item
• End → Sélectionne le dernier élément tree-item

Gestion du focus :

• Le focus à l’intérieur d’un tree est géré exclusivement à l’aides des flèches directionnelles (haut et bas pour naviguer entre les éléments affichés et gauche/droite pour naviguer entre tous les éléments et les ouvrir s’ils sont fermés)
• A l’ouverture/fermeture d’un tree-item, le focus reste sur l’élément ouvert/fermé
  

Bonnes pratiques et pièges à éviter

 

Référence