Der Accessibility Tree (Barrierefreiheitsbaum) ist die parallele Datenstruktur, die der Browser aus dem DOM ableitet und die assistive Technologien auslesen. Screenreader nehmen eine Seite über diesen Baum wahr, nicht über das visuelle Layout. Jeder Knoten trägt Informationen zu Name, Rolle und Wert, bestimmt durch semantisches HTML und ARIA-Attribute. Mit display:none oder aria-hidden verborgene Elemente werden vollständig aus dem Baum entfernt.
Beim Verarbeiten einer Seite erzeugt der Browser zwei Strukturen: den Render-Baum, der das sichtbare Layout bestimmt, und den Accessibility Tree, der assistiven Technologien bereitgestellt wird. Letzterer ist eine vereinfachte Projektion des DOM: Wrapper-Divs mit rein visuellem Zweck gelangen nicht in den Baum, bedeutungstragende Elemente werden mit drei Kerninformationen repräsentiert. Name (wie das Element angesagt wird, etwa die Beschriftung eines Buttons), Rolle (was das Element ist, etwa Button, Link oder Überschrift) und Wert (der aktuelle Inhalt, etwa die Zahl eines Schiebereglers). Wenn ein Screenreader 'Senden, Schaltfläche' sagt, liest er dieses Tripel.
Die erste Kraft, die den Baum formt, ist semantisches HTML: Ein button-Element erhält seine Rolle automatisch, ein mit label verbundenes Formularfeld seinen Namen. ARIA-Attribute sind die zweite Schicht: aria-label ändert den Namen, das role-Attribut definiert die Rolle neu, Zustände wie aria-expanded werden dem Knoten hinzugefügt. Genau hier liegt die Gefahr von falschem ARIA: Fehlerhafte Informationen im Baum beschreiben dem Screenreader eine Oberfläche, die es nicht gibt. Das Verbergen wirkt in zwei Richtungen: display:none und visibility:hidden blenden ein Element visuell aus und entfernen es aus dem Baum, während aria-hidden='true' es nur aus dem Baum nimmt, obwohl es sichtbar bleibt. Die Entwicklertools der Browser zeigen den Baum Knoten für Knoten; ihn zu untersuchen ist der schnellste Weg zu verstehen, wie eine Komponente angesagt wird.
Häufig gestellte Fragen
Wie kann ich den Accessibility Tree einsehen?
Moderne Browser bieten in ihren Entwicklertools eine eingebaute Ansicht: In Chrome zeigt der Accessibility-Tab im Elements-Panel den Knoten des ausgewählten Elements mit berechnetem Namen und Rolle; auch eine Gesamtansicht des Baums lässt sich aktivieren. In Firefox liefert das Accessibility-Panel ähnliche Informationen. Statt zu raten, wie ein Screenreader eine Komponente ansagt, ist der Blick auf ihr Gegenstück im Baum immer verlässlicher.
Was ist der Unterschied zwischen aria-hidden und display:none?
display:none entfernt ein Element aus dem visuellen Layout und aus dem Accessibility Tree zugleich: Niemand sieht es, und kein Screenreader kann es ansagen. aria-hidden='true' entfernt das Element nur aus dem Baum: Sehende Nutzer sehen es weiterhin, während assistive Technologien es ignorieren. Deshalb sollte aria-hidden nur bei dekorativen oder sich wiederholenden Inhalten eingesetzt und niemals auf interaktive oder informationstragende Elemente angewendet werden.
Dieser Inhalt dient nur zur Information und stellt keine Rechtsberatung dar.