tree

Wann verwenden

Für einen echten hierarchischen Browser: Dateisystem, Organigramm, tief verschachtelte Taxonomie. Kindelemente sind role="treeitem", bei Bedarf durch intermediate role="group"-Wrapper gruppiert.

Handelt es sich beim „Tree“ eigentlich um ein Navigationsmenü mit zwei oder drei Ebenen von Links, sollte role="tree" nicht verwendet werden. Stattdessen empfehlen sich <nav> mit verschachteltem <ul> und <a> — Tab und Eingabetaste entsprechen den Erwartungen der Nutzenden bei der Navigation; Pfeiltasten-Navigation nach Tree-Muster in einem Website-Menü ist ungewohnt und langsam.

Ein Tree MUSS einen barrierefreien Namen besitzen. aria-multiselectable="true" ist zu setzen, wenn mehrere Treeitems gleichzeitig ausgewählt werden können.

Tastatur- und Fokusvertrag

Gemäß dem APG-Treeview-Muster:

• Tab verschiebt den Fokus in den Tree auf das fokussierte (oder erste) Treeitem; ein weiterer Tab-Druck bewegt den Fokus heraus.
• Aufwärts-/Abwärtspfeil bewegen den Fokus zwischen sichtbaren Knoten und überspringen eingeklappte Kindelemente.
• Rechtspfeil: bei eingeklapptem Knoten aufklappen; bei aufgeklapptem Knoten zum ersten Kindelement wechseln.
• Linkspfeil: bei aufgeklapptem Knoten einklappen; bei eingeklapptem Knoten zum übergeordneten Element wechseln.
• Pos1 / Ende wechseln zum ersten bzw. letzten sichtbaren Knoten.
• Eingabetaste oder Leertaste wählt das aktuelle Treeitem aus.
• Typeahead: Tastatureingabe von Buchstaben springt zu passenden sichtbaren Knoten.
• Bei Multi-Select-Trees: Umschalt+Pfeil erweitert die zusammenhängende Auswahl; Strg/Cmd+Klick schaltet einzelne Auswahl um.

Zu verwenden ist ein Roving-Tabindex: Nur das aktuell fokussierte Treeitem hat tabindex="0".

Häufige Fehler

• Jedes Treeitem hat tabindex="0". Das Muster sieht einen einzigen Tab-Stop vor.
• Tree ohne barrierefreien Namen. Die Landmark-Navigation des Screenreaders hat nichts anzukündigen.
• Untergeordnete Treeitems im übergeordneten Element ohne umschließendes role="group". Screenreader können die Gruppe nicht als Einheit ankündigen.
• aria-expanded="false" auf Blatt-Treeitems — kündigt einen leeren einklappbaren Zustand an.
• Rechts-/Linkspfeil für das Wechseln zum nächsten bzw. vorherigen Geschwisterelement statt für Aufklappen/Einklappen.

Beispiel

<ul role="tree" aria-label="Project files">
  <li role="treeitem" aria-expanded="true" tabindex="0">
    src
    <ul role="group">
      <li role="treeitem" tabindex="-1">index.ts</li>
      <li role="treeitem" aria-expanded="false" tabindex="-1">
        components
        <ul role="group">
          <li role="treeitem" tabindex="-1">Button.tsx</li>
        </ul>
      </li>
    </ul>
  </li>
  <li role="treeitem" tabindex="-1">README.md</li>
</ul>