treeitem

Verwendung

Innerhalb eines role="tree" für jeden sichtbaren Knoten. Hat der Knoten Kinder, wird aria-expanded="true" oder "false" gesetzt; die Kinder-Treeitems werden in einem role="group" enthalten oder referenziert. Hat der Knoten keine Kinder, wird aria-expanded vollständig weggelassen (es darf NOT auf "false" an einem Blattknoten gesetzt werden — das kündigt einen „eingeklappten“ Zustand an, der sich nicht aufklappen lässt).

aria-level (tiefenindizierte Ebene, beginnend bei 1), aria-posinset (Position unter Geschwistern, beginnend bei 1) und aria-setsize (Gesamtanzahl der Geschwister) sind an jedem treeitem zu setzen, wenn die visuelle Verschachtelung nicht aus der DOM-Hierarchie ableitbar ist.

Für Navigation, die im Grunde nur „eine Liste von Links mit verschachtelten Unterlinks“ darstellt, ist <nav> mit verschachtelten <ul>- und <a>-Elementen die bessere Wahl. Die Treeview-Komponente empfiehlt sich ausschließlich für Erfahrungen, die einen Einzel-Tab-Stop-Hierarchiebrowser erfordern.

Tastatur- und Fokusvertrag

Gemäß dem APG-Treeview-Muster:

• Tab verschiebt den Fokus in den Baum, auf das aktuelle treeitem; ein weiteres Tab verschiebt den Fokus heraus.
• Pfeil auf/ab bewegt den Fokus zwischen sichtbaren Knoten (eingeklappte Kinder werden übersprungen).
• Pfeil rechts: ist der Knoten eingeklappt, wird er aufgeklappt; ist er aufgeklappt, wird zum ersten Kind gewechselt.
• Pfeil links: ist der Knoten aufgeklappt, wird er eingeklappt; ist er eingeklappt, wird zum übergeordneten Element gewechselt.
• Pos1/Ende wechseln zum ersten bzw. letzten sichtbaren Knoten.
• Eingabe oder Leertaste aktiviert (markiert) das aktuelle Element.
• Typeahead: Das Drücken eines Buchstabens bewegt den Fokus zum nächsten sichtbaren Knoten, dessen Name mit diesem Buchstaben beginnt.

Häufige Fehler

• aria-expanded="false" an einem Blattknoten — kündigt einen Phantomzustand als einklappbar an.
• Jedes treeitem erhält tabindex="0". Das Muster sieht einen einzigen Tab-Stop vor; nur das fokussierte Element trägt tabindex="0".
• Pfeil rechts/links wird für „nächstes Geschwister / vorheriges Geschwister“ statt für Aufklappen/Einklappen verwendet.
• Kinder-Treeitems werden direkt im <li> des Elternelements platziert, ohne ein umhüllendes role="group". Screenreader können die Gruppe dann nicht als Einheit ankündigen.
• Fehlendes aria-level, wenn das DOM flach ist (zum Beispiel wenn der Baum mit absoluter Positionierung gerendert wird).

Beispiel

<ul role="tree" aria-label="Files">
  <li role="treeitem" aria-expanded="true" tabindex="0">
    Documents
    <ul role="group">
      <li role="treeitem" tabindex="-1">Resume.pdf</li>
      <li role="treeitem" aria-expanded="false" tabindex="-1">
        Photos
        <ul role="group">
          <li role="treeitem" tabindex="-1">2025-summer.jpg</li>
        </ul>
      </li>
    </ul>
  </li>
  <li role="treeitem" tabindex="-1">Downloads</li>
</ul>