Der Accessibility Tree (»Barrierefreiheitsbaum«) ist eine für Menschen nicht sichtbare Baumstruktur, die der Browser parallel zum Document Object Model (DOM) aufbaut. Screenreader und andere assistive Technologien lesen nicht das HTML, sondern diesen Baum.
Jeder Knoten beschreibt ein Element mit vier Angaben:
Rolle: um welche Art Element es sich handelt (Schaltfläche, Überschrift, Link)
Name: wie es heißt (Beschriftung, Alternativtext,
aria-label)Zustand: in welchem Zustand es ist (aufgeklappt, ausgewählt, deaktiviert)
Wert: welchen Wert es trägt (Eingabetext, Position eines Reglers)
Genau diese Angaben verlangt das Erfolgskriterium 4.1.2 Name, Rolle, Wert (Level A).
Der Browser leitet den Baum aus dem DOM ab. Reine Layout-Container ohne semantische Bedeutung werden dabei in der Regel übergangen. Elemente mit display: none, visibility: hidden oder aria-hidden="true" erscheinen gar nicht erst.
Die Qualität des Baums entscheidet über die Zugänglichkeit der Seite. Grundlage sind native HTML-Elemente, die Rolle, Name und Zustand von sich aus mitbringen. ARIA ergänzt nur, was HTML nicht abbilden kann — falsch gesetzt verschlechtert es das Ergebnis:
<button aria-expanded="false" aria-controls="hauptmenue"><span aria-hidden="true">☰</span> Menü </button>
Einsehen lässt sich der Baum in den Entwicklungswerkzeugen der Browser: in Chrome und Edge unter »Elements« im Bereich »Accessibility«, in Firefox im eigenen Reiter »Barrierefreiheit«.
