Was ist der Accessibility Tree? Die unsichtbare Struktur einer Website

Für Menschen, die beispielsweise einen Screenreader verwenden, ist eine andere Darstellung besonders wichtig: der Accessibility Tree.

Er beschreibt nicht in erster Linie, wie eine Website aussieht, sondern was ihre Elemente bedeuten und wie sie benutzt werden können.

Der Accessibility Tree ist auch im Zusammenhang mit Suchmaschinen- und KI-Optimierung wichtig. Bei der Analyse mit dem Lighthousetool von Google ist er ein Merkmal der Kategorie Agentic Browsing.

Was ist der Accessibility Tree?

Der Accessibility Tree – auf Deutsch etwa „Barrierefreiheitsbaum" – ist eine vom Browser erzeugte strukturierte Darstellung einer Website.

Dabei konzentriert sich der Browser auf Informationen, die für die Bedienung und das Verständnis der Website wichtig sind.

Aus einer komplexen Webseite kann beispielsweise vereinfacht folgende Struktur entstehen:

document

navigation "Hauptnavigation"
    link "Startseite"
    link "Leistungen"
    link "Kontakt"

main
    heading level 1 "TYPO3 Agentur Frankfurt"

    paragraph "Wir entwickeln ..."

    heading level 2 "Unsere Leistungen"

    link "TYPO3 Support"
    link "TYPO3 Updates"

    button "Beratung anfragen"

contentinfo
    link "Impressum"
    link "Datenschutz"

Viele Informationen über Layout, Farben oder Gestaltung spielen hier keine Rolle.

Stattdessen steht die Bedeutung der einzelnen Elemente im Mittelpunkt.

Vom HTML zum Accessibility Tree

Vereinfacht kann man sich den Weg so vorstellen:

Der Browser analysiert die Website und stellt relevante Informationen in einer Form bereit, die von assistiven Technologien genutzt werden kann.

Dafür sind insbesondere drei Informationen wichtig:

Rolle: Was ist das Element?

Name: Wie heißt das Element?

Zustand: In welchem Zustand befindet es sich?

Damit lässt sich eine Website nicht nur vorlesen. Nutzer können ihre Struktur verstehen und gezielt mit ihr interagieren.

Ein einfaches Beispiel

Nehmen wir einen normalen HTML-Button:

Der Browser erkennt anhand des HTML-Elements bereits:

Ein Screenreader kann deshalb beispielsweise „Schaltfläche, Kontakt aufnehmen" ausgeben.

Das ist ein gutes Beispiel dafür, warum semantisches HTML für Barrierefreiheit so wichtig ist.

Ein echtes <button>-Element besitzt bereits eine Bedeutung. Ein allgemeines <div> dagegen zunächst nicht.

Mehr dazu erklären wir in unserem Artikel „Semantisches HTML: Warum guter HTML-Code für Menschen und Maschinen wichtig ist".

Nicht jedes HTML-Element landet im Accessibility Tree

Der DOM – also die vom Browser erzeugte Dokumentstruktur einer Website – und der Accessibility Tree sind nicht identisch.

Eine Webseite kann beispielsweise zahlreiche <div>-Elemente enthalten, die lediglich für Layout und Gestaltung benötigt werden.

Solche Elemente besitzen möglicherweise keine eigenständige Bedeutung für einen Screenreader.

Der Accessibility Tree reduziert die Website deshalb auf die Informationen, die für assistive Technologien relevant sind.

Aus einer umfangreichen HTML-Struktur wird so eine wesentlich stärker auf Bedeutung und Bedienbarkeit ausgerichtete Darstellung.

Welche Rolle spielt ARIA?

Manchmal reicht die normale HTML-Semantik nicht aus.

Nehmen wir einen Button, der ein Menü öffnet:

Das ist ein Button mit dem Namen „Menü".

Er weiß aber nicht automatisch, ob das zugehörige Menü gerade geöffnet oder geschlossen ist.

Hier kann ARIA zusätzliche Informationen liefern:

Im Accessibility Tree kann dadurch zusätzlich der Zustand erscheinen:

Wird das Menü geöffnet, ändert die Anwendung den Wert auf:

ARIA ergänzt also Informationen, die anschließend über die Accessibility-Schnittstellen des Browsers für assistive Technologien verfügbar werden.

Wie das genau funktioniert, erklären wir ausführlicher in unserem Artikel „Was ist ARIA? Barrierefreie Websites einfach erklärt".

Warum ist der Accessibility Tree für Screenreader so wichtig?

Ein Screenreader soll eine Website nicht einfach von oben nach unten vorlesen.

Nutzer müssen sich auf einer Seite orientieren können. Sie können beispielsweise gezielt:

• von Überschrift zu Überschrift springen,
• Navigationen aufrufen,
• Links durchsuchen,
• Formulare bedienen,
• Buttons auswählen oder
• den Zustand interaktiver Elemente erkennen.

Dafür muss die Website technisch eindeutig beschreiben, was ihre einzelnen Elemente bedeuten.

Genau dabei spielt der Accessibility Tree eine zentrale Rolle.

Eine Website hat damit gewissermaßen zwei Ansichten

Vereinfacht könnte man sagen:

Ein sehender Besucher nimmt beispielsweise Folgendes wahr:

Die semantische Repräsentation enthält dagegen Informationen wie:

Beide beschreiben dieselbe Website – aber auf völlig unterschiedliche Weise.

Was passiert bei schlechtem HTML?

Probleme entstehen, wenn die sichtbare Darstellung und die technische Bedeutung auseinanderfallen.

Ein Entwickler könnte beispielsweise ein <div> so gestalten, dass es exakt wie ein Button aussieht und sich beim Anklicken auch wie ein Button verhält.

Für einen sehenden Nutzer ist das zunächst kaum zu erkennen.

Im Accessibility Tree fehlt möglicherweise jedoch die Information:

Das ist eine Schaltfläche.

Ähnliche Probleme können bei Navigationen, Formularen, Dialogfenstern, Akkordeons oder Tabs entstehen.

Deshalb beginnt gute Barrierefreiheit nicht erst bei einem Screenreader.

Sie beginnt bereits bei der HTML-Struktur einer Website.

Wie überprüfe ich den Accessibility Tree meiner Website in Chrome, Firefox und Safari?

Die modernen Browser bringen eigene Entwicklerwerkzeuge mit, mit denen sich die Accessibility-Informationen einer Website direkt untersuchen lassen. So kann man beispielsweise prüfen, ob ein vermeintlicher Button tatsächlich als Button erkannt wird, welchen Namen ein Link für einen Screenreader besitzt oder ob ein aufgeklapptes Menü seinen Zustand korrekt übermittelt.

Google Chrome

In Chrome öffnet man zunächst die Entwicklertools (DevTools), zum Beispiel per Rechtsklick auf ein Element und „Untersuchen" oder auf dem Mac mit ⌘ + ⌥ + I.

Anschließend:

1. Den Bereich Elements / Elemente öffnen.
2. Ein Element der Website auswählen.
3. Den Bereich Accessibility / Barrierefreiheit öffnen.
4. Dort lassen sich unter anderem die berechnete Rolle, der zugängliche Name, ARIA-Attribute und weitere Accessibility-Eigenschaften überprüfen.
5. Chrome bietet außerdem eine vollständige Accessibility-Tree-Ansicht, mit der die semantische Struktur der gesamten Seite durchsucht werden kann.

Bei aktuellen Chrome-Versionen ist die vollständige Accessibility-Tree-Ansicht direkt in den Elements-Werkzeugen integriert. Besonders interessant ist der Wechsel zwischen DOM und Accessibility Tree: So lässt sich unmittelbar vergleichen, welches HTML-Element welche semantische Information erzeugt.

Mozilla Firefox

Firefox besitzt einen besonders übersichtlichen Accessibility Inspector.

Die Entwicklerwerkzeuge lassen sich beispielsweise per Rechtsklick und „Element untersuchen" öffnen. Anschließend wählt man den Bereich Accessibility / Barrierefreiheit.

Firefox zeigt den Accessibility Tree als eigene Baumstruktur. Für die einzelnen Elemente werden unter anderem angezeigt:

• Rolle,
• Name,
• Zustand,
• Wert,
• Beziehungen zu anderen Elementen und
• relevante Accessibility-Attribute.

Praktisch ist auch die Möglichkeit, auf der Webseite direkt „Accessibility-Eigenschaften untersuchen" zu wählen. Firefox springt dann zum entsprechenden Element im Accessibility Tree.

Zusätzlich kann Firefox die Tab-Reihenfolge visualisieren. Damit lässt sich kontrollieren, in welcher Reihenfolge Links, Buttons und Formularfelder bei einer Bedienung mit der Tastatur erreicht werden.

Apple Safari

Auch Safari stellt Accessibility-Informationen über den Web Inspector bereit. Falls die Entwicklerwerkzeuge noch nicht aktiviert sind, können sie in Safari unter Einstellungen → Erweitert über die Funktionen für Webentwickler eingeblendet werden. Der Web Inspector lässt sich anschließend beispielsweise mit ⌥ + ⌘ + I öffnen.

Im Bereich Elements kann ein DOM-Element ausgewählt werden. In den Detailinformationen beziehungsweise im Node-Bereich zeigt Safari die zugehörigen Accessibility-Daten des ausgewählten Elements an.

Anders als Firefox präsentiert Safari die Accessibility-Prüfung stärker elementbezogen. Für eine schnelle Kontrolle ist das trotzdem sehr hilfreich: Man kann beispielsweise feststellen, welche Rolle und welchen zugänglichen Namen Safari für einen Button, Link oder ein Formularfeld ermittelt.

Zusätzlich bietet der Web Inspector Accessibility Audits, mit denen sich typische Probleme automatisiert untersuchen lassen.

Worauf sollte ich achten?

Für einen ersten Test muss man nicht jede technische Eigenschaft verstehen. Bei wichtigen Elementen reichen zunächst einige einfache Fragen:

• Wird eine Überschrift auch wirklich als Überschrift erkannt?
• Wird ein Button als Button erkannt?
• Besitzt der Button oder Link einen verständlichen Namen?
• Sind Navigation und Hauptinhalt als solche erkennbar?
• Haben Formularfelder verständliche Bezeichnungen?
• Werden Zustände wie „geöffnet", „geschlossen", „ausgewählt" oder „deaktiviert" korrekt übermittelt?
• Ist die Reihenfolge bei Tastaturbedienung logisch?

Gerade der Vergleich zwischen sichtbarer Website, DOM und Accessibility Tree macht viele Fehler sehr schnell verständlich.

Wichtig ist jedoch: Die Prüfung des Accessibility Trees ersetzt keinen vollständigen Barrierefreiheitstest. Eine Website sollte zusätzlich tatsächlich mit der Tastatur und – zumindest stichprobenartig – mit einem Screenreader getestet werden.

Was hat der Accessibility Tree mit Suchmaschinen zu tun?

Der Accessibility Tree ist in erster Linie eine technische Grundlage für Barrierefreiheit und assistive Technologien.

Er sollte deshalb nicht als SEO-Instrument verstanden werden.

Trotzdem gibt es eine wichtige Gemeinsamkeit:

Barrierefreiheit, Suchmaschinen und automatisierte Systeme profitieren häufig von eindeutig strukturierten Inhalten.

Eine saubere Überschriftenhierarchie, verständliche Linktexte, korrekt ausgezeichnete Formulare und semantisches HTML helfen dabei, die Bedeutung einer Webseite technisch klarer zu beschreiben.

Das ist einer der Gründe, warum sich technische Barrierefreiheit und eine qualitativ hochwertige Website-Entwicklung an vielen Stellen überschneiden.

Warum der Accessibility Tree für KI-Agenten interessant wird

Mit KI bekommt das Thema eine zusätzliche Dimension.

KI-Agenten sollen Webseiten zunehmend nicht nur lesen, sondern auch bedienen können.

Ein Agent könnte beispielsweise die Aufgabe erhalten:

Suche auf der Website nach TYPO3-Support und öffne das Kontaktformular.

Dafür muss er erkennen, welche Elemente Links, Buttons, Navigationen oder Eingabefelder sind.

Eine rein visuelle Analyse müsste beispielsweise erkennen:

Eine semantische Darstellung kann dagegen direkt Informationen liefern wie:

Das ist wesentlich eindeutiger.

Browserbasierte KI-Agenten können deshalb semantische Informationen und Accessibility-Schnittstellen nutzen, um Webseiten effizient zu verstehen und zu bedienen.

Das bedeutet allerdings nicht, dass jede KI beim Besuch einer Website automatisch den Accessibility Tree verwendet.

Und es bedeutet auch nicht, dass ein guter Accessibility Tree automatisch zu besseren Rankings in KI-Suchen führt.

Der Zusammenhang ist grundsätzlicher:

Eine Website, die ihre Inhalte und Funktionen technisch eindeutig beschreibt, lässt sich leichter automatisiert verstehen und bedienen.

Semantisches HTML, ARIA und Accessibility Tree gehören zusammen

Die drei Begriffe lassen sich gut voneinander abgrenzen:

Ein Beispiel:

HTML sagt: Das ist ein Button.

ARIA sagt zusätzlich: Der zugehörige Bereich ist geschlossen.

Der Accessibility Tree stellt diese Informationen in einer für assistive Technologien nutzbaren Form bereit.

Genau deshalb ergänzen sich diese drei Themen.

Was bedeutet das für TYPO3-Websites?

Bei TYPO3 entsteht ein großer Teil dieser technischen Struktur automatisch durch Templates, Content-Elemente und Extensions.

Eine technisch sauber entwickelte TYPO3-Website sollte deshalb unter anderem darauf achten, dass:

Fazit

Der Accessibility Tree ist für die meisten Besucher einer Website unsichtbar. Für Menschen, die assistive Technologien verwenden, ist er jedoch von großer Bedeutung.

Er stellt nicht das Aussehen einer Website in den Mittelpunkt, sondern deren Struktur, Bedeutung und Bedienbarkeit.

Damit zeigt der Accessibility Tree sehr anschaulich, warum moderne Webentwicklung mehr ist als gutes Design.

Eine gute Website muss nicht nur gut aussehen. Sie muss auch technisch verständlich sein.

Semantisches HTML schafft dafür die Grundlage. ARIA ergänzt wichtige Informationen. Der Accessibility Tree macht diese Semantik für assistive Technologien nutzbar.

Und in einer Webwelt, in der neben Menschen zunehmend auch automatisierte Systeme mit Websites interagieren, wird eine klare technische Semantik zusätzlich interessant.