ARIA: `treeitem` Rolle

Ein treeitem ist ein Element in einem tree.

Beschreibung

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 Baums ist tree, aber alle Baumknoten sind treeitem-Elemente, selbst wenn sie verschachtelte treeitem-Knoten enthalten.

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—diese können Dateien, Ordner oder beides sein und sind alle treeitems—und können reduziert werden, um den Inhalt zu verbergen.

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 ein- oder ausgeklappt werden, um ihre Kinder anzuzeigen oder zu verbergen. Ein Elternknoten, der erweitert ist, sodass seine untergeordneten Knoten sichtbar sind, ist ein offener Knoten. Ein Elternknoten, der reduziert ist, sodass die untergeordneten Knoten 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 untergeordneten Knoten sind keine direkten Nachkommen des Elternknotens, sondern sollten in einem Element mit der Rolle group eingeschlossen sein.

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

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

Bäume können „Einzelauswahl“ sein, sodass Benutzer nur ein treeitem für eine Aktion auswählen können, oder „Mehrfachauswahl“, bei der Benutzer mehr als einen treeitem-Knoten für eine Aktion auswählen können. In beiden Fällen muss der Fokus für alle Baumnachkommen verwaltet werden, um tastaturzugänglich zu sein.

In Einzelauswahlbäumen kann nur ein treeitem aria-selected (oder aria-checked) auf true gesetzt haben. Wenn ein Einzelauswahlbaum 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 mit aria-selected="true" gesetzt.

Alle Knoten, die auswählbar, 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 assistiven Technologien anzeigt, dass der Knoten auswählbar ist.

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

Wenn ein Mehrfachauswahlbaum den Fokus erhält und keiner der Baumknoten ausgewählt ist, bevor der Baum den Fokus erhält, wird der Fokus auf das erste treeitem gesetzt. Wenn ein oder mehrere Baumknoten ausgewählt sind, bevor der Baum den Fokus erhält, wird der Fokus auf das erste ausgewählte treeitem gesetzt.

In Mehrfachauswahlbäumen haben alle ausgewählten Baumknoten entweder aria-selected="true" (oder aria-checked="true") gesetzt. Alle Baumknoten, die auswählbar, 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 mit aria-selected in Einzelauswahlbäumen und mit aria-checked in Mehrfachauswahlbäumen an.

Die Verwendung von sowohl aria-selected als auch aria-checked im selben tree wird dringend abgeraten. Verwenden Sie nicht sowohl aria-selected als auch aria-checked auf treeitems in einem einzelnen Baum, es sei denn, die Bedeutung und der Zweck von aria-selected ist unterschiedlich 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 Mehrfachauswahlbäumen sollte der ausgewählte Zustand unabhängig vom Fokus sein. Beispielsweise kann der Benutzer in einem typischen Dateisystem-Navigator den Fokus verschieben, 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 der verfügbaren treeitems aufgrund dynamischer Ladungen nicht im DOM vorhanden ist, während der Benutzer den Fokus verschiebt oder im Baum scrollt, sollte jedes treeitem aria-level, aria-setsize und aria-posinset spezifiziert haben.

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

Zugehörige WAI-ARIA-Rollen, Zustände und Eigenschaften

tree Rolle

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

group Rolle

Identifiziert eine Gruppe von untergeordneten treeitem-Knoten.

aria-expanded

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

aria-selected

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

aria-checked

Auf true oder false gesetzt, zeigt das treeitem an, das angekreuzt werden kann, und ob es derzeit angekreuzt ist oder nicht.

Tastaturinteraktionen

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

* Type-Ahead wird für alle Bäume empfohlen, insbesondere für Bäume mit mehr als 7 Wurzelknoten

Multi-Select-Tastaturinteraktionen

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

Empfohlenes Mehrbenutzer-Auswahlmodell

Beispiele

Das folgende ist, wie man eine Verzeichnisauswahl 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, jedoch nicht die Interaktivität. Diese muss mit JavaScript hinzugefügt werden.

Wenn die Baumelemente standardmäßig nicht fokussierbar sind, kann JavaScript verwendet werden, um tabIndex="-1" zu allen treeitems hinzuzufügen, außer zu dem, das den Fokus erhalten soll, wenn der Benutzer in den Baum wechselt, was auf tabIndex="0" gesetzt werden sollte.

Die gesamte Tastaturfunktionalität in den Tastaturinteraktionen und alle Zeigerereignisse müssen programmiert werden, einschließlich der Fokusverwaltung, der Aufwärts- und Abwärtsnavigation im Baum, der Erweiterung und Reduzierung von Elternknoten und der Auswahlverwaltung.

Wenn der Baum mehr als 7 treeitems hat, wird die Implementierung der Type-Ahead-Funktionalität empfohlen.

Spezifikationen

• Accessible Rich Internet Applications (WAI-ARIA)
  # treeitem
• Unknown specification
  #