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.

Pour plus d'informations sur la manière de baliser les nœuds individuels d'un arbre, consultez treeitem.

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.

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, l'élément tree est le conteneur de la hiérarchie des nœuds treeitem. Chaque élément servant de nœud d'arbre a le rôle treeitem. Les éléments de l'arborescence de premier niveau sont des nœuds racines ; ils peuvent avoir des enfants, des petits-enfants et d'autres descendants.

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 nœuds racines ne sont pas contenus dans le tree dans le DOM, incluez aria-owns sur le conteneur de l'arbre pour les référencer. Ces éléments possédés qui ne sont pas des descendants apparaissent dans l'ordre de lecture dans la séquence où ils sont référencés et après tous les treeitem qui sont des descendants 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.

Nom accessible

Le tree doit avoir un nom accessible. Référencez une étiquette visible avec aria-labelledby ou définissez 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 de caractères 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