ARIA: tree Rolle

Ein tree-Widget ist eine hierarchische Liste mit übergeordneten und untergeordneten Knoten, die erweitert und reduziert werden können. Jedes Element in der Hierarchie kann untergeordnete Tree-Elemente haben, die mit role="treeitem" festgelegt werden. Tree-Elemente, die Kinder haben, können erweitert oder reduziert werden, um ihre Kinder anzuzeigen oder zu verbergen.

Ein Beispiel für einen tree ist eine Benutzeroberfläche zur Dateiauswahl: eine Baumansicht, die Ordner und Dateien anzeigt. Ordner können erweitert werden, um den Inhalt des Ordners anzuzeigen – was Dateien, Ordner oder beides sein kann – und reduziert werden, um den Inhalt zu verbergen.

ARIA-Baumansichten werden hauptsächlich mit Pfeiltasten auf der Tastatur anstelle der Tab-Taste navigiert. Diese Form der Navigation ist nicht üblich für die meisten Browserinhalte, aber normal und erwartet bei nativen Anwendungen. Aus diesem Grund sollten Sie, bevor Sie eine Baumansicht erstellen, alternative Optionen in Betracht ziehen, um die benötigte Funktionalität zu erfüllen.

Bäume können "Einzelauswahl" sein, was es Benutzern erlaubt, nur ein Element für eine Aktion auszuwählen, oder "Mehrfachauswahl", bei der Benutzer mehr als ein Element für eine Aktion auswählen können. In Mehrfachauswahlbäumen ist der tree mit aria-multiselectable auf true gesetzt. Andernfalls wird aria-multiselectable entweder auf false gesetzt oder der Standardwert false wird impliziert. In beiden Fällen muss der Fokus für alle Abkömmlinge des Baumes verwaltet werden, um Tastaturzugänglichkeit zu gewährleisten.

In einigen Implementierungen eines Einzelauswahlbaums hat das fokussierte Element auch einen ausgewählten Zustand; das wird als "Selektion folgt dem Fokus" bezeichnet. Wenn ein Einzelauswahlbaum den Fokus erhält und keine der Tree-Elemente ausgewählt sind, wird der Fokus auf den ersten Knoten gesetzt. Wenn ein Tree-Element vor dem Fokuserhalt ausgewählt ist, wird der Fokus auf das ausgewählte Tree-Element gesetzt. In Einzelauswahlbäumen wird aria-selected für die ausgewählten Tree-Elemente auf true gesetzt und ist bei keinem anderen Tree-Element im Baum vorhanden.

In Mehrfachauswahlbäumen haben alle ausgewählten Tree-Elemente aria-selected="true" gesetzt, und alle Tree-Knotenelemente, die auswählbar, aber momentan nicht ausgewählt sind, haben aria-selected="false" gesetzt. Schließen Sie das aria-selected Attribut nicht bei Tree-Elementen ein, die nicht auswählbar sind.

Wenn ein Mehrfachauswahlbaum den Fokus erhält und keines der Tree-Elemente vor dem Fokuserhalt ausgewählt sind, wird der Fokus auf das erste Tree-Element gesetzt. Wenn eines oder mehrere Tree-Elemente vor dem Fokuserhalt ausgewählt sind, wird der Fokus auf den ersten ausgewählten Knoten gesetzt.

In Mehrfachauswahlbäumen ist der ausgewählte Zustand immer unabhängig vom Fokus. Zum Beispiel kann der Benutzer in einem typischen Dateisystemnavigator den Fokus verschieben, um eine beliebige Anzahl von Dateien für eine Aktion auszuwählen, wie Kopieren oder Verschieben. Das visuelle Design sollte klar darstellen, welche Elemente ausgewählt sind und welches Element den Fokus hat.

In einer Baumansicht ist der tree-Knoten der Wurzelknoten; er kann übergeordnete, untergeordnete und weitere nachfolgende treeitem-Knoten haben.

Jedes Element, das als Baumknoten dient, hat die Rolle treeitem, mit Ausnahme des Wurzelknotens des Baums, der die Rolle tree hat. Ein tree hat keinen übergeordneten tree-Knoten - er ist der Wurzelknoten. Wenn ein Knoten sowohl in einem Baum verschachtelt ist als auch untergeordnete Tree-Elemente hat, dann hat er die Rolle treeitem und das Attribut aria-expanded; aria-expanded="false" wird gesetzt, wenn der Knoten im geschlossenen Zustand ist, aria-expanded="true" wird gesetzt, wenn der Knoten im offenen Zustand ist.

treeitem-Knoten können direkte Kinder des tree-Wurzelknotens sein, innerhalb eines treeitem-Knotens verschachtelt oder optional in einem group-Element verschachtelt sein, das, wenn es in einem tree verschachtelt ist, eine erweiterbare Sammlung von treeitem-Elementen darstellt.

Schließen Sie aria-expanded nicht bei Endknoten ein — bei denen ohne untergeordnete Tree-Elemente — da dies den Knoten fälschlicherweise als Elternknoten für unterstützende Technologien beschreiben würde.

Alle Tree-Elemente sind in einem Element mit der Rolle tree enthalten oder von ihm besessen. Wenn es Tree-Elemente gibt, die keine direkten Nachkommen des tree im Markup sind, schließen Sie aria-owns im besitzenden Baumcontainer ein, um Elemente aufzunehmen, die keine DOM-Kinder des Containers sind. Diese nicht direkt untergeordneten Elemente erscheinen in der Leserichtung in der Reihenfolge, in der sie referenziert werden, und nach allen Tree-Elementen, die DOM-Kinder sind. Skripte, die den Fokus verwalten, müssen sicherstellen, dass die visuelle Fokusreihenfolge dieser Leserichtung der unterstützenden Technologie entspricht.

Wenn der vollständige Satz verfügbarer Knoten aufgrund dynamischen Ladevorgangs beim Verschieben des Fokus im Baum oder beim Scrollen nicht im DOM vorhanden ist, haben alle Knoten aria-level, aria-setsize und aria-posinset angegeben.

Dem tree muss ein zugänglicher Name zugewiesen werden. Entweder verweisen Sie auf eine sichtbare Bezeichnung mit aria-labelledby oder geben Sie eine Bezeichnung mit aria-label an.

Elemente mit der Rolle tree haben einen impliziten aria-orientation-Wert von vertikal. Wenn das Tree-Element horizontal ausgerichtet ist, schließen Sie aria-orientation="horizontal" ein.

role="treeitem"

Ein Element in einem Baum.

role="group"

Eine erweiterbare Sammlung von Tree-Elementen.

aria-labelledby

Identifiziert das Element (oder die Elemente), das/die den tree beschriftet/beschriften und den erforderlichen zugänglichen Namen bereitstellt, wenn eine sichtbare Bezeichnung vorhanden ist. Andernfalls verwenden Sie aria-label.

aria-label

Definiert einen Zeichenfolgenwert, der den tree beschriftet, wenn keine sichtbare Bezeichnung vorhanden ist.

aria-orientation

Gibt an, ob die Ausrichtung des Baumes horizontal oder vertikal ist; Standardmäßig vertikal, wenn nicht angegeben.

aria-multiselectable

Wenn auf true gesetzt, gibt es an, dass der Benutzer mehr als ein Tree-Item aus den derzeit auswählbaren Nachkommen des Baumes auswählen kann.

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

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

Es gibt zwei Interaktionsmodelle für Mehrfachauswahlbäume: Während Sie von Benutzern verlangen können, eine Modifikatortaste wie Shift oder Strg beim Navigieren der Liste zu drücken, um zu vermeiden, dass Auswahlzustände verloren gehen, wird das Modell empfohlen, das nicht erfordert, dass der Benutzer eine Modifikatortaste hält.

Empfohlenes Mehrfachbenutzerauswahlmodell

Alternatives Mehrfachauswahlmodell

Das alternative Mehrfachauswahlmodell ist ein Modifikatortastenmodell, bei dem das Verschieben des Fokus ohne Halten einer Modifikatortaste wie Shift oder Strg alle ausgewählten Knoten außer dem fokussierten Knoten abwählt: