Le rôletreeitem est un élément dans une arborescence (tree).

Description

Unearborescence (tree en anglais) est une liste hiérarchique avec des nœuds parents et enfants pouvant être développés ou réduits. Untreeitem est un nœud de cette arborescence. La racine de l'arborescence possède le rôletree, mais tous les nœuds sont des élémentstreeitem, même s'ils contiennent eux-mêmes des nœuds enfantstreeitem.

Un exemple d'« arborescence » est une interface de sélection de fichiers : une vue arborescente affichant des dossiers et des fichiers. Chaque dossier et fichier est untreeitem. Les dossiers, qui sont des élémentstreeitem, peuvent être développés pour révéler leur contenu (fichiers, dossiers ou les deux, tous étant destreeitem) ou réduits pour masquer leur contenu.

Dans une hiérarchie d'arborescence, lenœud racine possède le rôletree. Tous les autres nœuds, sauf la racine, ont le rôletreeitem, qu'ils aient ou non des enfants. Untreeitem qui est parent est unnœud parent. Untreeitem qui n'est pas parent est unnœud final.

Les éléments de l'arborescence ayant des enfants peuvent être développés ou réduits, affichant ou masquant leurs enfants. Un nœud parent développé, dont les enfants sont visibles, est unnœud ouvert. Un nœud parent réduit, dont les enfants sont masqués, est unnœud fermé.

Chaque nœud parent contient ou possède un élément avec le rôlegroup. Un nœud parent est une collection extensible d'élémentstreeitem. Ces nœuds enfants ne sont pas des descendants directs du parent : ils doivent être inclus dans un élément ayant le rôlegroup.

Chaque nœud parent doit inclure l'attributaria-expanded. Il est défini àfalse lorsque le nœud est réduit, et àtrue lorsqu'il est ouvert. Les nœuds finaux ne doivent pas avoir l'attributaria-expanded, car sa présence indique aux technologies d'assistance que le nœud est parent.

Tout élément ayant le rôletreeitem doit être imbriqué dans, ou possédé par, un élément ayant le rôletree. Les éléments de l'arborescence peuvent être enfants detree, detreeitem, ou d'un élément ayant le rôlegroup contenu ou possédé par un élément ayant le rôletree outreeitem. Si untreeitem n'est pas imbriqué dans une arborescence, ou dans ungroup possédé par une arborescence, incluez l'identifiantid dutreeitem dans la valeur de l'attributaria-owns de l'élément possédant (tree,treeitem ougroup).

Les arborescences peuvent être à « sélection unique », permettant à l'utilisateur·ice de choisir un seultreeitem pour une action, ou à « sélection multiple », où il·elle peut sélectionner plusieurs nœudstreeitem pour une action. Dans les deux cas, pour être accessibles au clavier, la gestion de la sélection doit être assurée pour tous les descendants de l'arborescence.

Dans les arborescences à sélection unique, un seultreeitem peut avoiraria-selected (ouaria-checked) défini àtrue. Lorsqu'une arborescence à sélection unique reçoit la sélection, si aucuntreeitem n'est sélectionné avant, la sélection est placée sur le premiertreeitem. Si untreeitem est déjà sélectionné, la sélection est placée sur cetreeitem ayantaria-selected="true".

Tous les nœuds sélectionnables mais non sélectionnés ont soitaria-selected, soitaria-checked défini àfalse. Si l'arborescence contient des nœuds non sélectionnables, n'ajoutez pas ces attributs, car leur présence indique aux technologies d'assistance que le nœud est sélectionnable.

Un seul nœud peut être sélectionné à la fois, sauf si le nœud racine possèdearia-multiselectable="true".

Dans une arborescence à sélection multiple, si aucun élément n'est sélectionné avant la sélection, la sélection est placée sur le premiertreeitem. Si un ou plusieurs éléments sont déjà sélectionnés, la sélection est placée sur le premier élément sélectionné.

Dans les arborescences à sélection multiple, tous les éléments sélectionnés ont soitaria-selected="true", soitaria-checked="true". Tous les nœuds sélectionnables mais non sélectionnés doivent avoiraria-selected="false" ouaria-checked="false".

On peut utiliser soitaria-selected, soitaria-checked pour indiquer la sélection des élémentstreeitem. Certaines interfaces utilisentaria-selected pour la sélection unique etaria-checked pour la sélection multiple.

L'utilisation simultanée dearia-selected etaria-checked dans une même arborescence est fortement déconseillée. Ne les utilisez ensemble que si leur signification et leur usage sont différents, que cela est clair pour l'utilisateur·ice, et que l'interface propose un contrôle distinct pour chaque état.

Dans les arborescences à sélection multiple, l'état sélectionné doit être 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. La conception visuelle doit clairement distinguer les éléments sélectionnés de l'élément ayant la sélection.

Si l'ensemble des élémentstreeitem disponibles n'est pas présent dans le DOM (chargement dynamique lors du déplacement ou du défilement), chaquetreeitem doit avoiraria-level,aria-setsize etaria-posinset renseignés.

Untreeitem doit obligatoirement avoir un nom accessible. En général, ce nom provient du contenu dutreeitem. Il peut aussi être défini viaaria-label ouaria-labelledby.

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

tree

Nœud racine d'une liste hiérarchique de nœuds parents et enfantstreeitem pouvant être développés ou réduits.

group

Identifie un ensemble d'enfantstreeitem.

aria-expanded

Défini sur le nœud racinetree et sur les nœudsgroup parents detreeitem, pour indiquer si la vue arborescente est développée (true) ou réduite (false).

aria-selected

Défini àtrue oufalse, indique qu'untreeitem est sélectionnable et s'il est actuellement sélectionné.

aria-checked

Défini àtrue oufalse, indique que letreeitem peut être coché et s'il l'est actuellement.

Interactions au clavier

Pour une arborescence verticale (orientation par défaut) :

* La recherche rapide (saisie semi-automatique) est recommandée pour toutes les arborescences, surtout si elles comportent plus de 7 nœuds racines.

Interactions clavier pour la sélection multiple

Il existe deux modèles d'interaction pour les arborescences à sélection multiple : vous pouvez exiger que l'utilisateur·ice maintienne une touche de modification (Maj ouCtrl) 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é pour la sélection multiple

Exemples

Voici comment baliser une liste de répertoires de cours de développement web sous forme de vue arborescente :

<div>  <h3>Parcours d'apprentissage développeur·euse</h3>  <ul role="tree" aria-labelledby="treeLabel">    <li role="treeitem" aria-expanded="true">      <span>Web</span>      <ul role="group">        <li role="treeitem" aria-expanded="false">          <span>Langages</span>          <ul role="group">            <li role="treeitem" aria-expanded="false">              <span>HTML</span>              <ul role="group">                <li role="treeitem">Structure du document</li>                <li role="treeitem">Éléments d'en-tête</li>                <li role="treeitem">Éléments sémantiques</li>                <li role="treeitem">Attributs</li>                <li role="treeitem">Formulaires web</li>              </ul>            </li>            <li role="treeitem">CSS</li>            <li role="treeitem">JavaScript</li>          </ul>        </li>        <li role="treeitem" aria-expanded="false">          <span>Accessibilité</span>          <ul role="group">            <li role="treeitem" aria-label="accessibility object model">AOM</li>            <li role="treeitem">WCAG</li>            <li role="treeitem">ARIA</li>          </ul>        </li>        <li role="treeitem" aria-expanded="false">          <span>Performance web</span>          <ul role="group">            <li role="treeitem">Temps de chargement</li>          </ul>        </li>        <li role="treeitem">API</li>      </ul>    </li>  </ul></div>

Ce balisage fournit la sémantique d'une vue arborescente, mais pas l'interactivité. Celle-ci doit être ajoutée en JavaScript.

Si les éléments de l'arborescence ne sont pas sélectionnables par défaut, JavaScript peut être utilisé pour ajoutertabIndex="-1" à tous lestreeitem sauf celui qui doit recevoir la sélection lors de l'entrée dans l'arborescence, qui doit avoirtabIndex="0".

Toutes les fonctionnalités clavier décrites dans la section « Interactions au clavier » ainsi que les événements de pointeur doivent être programmés, y compris la gestion de la sélection, la navigation dans l'arborescence, le développement/réduction des nœuds parents et la gestion de la sélection.

Si l'arborescence comporte plus de 7 éléments, il est recommandé d'inclure la recherche rapide (saisie semi-automatique).

Spécifications