Baumstruktur

Synonyme: Hierarchische Liste, Baum, Baumansicht, Strukturansicht, Tree, Treeview

Siehe auch: Auswahlliste, Mehrfach-Auswahlliste, Hierarchische Tabelle, Menü

Baumstrukturen ermöglichen die Darstellung und Bedienung hierarchisch strukturierter Listen (siehe DIN EN ISO 9241-161: 8.17). Die verschachtelten Listen können ein- und ausgeblendet werden. Ein Schalter mit Indikator bei den Listeneinträgen zeigt an, ob die untergeordnete Liste ein- oder ausgeblendet ist. Baumstrukturen können zu unterschiedlichen Zwecken verwendet werden, bspw.:

• Auswahl eines oder mehrerer Listeneinträge innerhalb eines Formulars (wie bei einer Auswahlliste oder Mehrfach-Auswahlliste),
• Navigation (wie bei einer Linkliste oder einem Menü),
• Anzeige von Daten (wie bei einer Liste).

Hinweis 1: Bei Baumstrukturen mit der Mehrfachauswahl sollen darüber hinaus die Tastaturbedienung für die Mehrfachauswahl implementiert werden, wie sie bei der Mehrfach-Auswahlliste beschrieben ist.
Hinweis 2: Die Tastaturbedienung der Baumstrukturen kann je nach verwendeter Programmiersprache oder Framework vom hier beschriebenen Standard abweichen (z. B. Ein- und Ausblenden der untergeordneten Listen mit PLUS und MINUS). Die abweichende Tastaturbedienung sollte in der Anwendung und Hilfe beschrieben.

Hinweis: Bei Baumstrukturen mit der Mehrfachauswahl sollen darüber hinaus die Zeigeinstrumentbedienung für die Mehrfachauswahl implementiert werden, wie sie bei der Mehrfach-Auswahlliste beschrieben ist.

Beim Fokussieren der Baumstruktur:

• JAWS: [Beschriftung] Strukturansicht [Listeneintrag] [ | offen | geschlossen] [Position] von [Anzahl] [Hinweis zur Navigation und Bedienung mit den Pfeiltasten]
• NVDA: [Beschriftung] Baumansicht [Listeneintrag] [ | erweitert | reduziert] [Position] von [Anzahl] Ebene [Zahl]
• Windows Sprachausgabe: [Beschriftung] Struktur [Listeneintrag] [Position] von [Anzahl] Ebene [Zahl] [ | erweitert | ausgeblendet]

Bei der Pfeiltastennavigation durch die Baumstruktur:

• JAWS:
  • Beim Wechseln der Ebene: Ebene [Zahl] [Listeneintrag] [ | offen | geschlossen] [Position] von [Anzahl]
  • Innerhalb der gleichen Ebene: [Listeneintrag] [ | offen | geschlossen]
• NVDA:
  • Beim Wechseln der Ebene: Ebene [Zahl] [Listeneintrag] [ | erweitert | reduziert] [Position] von [Anzahl]
  • Innerhalb der gleichen Ebene: [Listeneintrag] [ | erweitert | reduziert] [Position] von [Anzahl] Ebene [Zahl]
• Windows Sprachausgabe: [Listeneintrag] [Position] von [Anzahl] Ebene [Zahl] [ | erweitert | ausgeblendet]

Beim Lesen mit dem virtuellen Cursor:

• JAWS:
  • ohne gewähltes Element: [Beschriftung] Strukturansicht
  • mit gewähltem Element: [Beschriftung] Strukturelement [Listeneintrag] [ | erweitert | reduziert] [Position] von [Anzahl]
• NVDA: [Beschriftung] Baumansicht [ | erweitert | reduziert] Ebene [Zahl] [Listeneintrag]
• Windows Sprachausgabe: [Beschriftung] Struktur [Position] von [Anzahl] Ebene [Zahl] [ | erweitert | ausgeblendet] [Listeneintrag]

Hinweise:

• JAWS gibt beim Lesen mit dem virtuellen Cursor nur die gewählten Elemente aus (d. h. Elemente, die z. B. mit tabindex=0 oder aria-selected=true ausgezeichnet sind).
• NVDA gibt beim Lesen mit dem virtuellen Cursor den ersten Listeneintrag sowie alle sichtbaren verschachtelten Listeneinträge des ersten Listeneintrags aus, nicht jedoch den oder die gewählten Listeneinträge.
• Die Windows Sprachausgabe gibt beim Lesen mit dem virtuellen Cursor alle sichtbaren Listeneinträge aus.
• Die Windows-Sprachausgabe gibt aufgrund des impliziten bzw. expliziten aria-level bei jedem Listeneintrag fälschlicherweise „Überschriftenebene [Zahl]“ aus.

In HTML existiert kein Element für Baumstrukturen. Stattdessen kann Folgendes verwendet werden:

• verschachtelte Listen (mit den Elementen <ul>, <li>) mit Schaltern, die zum Ein- und Ausblenden untergeordneter Listeneinträge dienen und die mit der TAB-Taste den Fokus erhalten oder
• Nutzung der entsprechenden ARIA-Rollen.

Bei Baumstrukturen sollte Folgendes beachtet werden:

• Die Baumstruktur wird mit role=tree ausgezeichnet und enthält die Listeneinträge, die mit role=treeitem ausgezeichnet werden.
• Die verschachtelten Listeneinträge werden innerhalb eines Elements, welches mit role=group ausgezeichnet wird, gruppiert. Die Gruppe wiederum befindet sich innerhalb des übergeordneten Listeneintrags, der mit role=treeitem ausgezeichnet ist.
• Der Status der Listeneinträge (geöffnet oder geschlossen) wird mit aria-expanded übermittelt.
• Der aktuelle Listeneintrag wird mit aria-selected=true, alle anderen mit aria-selected=false ausgezeichnet.
• Listeneinträge können zusätzlich mit aria-checked als aktiviert bzw. nicht aktiviert ausgezeichnet werden, sofern die Baumstruktur diese Funktionalität anbietet (z. B. visuell durch Checkboxen bei den Listeneinträgen). Sofern mit aria-checked eine Mehrfach-Auswahl der Listeneinträge möglich ist, wird dies per aria-multiselectable=true übermittelt.
• Die Beschriftung der Baumstruktur kann per aria-label oder aria-labelledby erfolgen. Die Beschriftung der Listeneinträge sollte per Textinhalt erfolgen. Die Gruppen werden nicht beschriftet.
• Bei der Navigation durch die Listeneinträge der Baumstruktur müssen diese entweder tatsächlich den Fokus erhalten oder es wird per aria-activedescendant auf den gewählten Listeneintrag verwiesen. Die erste Variante ist zu bevorzugen.
• Die Baumstruktur darf außer den Gruppen und Listeneinträgen keine anderen Elemente enthalten.
• Die Baumstruktur kann mit aria-required als Pflichtfeld und mit aria-disabled als deaktiviert ausgezeichnet werden.
• Die Darstellung der Baumstruktur sollte im Hochkontrast-Modus von Windows überprüft werden. So sollten z. B. die Icons, die den Status der Listeneinträge übermitteln, gut erkennbar sein.
• Die sichtbaren Listeneinträge und die programmatisch fokussierten Elemente sollten die gleiche Position und Größe besitzen.

Weitere Informationen: tree role - Accessible Rich Internet Applications (WAI-ARIA) 1.2 (w3.org) (Externer Link), treeitem role - Accessible Rich Internet Applications (WAI-ARIA) 1.2 (w3.org) (Externer Link), Tree View Pattern | APG | WAI | W3C

Informationen zu diesem Artikel

Datum:

04.07.2023

Lizenz:

CC-BY-SA 4.0