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 zu zeigen oder zu verbergen.

Ein Beispiel für ein 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 – dieser kann Dateien, Ordner oder beides enthalten – und reduziert werden, um deren Inhalt zu verbergen.

ARIA-Baumansichten werden in erster Linie mit den Pfeiltasten auf der Tastatur navigiert, anstatt mit der Tab-Taste. Diese Form der Navigation ist für die meisten Browserinhalte nicht üblich, aber für native Anwendungen normal und erwartet. Aus diesem Grund sollten Sie vor dem Erstellen einer Baumansicht alternative Optionen in Betracht ziehen, um die benötigte Funktionalität bereitzustellen.

Bäume können "einzelne Auswahl" sein, wobei Benutzer nur ein Element für eine Aktion wählen können, oder "mehrfache Auswahl", wobei Benutzer mehr als ein Element für eine Aktion auswählen können. In Bäumen zur Mehrfachauswahl ist das tree mit aria-multiselectable auf true gesetzt. Andernfalls ist aria-multiselectable entweder auf false gesetzt oder der Standardwert von false ist impliziert. In beiden Fällen muss der Fokus für alle Tree-Nachkommen verwaltet werden, um tastaturzugänglich zu sein.

In einigen Implementierungen eines Baumes zur Einzelauswahl hat das fokussierte Element ebenfalls einen ausgewählten Zustand; dies wird als "Auswahl folgt dem Fokus" bezeichnet. Wenn ein Baum zur Einzelauswahl den Fokus erhält und kein Tree-Element ausgewählt ist, bevor der Baum den Fokus erhält, wird der Fokus auf den ersten Knoten gesetzt. Wenn ein Tree-Element ausgewählt ist, bevor der Baum den Fokus erhält, wird der Fokus auf das ausgewählte Tree-Element gesetzt. In Bäumen zur Einzelauswahl ist aria-selected für die ausgewählten Tree-Elemente auf true gesetzt und ist auf keinem anderen Tree-Element im Baum vorhanden.

In Bäumen zur Mehrfachauswahl sind alle ausgewählten Tree-Elemente auf aria-selected="true" gesetzt und alle Tree-Element-Knoten, die auswählbar, aber derzeit nicht ausgewählt sind, haben aria-selected="false" gesetzt. Schließen Sie das aria-selected-Attribut nicht auf Tree-Elementen ein, die nicht auswählbar sind.

Wenn ein Baum zur Mehrfachauswahl den Fokus erhält und kein Tree-Element ausgewählt ist, bevor der Baum den Fokus erhält, wird der Fokus auf das erste Tree-Element gesetzt. Wenn eines oder mehrere Tree-Elemente ausgewählt sind, bevor der Baum den Fokus erhält, wird der Fokus auf den ersten ausgewählten Knoten gesetzt.

In Bäumen zur Mehrfachauswahl ist der ausgewählte Zustand immer unabhängig vom Fokus. Zum Beispiel kann der Benutzer in einem typischen Dateisystem-Explorer den Fokus bewegen, um eine beliebige Anzahl von Dateien für eine Aktion auszuwählen, z. B. Kopieren oder Verschieben. Das visuelle Design sollte klar machen, welche Elemente ausgewählt sind und welches Element den Fokus hat.

In einer Baumansicht ist der tree-Knoten der Wurzelknoten; er kann untergeordnete, Enkel- und weiter nachfolgende treeitem-Knoten haben.

Jedes Element, das als Baumknoten dient, hat die Rolle treeitem, außer dem Wurzelbaumknoten, 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 Nachkommen von Tree-Elementen hat, hat er die Rolle treeitem und das Attribut aria-expanded; aria-expanded="false" ist gesetzt, wenn der Knoten geschlossen ist, aria-expanded="true" ist gesetzt, wenn der Knoten geöffnet ist.

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

Schließen Sie aria-expanded nicht auf Endknoten ein – diejenigen ohne Tree-Element-Kinder – da dies das Element fälschlicherweise als übergeordnetes Element für unterstützende Technologien beschreiben würde.

Alle Tree-Elemente sind in einem Element mit der Rolle tree enthalten oder werden von ihm besessen. Wenn es Tree-Elemente gibt, die nicht direkte Nachkommen des tree im Markup sind, fügen Sie aria-owns auf dem besitzenden Baum-Container hinzu, um Elemente einzuschließen, die keine DOM-Kinder des Containers sind. Diese nicht kindlich besessenen Elemente erscheinen in der Leseordnung 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 Leseordnung für unterstützende Technologien entspricht.

Wenn die vollständige Menge der verfügbaren Knoten aufgrund von dynamischem Laden nicht im DOM vorhanden ist, während der Benutzer den Fokus bewegt oder durch den Baum scrollt, hat jeder Knoten aria-level, aria-setsize und aria-posinset spezifiziert.

Dem tree muss ein zugänglicher Name zugewiesen werden. Entweder verweisen Sie auf ein sichtbares Etikett, referenziert mit aria-labelledby, oder spezifizieren Sie ein Etikett mit aria-label.

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

role="treeitem"

Ein Element in einem Baum.

role="group"

Eine erweiterbare Sammlung von Baumelementen.

aria-labelledby

Identifiziert das Element (oder die Elemente), das/die den tree etikettiert und den erforderlichen zugänglichen Namen bereitstellt, wenn ein sichtbares Etikett vorhanden ist. Verwenden Sie andernfalls aria-label.

aria-label

Definiert einen Zeichenfolgewert, der den tree etikettiert, wenn kein sichtbares Etikett vorhanden ist.

aria-orientation

Gibt an, ob die Baumausrichtung horizontal oder vertikal ist; standardmäßig auf vertical, wenn weggelassen.

aria-multiselectable

Wenn auf true gesetzt, zeigt dies an, dass der Benutzer mehr als ein Tree-Element aus den derzeit auswählbaren Nachkommen des Baums auswählen kann.

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

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

Es gibt zwei Interaktionsmodelle für Bäume zur Mehrfachauswahl: Obwohl Sie verlangen können, dass Benutzer beim Navigieren durch die Liste eine Modifikatortaste, wie Shift oder Strg, drücken, um den Auswahlstatus nicht zu verlieren, wird das Modell empfohlen, das nicht erfordert, dass der Benutzer eine Modifikatortaste gedrückt hält.

Empfohlenes Multi-User-Auswahlmodell

Alternatives Mehrfachauswahlmodell

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