ARIA: treeitem Rolle

Ein tree ist eine hierarchische Liste mit übergeordneten und untergeordneten Knoten, die erweitert und reduziert werden können. Ein treeitem ist ein Knoten in einem tree. Die Wurzel des Baumes ist tree, aber alle Baumknoten sind treeitem-Elemente, auch wenn sie selbst verschachtelte treeitem-Knoten haben.

Ein Beispiel für einen tree ist eine Benutzeroberfläche zur Dateiauswahl: eine Baumansicht, die Ordner und Dateien anzeigt. Jeder Ordner und jede Datei ist ein treeitem. Ordner, die treeitem-Elemente sind, können erweitert werden, um den Inhalt des Ordners anzuzeigen—welcher Dateien, Ordner oder beides enthalten kann, und alle sind treeitems—und können reduziert werden, um den Inhalt auszublenden.

In einer Baumhierarchie hat der Wurzelknoten die Rolle tree. Alle anderen Knoten, außer dem Wurzelknoten, haben die Rolle treeitem, unabhängig davon, ob sie Kinder haben. Ein treeitem, das ein Elternteil ist, ist ein Elternknoten. Ein treeitem, das kein Elternteil ist, ist ein Endknoten.

Baumelemente, die Kinder haben, können erweitert oder reduziert werden, um ihre Kinder anzuzeigen oder auszublenden. Ein Elternknoten, der erweitert ist, sodass seine Kindknoten sichtbar sind, ist ein offener Knoten. Ein Elternknoten, der reduziert ist, sodass die Kindknoten nicht sichtbar sind, ist ein geschlossener Knoten.

Jeder Elternknoten enthält oder besitzt ein Element mit der Rolle group. Ein Elternknoten ist eine erweiterbare Sammlung von treeitem-Elementen. Diese Kindknoten sind keine direkten Nachkommen des Elternknotens: Sie sollten vielmehr in ein Element mit der Rolle group eingeschlossen werden.

Jeder Elternknoten sollte das Attribut aria-expanded beinhalten. Es ist auf false gesetzt, wenn geschlossen, und auf true, wenn offen. Endknoten sollten das Attribut aria-expanded nicht enthalten, da die Anwesenheit des Attributs unterstützenden Technologien anzeigt, dass der Knoten ein Elternteil ist.

Jedes Element mit einer treeitem-Rolle muss in ein Element mit der Rolle tree verschachtelt sein oder von einem solchen Element besessen werden. Baumitems können ein Kind eines tree, treeitem oder eines Elements mit der Rolle group sein, das in oder von einem Element mit der Rolle tree oder treeitem besessen wird. Wenn ein treeitem nicht innerhalb eines tree verschachtelt ist oder in einer group verschachtelt ist, die von einem tree besessen wird, schließen Sie die id des treeitem in den Attributwert aria-owns auf dem besitzenden tree, treeitem oder group-Element ein.

Bäume können "einzelauswählend" sein, sodass Benutzer nur ein treeitem für eine Aktion auswählen können, oder "mehrfachauswählend", wobei Benutzer mehr als einen treeitem-Knoten für eine Aktion auswählen können. In beiden Fällen muss der Fokus für alle Baum-Nachkommen verwaltet werden, um tastaturzugänglich zu sein.

In einzelauswählenden Bäumen kann nur ein treeitem aria-selected (oder aria-checked) auf true gesetzt haben. Wenn ein einzelauswählender Baum den Fokus erhält und kein treeitem ausgewählt ist, bevor der Baum den Fokus erhält, wird der Fokus auf das erste treeitem gesetzt. Wenn ein treeitem ausgewählt ist, bevor der Baum den Fokus erhält, wird der Fokus auf das einzelne treeitem gesetzt, das aria-selected="true" gesetzt hat.

Alle Knoten, die auswählbar sind, aber nicht ausgewählt sind, haben entweder aria-selected oder aria-checked auf false gesetzt. Wenn der Baum Knoten enthält, die nicht auswählbar sind, schließen Sie weder aria-selected noch aria-checked ein, da die Anwesenheit eines dieser Attribute unterstützenden Technologien anzeigt, dass der Knoten auswählbar ist.

Es kann nicht mehr als ein Knoten gleichzeitig ausgewählt sein, es sei denn, der tree-Knoten hat aria-multiselectable="true" gesetzt.

Wenn ein mehrfachauswählender Baum den Fokus erhält und keine der Baumitems ausgewählt sind, bevor der Baum den Fokus erhält, wird der Fokus auf das erste treeitem gesetzt. Wenn ein oder mehrere Baumitems ausgewählt sind, bevor der Baum den Fokus erhält, wird der Fokus auf das erste ausgewählte treeitem gesetzt.

In mehrfachauswählenden Bäumen haben alle ausgewählten Baumitems entweder aria-selected="true" (oder aria-checked="true") gesetzt. Alle Baumknoten, die auswählbar sind, aber derzeit nicht ausgewählt sind, sollten aria-selected="false" (oder aria-checked="false") gesetzt haben.

Entweder aria-selected oder aria-checked kann verwendet werden, um die Auswahl für treeitem-Elemente anzuzeigen. Einige Benutzeroberflächen zeigen die Auswahl in einzelauswählenden Bäumen mit aria-selected und in mehrfachauswählenden Bäumen mit aria-checked an.

Die Verwendung sowohl von aria-selected als auch von aria-checked im selben tree wird dringend abgeraten. Verwenden Sie nicht sowohl aria-selected als auch aria-checked auf Treeitems in einem einzigen Baum, es sei denn, die Bedeutung und der Zweck von aria-selected unterscheiden sich von der Bedeutung und dem Zweck von aria-checked, die Bedeutung und der Zweck jedes Zustands sind offensichtlich, und die Benutzeroberfläche bietet eine separate Methode zur Steuerung jedes Zustands.

In mehrfachauswählenden Bäumen sollte der ausgewählte Zustand unabhängig vom Fokus sein. Beispielsweise kann der Benutzer in einem typischen Dateisystemnavigator den Fokus bewegen, um eine beliebige Anzahl von Dateien für eine Aktion, wie Kopieren oder Verschieben, auszuwählen. Das visuelle Design sollte deutlich machen, welche Elemente ausgewählt sind und welches Element den Fokus hat.

Wenn die vollständige Menge verfügbarer Treeitems aufgrund von dynamischem Laden während der Fokusbewegung des Benutzers oder Scrollen im Baum nicht im DOM vorhanden ist, sollte jedes treeitem aria-level, aria-setsize, und aria-posinset angegeben haben.

Ein treeitem muss einen zugänglichen Namen haben. In der Regel kommt dieser Name aus dem Inhalt des treeitem. Der zugängliche Name kann auch über aria-label oder aria-labelledby festgelegt werden.

tree Rolle

Der Wurzelknoten für die hierarchische Liste von übergeordneten und untergeordneten treeitem-Knoten, die erweitert und reduziert werden können.

group Rolle

Identifiziert eine Gruppe von treeitem-Kindknoten.

aria-expanded

Wird auf dem Wurzel-tree und auf group-Knoten, die Eltern von treeitem-Knoten sind, gesetzt, um anzuzeigen, ob die Baumansicht erweitert (true) oder reduziert (false) ist.

aria-selected

Auf true oder false gesetzt, zeigt an, dass ein treeitem auswählbar ist und ob es derzeit ausgewählt ist oder nicht.

aria-checked

Auf true oder false gesetzt, zeigt an, dass das treeitem überprüft werden kann, und ob es derzeit überprüft ist oder nicht.

Für einen vertikal orientierten tree, der die Standardausrichtung ist:

* Die Eingabehilfe wird für alle Bäume empfohlen, insbesondere für Bäume mit mehr als 7 Wurzelknoten

Es gibt zwei Interaktionsmodelle für mehrfachauswählende Bäume: Sie können verlangen, dass Benutzer eine Modifikatortaste, wie Shift oder Strg, drücken, während sie die Liste navigieren, um zu vermeiden, dass Auswahlzustände verloren gehen. Das Modell, das nicht erfordert, dass der Benutzer eine Modifikatortaste gedrückt hält, wird jedoch empfohlen.

Empfohlenes Mehrfachauswahlmodell für Benutzer

Das folgende Beispiel zeigt, wie man ein Verzeichnis von Webentwicklungskursen als Baumansicht markieren könnte:

<div>
  <h3 id="treeLabel">Developer Learning Path</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>Languages</span>
          <ul role="group">
            <li role="treeitem" aria-expanded="false">
              <span>HTML</span>
              <ul role="group">
                <li role="treeitem">Document structure</li>
                <li role="treeitem">Head elements</li>
                <li role="treeitem">Semantic elements</li>
                <li role="treeitem">Attributes</li>
                <li role="treeitem">Web forms</li>
              </ul>
            </li>
            <li role="treeitem">CSS</li>
            <li role="treeitem">JavaScript</li>
          </ul>
        </li>
        <li role="treeitem" aria-expanded="false">
          <span>Accessibility</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>Web Performance</span>
          <ul role="group">
            <li role="treeitem">Load time</li>
          </ul>
        </li>
        <li role="treeitem">APIs</li>
      </ul>
    </li>
  </ul>
</div>

Das oben Genannte bietet die Semantik für eine Baumansicht, stellt jedoch keine der Interaktivitäten bereit. Diese muss mit JavaScript hinzugefügt werden.

Wenn die Baumitems standardmäßig nicht fokussierbar sind, kann JavaScript verwendet werden, um tabIndex="-1" auf alle Baumitems außer demjenigen zu setzen, das den Fokus erhalten soll, wenn der Benutzer in den Baum wechselt, und dieses sollte auf tabIndex="0" gesetzt sein.

Alle Tastaturfunktionen in Tastaturinteraktionen und alle Zeigerereignisse müssen programmiert werden, einschließlich der Fokusverwaltung, des Navigierens auf und ab im Baum, des Erweiterns und Reduzierens von Elternknoten und der Auswahlverwaltung.

Wenn der Baum mehr als 7 Baumitems hat, wird empfohlen, eine Eingabehilfe-Funktion zu integrieren.