ARIA : rôle tree

Description

Un composant tree est une liste hiérarchique avec des nœuds parent et enfant qui peuvent être développés ou réduits. Tout élément de la hiérarchie peut avoir des enfants, définis avec role="treeitem". Les éléments qui ont des enfants peuvent être développés ou réduits, affichant ou masquant leurs enfants.

Un exemple de tree est une interface de sélection de fichiers : une vue de l'arborescence affichant des dossiers et des fichiers. Les dossiers peuvent être développés pour révéler leur contenu — fichiers, dossiers ou les deux — et réduits pour masquer leur contenu.

Les vues de l'arborescence ARIA se naviguent principalement avec les touches fléchées du clavier, et non avec Tab. Cette navigation est peu courante pour le contenu web, mais normale pour les applications natives. Pour cette raison, avant de créer une vue de l'arborescence, envisagez d'autres solutions pour répondre au besoin fonctionnel.

Arbres à sélection unique et multiple

Les arbres peuvent être « à sélection unique », permettant à l'utilisateur·ice de choisir un seul élément pour une action, ou « à sélection multiple », où il·elle peut sélectionner plusieurs éléments pour une action. Dans les arbres à sélection multiple, le tree porte aria-multiselectable à true. Sinon, aria-multiselectable est à false ou la valeur par défaut false est implicite. Dans les deux cas, pour l'accessibilité clavier, la gestion de la sélection doit être assurée pour tous les descendants de l'arbre.

Dans certaines implémentations d'arbre à sélection unique, l'élément sélectionné est aussi celui qui a la sélection : c'est le modèle « la sélection suit la sélection clavier ». Quand un arbre à sélection unique reçoit la sélection, si aucun élément n'est sélectionné avant, la sélection se place sur le premier nœud. Si un élément est sélectionné avant, la sélection se place sur cet élément. Dans les arbres à sélection unique, aria-selected est à true pour l'élément sélectionné et n'est pas présent sur les autres éléments.

Dans les arbres à sélection multiple, tous les éléments sélectionnés portent aria-selected="true" et tous les éléments sélectionnables mais non sélectionnés portent aria-selected="false". Ne mettez pas l'attribut aria-selected sur les éléments non sélectionnables.

Quand un arbre à sélection multiple reçoit la sélection, si aucun élément n'est sélectionné avant, la sélection se place sur le premier élément. Si un ou plusieurs éléments sont sélectionnés avant, la sélection se place sur le premier élément sélectionné.

Dans les arbres à sélection multiple, l'état sélectionné est toujours indépendant de la sélection clavier. Par exemple, dans un explorateur de fichiers, l'utilisateur·ice peut déplacer la sélection pour choisir plusieurs fichiers à copier ou déplacer. Le design visuel doit clairement indiquer quels éléments sont sélectionnés et lequel a la sélection clavier.

Hiérarchie de l'arbre

Dans une vue de l'arborescence, le nœud tree est la racine : il peut avoir des enfants, petits-enfants et autres descendants de type treeitem.

Chaque élément servant de nœud d'arbre porte le rôle treeitem, sauf la racine qui porte le rôle tree. Un tree n'a pas de parent tree : c'est la racine. Si un nœud est imbriqué dans un arbre et possède des enfants, il porte le rôle treeitem et l'attribut aria-expanded : aria-expanded="false" quand le nœud est fermé, aria-expanded="true" quand il est ouvert.

Les nœuds treeitem peuvent être des enfants directs de la racine, imbriqués dans un autre treeitem, ou, optionnellement, dans un élément group, qui, dans un arbre, est une collection extensible d'éléments treeitem.

Ne mettez pas aria-expanded sur les nœuds terminaux — ceux sans enfants treeitem — car cela décrirait à tort le nœud comme parent pour les technologies d'assistance.

Placement et présence dans le DOM

Tous les treeitem sont contenus ou possédés par un élément avec le rôle tree. Si certains treeitem ne sont pas des descendants directs du tree dans le code, ajoutez aria-owns sur le conteneur pour inclure les éléments qui ne sont pas enfants dans le DOM. Ces éléments apparaîtront dans l'ordre de lecture à la suite des treeitem enfants du DOM. Les scripts qui gèrent la sélection doivent s'assurer que l'ordre visuel de sélection correspond à cet ordre de lecture pour les technologies d'assistance.

Si l'ensemble des nœuds disponibles n'est pas présent dans le DOM à cause d'un chargement dynamique lors du déplacement ou du défilement dans l'arbre, chaque nœud doit avoir aria-level, aria-setsize et aria-posinset renseignés.

Nom accessible

Le tree doit avoir un nom accessible. Référencez une étiquette visible avec aria-labelledby ou spécifiez une étiquette avec aria-label.

Orientation de l'arbre

Les éléments avec le rôle tree ont une valeur implicite aria-orientation à vertical. Si l'arbre est horizontal, ajoutez aria-orientation="horizontal".

Propriétés, états et rôles WAI-ARIA associés

role="treeitem"

Un élément dans un arbre.

role="group"

Une collection extensible d'éléments treeitem.

aria-labelledby

Identifie l'élément (ou les éléments) qui étiquettent le tree pour fournir le nom accessible requis si une étiquette visible est présente. Sinon, utilisez aria-label.

aria-label

Définit une chaîne qui étiquette le tree si aucune étiquette visible n'est présente.

aria-orientation

Indique si l'arbre est horizontal ou vertical ; la valeur par défaut est vertical si omise.

aria-multiselectable

Si la valeur est true, indique que l'utilisateur·ice peut sélectionner plusieurs éléments parmi les descendants sélectionnables de l'arbre.

Interactions au clavier

Pour un arbre vertical (orientation par défaut) :

* La recherche rapide est recommandée pour tous les arbres, surtout ceux avec plus de 7 nœuds racine

Interactions clavier pour la sélection multiple

Il existe deux modèles d'interaction pour les arbres à sélection multiple : on peut exiger que l'utilisateur·ice appuie sur une touche de modification (Maj ou Ctrl) lors de la navigation pour ne pas perdre l'état de sélection, mais le modèle qui ne nécessite pas de maintenir une touche est recommandé.

Modèle recommandé de sélection multiple

Modèle alternatif de sélection multiple

Le modèle alternatif est basé sur une touche de modification : déplacer la sélection sans maintenir une touche comme Maj ou Ctrl désélectionne tous les nœuds sauf celui sélectionné.

Spécifications