Was ist der Accessibility Tree?
Der Accessibility Tree ist eine speziell aufbereitete Struktur, die aus dem Document Object Model (DOM) einer Webseite entsteht. Er enthält ausschließlich die Informationen, die für assistive Technologien wie Screenreader, Braillezeilen oder Sprachausgabe relevant sind. Die Inhalte im Accessibility Tree entscheiden darüber, welche Informationen für Nutzerinnen und Nutzer mit Behinderung zugänglich sind.
Warum ist der Accessibility Tree wichtig?
Für Personen, die mit einem Screenreader arbeiten, ist der Accessibility Tree das zentrale Element für die Interaktion mit digitalen Inhalten. Alles, was sich nicht im Tree befindet, ist für diese Menschen nicht erreichbar. Wenn beispielsweise ein Button nicht korrekt mit HTML ausgezeichnet ist oder keine zugängliche Beschriftung (z. B. via aria-label) hat, bleibt dieser Button für einen Screenreader-Nutzer unsichtbar.
Digitale Barrierefreiheit beginnt daher nicht erst beim Design oder bei der Farbwahl, sondern bei der korrekten semantischen Auszeichnung aller Bedienelemente.
Wie entsteht der Accessibility Tree?
Der Accessibility Tree wird vom Browser automatisch erstellt – und zwar auf Grundlage von:
- semantischen HTML-Elementen (
<button>,<h1>,<nav>,<form>, usw.) - Attributen aus dem ARIA-Standard (
role,aria-label,aria-hidden, usw.) - CSS-Informationen (z. B.
display: noneodervisibility: hidden, die Inhalte komplett aus dem Tree entfernen) - dynamischen DOM-Änderungen (z. B. AJAX, JavaScript-Interaktionen)
Die generierte Struktur wird von assistiven Technologien verwendet, um die Inhalte vorlesbar, navigierbar oder fühlbar zu machen.
Häufige Fehler im Zusammenhang mit dem Accessibility Tree
1. Nicht-semantische HTML-Nutzung
Ein häufiges Problem ist der Einsatz von generischen <div>– oder <span>-Elementen anstelle von semantischen Elementen wie <button> oder <a>. Diese erscheinen ohne zusätzliche ARIA-Rollen nicht im Accessibility Tree.
2. Fehlende Beschriftungen
Inhalte oder Bedienelemente, die keine aria-label-, aria-labelledby– oder textuelle Beschriftung haben, sind für den Tree nicht eindeutig verständlich.
3. Verborgene Inhalte durch CSS
Inhalte, die über display: none oder visibility: hidden ausgeblendet werden, sind vollständig aus dem Tree entfernt – auch wenn sie visuell noch über JavaScript sichtbar gemacht werden.
4. Dynamisch geladene Inhalte ohne Aktualisierung des Trees
Werden Inhalte nachträglich eingeblendet oder verändert, müssen diese auch dem Accessibility Tree korrekt zur Verfügung gestellt werden – z. B. durch ARIA Live-Regionen.
So lässt sich der Accessibility Tree testen
Die meisten modernen Browser bieten integrierte Werkzeuge, um den Accessibility Tree zu analysieren:
- Firefox Accessibility Inspector
Bestandteil der Entwickler-Tools, zeigt Rollen, Namen, Zustände und Beziehungen. - Google Chrome DevTools > Accessibility
Zeigt ebenfalls die Struktur, Namen und Rollen an. - NVDA + Accessibility Insights
In Kombination lassen sich Barrieren sichtbar machen, die im Tree falsch oder unvollständig abgebildet sind. - VoiceOver Rotor (macOS)
Ermöglicht die Navigation durch alle zugänglichen Elemente auf einer Seite.
Bedeutung für die digitale Barrierefreiheit
Der Accessibility Tree ist ein zentrales technisches Fundament der digitalen Barrierefreiheit. Nur wenn er korrekt aufgebaut ist, können Menschen mit Behinderungen auf Inhalte zugreifen. In den Web Content Accessibility Guidelines (WCAG), der BITV und der Norm EN 301 549 ist die saubere semantische Struktur nicht explizit als „Tree“ beschrieben, aber in nahezu allen Erfolgskriterien indirekt vorausgesetzt.
Barrierefreiheit ist kein rein visuelles Thema. Sie beginnt dort, wo Maschinen Inhalte strukturell verstehen – und dafür ist der Accessibility Tree essenziell.
