TreeView: Accessibility

Zurück: Demo-Übersicht

Status: Basis [Live] (natives <details>/<summary> + aria-current), Erweiterungen für Selection/Checkbox [Live].

TreeView- Basiskontrakt bereits verstanden.

Native Semantik statt ARIA-Nachbau: <details>/<summary> liefert Auf-/Zuklappen, Tastatur (Enter/Leertaste auf <summary>) und die implizite ARIA-Rolle ohne eigenes JavaScript oder manuell gesetzte ARIA-Attribute — das ist der Grund, warum tree() bewusst dieses Element statt eines role="tree"-Nachbaus verwendet (dieselbe Native-zuerst-Haltung wie beim dataGrid()- Table-Markup).

Entfällt — konsolidierte Referenzseite, kein eigener Aufruf.

Für eine Barrierefreiheits-Abnahme: Abschnitt 6 für die Navigations-Grundform, Abschnitt 7 sobald Selection aktiviert ist.

Aktive Link-Knoten (.wk-tree__link--active mit href) tragen zusätzlich aria-current="page" — Browser/Screenreader erkennen „aktuelle Seite„ nicht von selbst, das Attribut macht die visuelle Aktiv-Markierung hörbar. Aktive Gruppenknoten ohne href (reine <span>-Beschriftungen) bleiben ohne das Attribut, denn aria-current beschreibt ein Navigationsziel, keinen Gruppentitel.

Mit aktivem Auswahlmodell (Selection/Checkboxes) ändert sich das ARIA-Set: das äußere <ul> trägt role="tree", jeder Knoten role="treeitem" + aria-level, Gruppenknoten aria-expanded; der Checkbox-Modus meldet Teilauswahl als aria-checked=„mixed“ (Client-Ableitung, scripts/treeview.js). Pfeil hoch/runter wandern zwischen sichtbaren Knoten, Pfeil rechts/links öffnen/ schließen Gruppen — dieselbe Mechanik wie bei dataGrid() Selection, auf eine Baumstruktur übertragen. Die reine Navigations-Grundform (Abschnitt 6) braucht dieses ARIA-Set nicht — es gilt nur, sobald tatsächlich Auswahl aktiv ist.

Entfällt — reine Referenzseite.

Keine über die Feature-Seiten hinaus.

Diese Seite ist der Accessibility-Überblick — Details in Abschnitt 6/7.

Symptom: Screenreader kündigt die aktuelle Seite im Baum nicht an.

Ursache: eine ältere Plugin-Version ohne dieses Attribut, oder ein Knoten ohne href (dann korrekt kein aria-current, s. Abschnitt 6).

Lösung: Plugin-Version prüfen; bei einem echten Link-Knoten active ⇒ true setzen.

• Demo-Übersicht — alle Kategorien
• DataGrid: Accessibility — verwandtes Roving-Tabindex-Muster