Accessibility Tree (Barrierefreiheitsbaum)

Der Accessibility Tree (Barrierefreiheitsbaum) ist eine vereinfachte Parallelstruktur zum DOM, die der Browser erstellt und über Schnittstellen des Betriebssystems (z. B. UI Automation, IAccessible2, NSAccessibility, AT-SPI) an assistive Technologien weitergibt. Jeder Knoten enthält Informationen wie Name, Rolle, Zustand (z. B. aufgeklappt, ausgewählt) und Wert.

Was den Accessibility Tree beeinflusst

• HTML-Semantik: native Elemente bringen Rollen mit
• ARIA: role, aria-label, aria-expanded, aria-describedby u. a.
• CSS: display:none und visibility:hidden entfernen Elemente; manche display-Werte verändern Tabellen- oder Listensemantik
• aria-hidden="true": entfernt Elemente bewusst
• Zugänglicher Name: berechnet aus Inhalt, label, alt, aria-labelledby und aria-label

Accessibility Tree prüfen

In Chrome DevTools unter „Elements › Accessibility“ (inkl. vollständiger Baumansicht), in Firefox im Barrierefreiheitsinspektor. So sehen Sie, was ein Screenreader tatsächlich ausgeben würde.

Häufige Fragen

Warum sagt der Screenreader etwas anderes, als auf dem Bildschirm steht?

Weil er den Accessibility Tree liest. Ein abweichendes aria-label oder versteckter Text verändert den zugänglichen Namen.

Nutzen auch KI-Agenten den Accessibility Tree?

Ja, viele Browser-Automatisierungen und KI-Agenten verwenden ihn, um Seiten zu verstehen und zu bedienen – barrierefreie Seiten sind daher auch für Agenten leichter nutzbar.

Verwandte Begriffe: Rolle, ARIA, Semantisches HTML, Robust