ARIA : rôle treeitem

Description

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

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 un treeitem. Les dossiers, qui sont des éléments treeitem, peuvent être développés pour révéler leur contenu (fichiers, dossiers ou les deux, tous étant des treeitem) ou réduits pour masquer leur contenu.

Dans une hiérarchie d'arborescence, les nœuds treeitem de premier niveau sont des nœuds racines. Un treeitem qui est parent est un nœud parent. Un treeitem qui n'est pas parent est un nœ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 un nœud ouvert. Un nœud parent réduit, dont les enfants sont masqués, est un nœud fermé.

Chaque nœud parent contient ou possède un élément avec le rôle group. Le groupe est une collection extensible d'éléments treeitem. Ces nœuds enfants ne sont pas des enfants directs du nœud parent : ils doivent être contenus dans ou possédés par l'élément ayant le rôle group.

Chaque nœud parent doit inclure l'attribut aria-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'attribut aria-expanded, car sa présence indique aux technologies d'assistance que le nœud est parent.

Tout élément ayant le rôle treeitem doit appartenir à un tree. Imbriquez les éléments racines à l'intérieur de l'élément tree et les éléments enfants à l'intérieur de l'élément group de leur nœud parent.

Si un élément treeitem se trouve en dehors de son conteneur tree ou group dans le DOM, ajoutez son id à l'attribut aria-owns du conteneur.

Les arborescences peuvent être à « sélection unique », permettant à l'utilisateur·ice de choisir un seul treeitem pour une action, ou à « sélection multiple », où il·elle peut sélectionner plusieurs nœuds treeitem 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 seul treeitem peut avoir aria-selected (ou aria-checked) défini à true. Lorsqu'une arborescence à sélection unique reçoit la sélection, si aucun treeitem n'est sélectionné avant, la sélection est placée sur le premier treeitem. Si un treeitem est déjà sélectionné, la sélection est placée sur le treeitem sélectionné.

Tous les nœuds sélectionnables mais non sélectionnés ont soit aria-selected, soit aria-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ède aria-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 premier treeitem. 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 soit aria-selected="true", soit aria-checked="true". Tous les nœuds sélectionnables mais non sélectionnés doivent avoir aria-selected="false" ou aria-checked="false".

On peut utiliser soit aria-selected, soit aria-checked pour indiquer la sélection des éléments treeitem. Certaines interfaces utilisent aria-selected pour la sélection unique et aria-checked pour la sélection multiple.

L'utilisation simultanée de aria-selected et aria-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 c'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éments treeitem disponibles n'est pas présent dans le DOM (chargement dynamique lors du déplacement ou du défilement), chaque treeitem doit avoir aria-level, aria-setsize et aria-posinset renseignés.

Un treeitem doit obligatoirement avoir un nom accessible. En général, ce nom provient du contenu du treeitem. Il peut aussi être défini avec aria-label ou aria-labelledby.

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

tree

Le conteneur d'une liste hiérarchique de nœuds parents et enfants treeitem pouvant être développés ou réduits.

group

Identifie un ensemble d'enfants treeitem.

aria-expanded

Définit des nœuds treeitem parents pour indiquer si leur groupe d'enfants est développé (true) ou réduit (false).

aria-selected

Défini à true ou false, indique qu'un treeitem est sélectionnable et s'il est actuellement sélectionné.

aria-checked

Défini à true ou false, indique que le treeitem 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 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é 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 id="treeLabel">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" hidden>
            <li role="treeitem" aria-expanded="false">
              <span>HTML</span>
              <ul role="group" hidden>
                <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" hidden>
            <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" hidden>
            <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 définir tabIndex="-1" à tous les treeitem sauf celui qui doit recevoir la sélection lors de l'entrée dans l'arborescence, qui doit avoir tabIndex="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