ARIA: tree-Rolle

Beschreibung

Ein tree-Widget ist eine hierarchische Liste mit über- und untergeordneten Knoten, die sich auf- und zuklappen lassen. Jedes Element der Hierarchie kann untergeordnete Tree-Elemente haben, die mit role="treeitem" gekennzeichnet sind. Tree-Elemente mit untergeordneten Elementen können aufgeklappt werden, um diese anzuzeigen, und zugeklappt werden, um sie auszublenden.

Ein Beispiel für einen tree ist eine Benutzeroberfläche zur Auswahl von Dateisystemelementen: eine Baumansicht, die Ordner und Dateien anzeigt. Ordnerelemente können aufgeklappt werden, um den Inhalt des Ordners anzuzeigen – Dateien, Ordner oder beides – und zugeklappt werden, um ihn auszublenden.

Die Navigation in ARIA-Baumansichten erfolgt hauptsächlich mit den Pfeiltasten der Tastatur statt mit der Tab-Taste. Diese Art der Navigation ist für die meisten Browserinhalte unüblich, bei nativen Anwendungen jedoch normal und zu erwarten. Prüfen Sie daher vor dem Erstellen einer Baumansicht, ob sich die benötigte Funktionalität auf andere Weise umsetzen lässt.

Weitere Informationen zur Auszeichnung einzelner Baumknoten finden Sie unter treeitem.

Baumansichten mit Einfach- und Mehrfachauswahl

Baumansichten können eine Einfachauswahl ermöglichen, bei der Benutzer nur ein Element für eine Aktion auswählen, oder eine Mehrfachauswahl, bei der sie mehrere Elemente für eine Aktion auswählen können. Bei Baumansichten mit Mehrfachauswahl ist aria-multiselectable für den tree auf true gesetzt. Andernfalls ist aria-multiselectable entweder auf false gesetzt oder der Standardwert false gilt implizit. In beiden Fällen muss der Fokus für alle Nachfahren der Baumansicht verwaltet werden, damit sie per Tastatur zugänglich sind.

Bei manchen Implementierungen einer Baumansicht mit Einfachauswahl ist das fokussierte Element zugleich ausgewählt. Dies wird als „Auswahl folgt dem Fokus“ bezeichnet. Wenn eine solche Baumansicht den Fokus erhält und zuvor keines ihrer Elemente ausgewählt war, wird der Fokus auf den ersten Knoten gesetzt. War zuvor ein Tree-Element ausgewählt, wird der Fokus auf dieses Element gesetzt.

Wenn eine Baumansicht mit Mehrfachauswahl den Fokus erhält und zuvor keines ihrer Elemente ausgewählt war, wird der Fokus auf das erste Tree-Element gesetzt. Waren zuvor ein oder mehrere Tree-Elemente ausgewählt, wird der Fokus auf den ersten ausgewählten Knoten gesetzt.

Bei Baumansichten mit Mehrfachauswahl ist der Auswahlzustand stets unabhängig vom Fokus. In einer typischen Dateisystemnavigation können Benutzer beispielsweise den Fokus bewegen, um beliebig viele Dateien für eine Aktion wie Kopieren oder Verschieben auszuwählen. Die visuelle Gestaltung sollte deutlich machen, welche Elemente ausgewählt sind und welches Element den Fokus hat.

Baumhierarchie

In einer Baumansicht ist das tree-Element der Container für die Hierarchie der treeitem-Knoten. Jedes Element, das als Baumknoten dient, hat die Rolle treeitem. Tree-Elemente auf der obersten Ebene sind Wurzelknoten; sie können untergeordnete Knoten, Enkelknoten und weitere Nachfahren haben.

Position und Vorhandensein im DOM

Alle Tree-Elemente sind in einem Element mit der Rolle tree enthalten oder diesem zugeordnet. Wenn Wurzelknoten im DOM nicht im tree enthalten sind, verwenden Sie aria-owns am zugehörigen Tree-Container, um auf sie zu verweisen. Diese zugeordneten Elemente, die keine DOM-Nachfahren sind, erscheinen in der Lesereihenfolge nach den Tree-Elementen, die DOM-Nachfahren sind, und untereinander in der Reihenfolge ihrer Referenzierung. Skripte, die den Fokus verwalten, müssen sicherstellen, dass die visuelle Fokusreihenfolge mit dieser Lesereihenfolge für Hilfstechnologien übereinstimmt.

Zugänglicher Name

Der tree muss einen zugänglichen Namen erhalten. Verweisen Sie entweder mit aria-labelledby auf eine sichtbare Beschriftung oder geben Sie mit aria-label eine Beschriftung an.

Ausrichtung der Baumansicht

Elemente mit der Rolle tree haben implizit den Wert vertical für aria-orientation. Wenn das Tree-Element horizontal ausgerichtet ist, geben Sie aria-orientation="horizontal" an.

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

role="treeitem"

Ein Element in einer Baumansicht.

role="group"

Eine aufklappbare Sammlung von Tree-Elementen.

aria-labelledby

Kennzeichnet das Element oder die Elemente, die den tree beschriften und bei vorhandener sichtbarer Beschriftung den erforderlichen zugänglichen Namen bereitstellen. Verwenden Sie andernfalls aria-label.

aria-label

Definiert eine Zeichenfolge, die den tree beschriftet, wenn keine sichtbare Beschriftung vorhanden ist.

aria-orientation

Gibt an, ob die Baumansicht horizontal oder vertikal ausgerichtet ist; wird die Eigenschaft weggelassen, gilt standardmäßig vertical.

aria-multiselectable

Gibt bei einem Wert von true an, dass Benutzer unter den aktuell auswählbaren Nachfahren der Baumansicht mehr als ein Tree-Element auswählen können.

Tastaturinteraktionen

Für einen vertikal ausgerichteten tree, die Standardausrichtung, gelten folgende Tastaturinteraktionen:

* Die Navigation durch Eingabe von Zeichen wird für alle Baumansichten empfohlen, insbesondere für Baumansichten mit mehr als sieben Wurzelknoten.

Tastaturinteraktionen bei Mehrfachauswahl

Für Baumansichten mit Mehrfachauswahl gibt es zwei Interaktionsmodelle: Sie können verlangen, dass Benutzer beim Navigieren durch die Liste eine Modifikatortaste wie Umschalt oder Strg gedrückt halten, damit bestehende Auswahlzustände erhalten bleiben. Empfohlen wird jedoch das Modell, bei dem keine Modifikatortaste gedrückt gehalten werden muss.

Empfohlenes Modell für die Mehrfachauswahl

Alternatives Modell für die Mehrfachauswahl

Das alternative Modell für die Mehrfachauswahl verwendet Modifikatortasten: Wird der Fokus verschoben, ohne eine Modifikatortaste wie Umschalt oder Strg gedrückt zu halten, werden alle ausgewählten Knoten außer dem fokussierten Knoten abgewählt.

Spezifikationen