Wenn Sie Websites entwickeln, wird Ihnen das Document Object Model (DOM) natürlich ein Begriff sein. Entwickeln Sie aber eigene, komplexere Komponenten für Ihre Website, dann sollte Ihnen auch Das Accessibility Object Model (AOM oder auch Accessibility Tree genannt) bekannt sein. Schauen wir uns heute an was das ist und wie man ihn nutzt, um die Barrierefreiheit der eigenen Komponenten einzuschätzen.
Wozu braucht es einen eigenen Accessibility Tree
Der Accessibility Tree ist wichtig, um die Barrierefreiheit von Webseiten und Anwendungen sicherzustellen. Während der DOM-Baum die Struktur und den Inhalt einer Webseite beschreibt, ist der Accessibility Tree speziell darauf ausgelegt, Informationen bereitzustellen, die für assistive Technologien wie Screenreader, Spracherkennungssoftware oder Braillezeilen relevant sind. Er konzentriert sich also weniger auf die technisch notwendigen Details, die der Browser für die visuelle Darstellung braucht. Stattdessen enthält er Daten, die für die Nutzer relevant sind.
Vom HTML über den DOM-Baum zum Accessiblity Tree
Bei jedem Aufruf einer Website wird der HTML-Quelltext an den Browser gesendet. Dieser erstellt aus den Vorgaben den DOM-Baum. Dieser bildet dir Grundlage für alles Weitere. Auf Grundlage dieses Models wird die Seite im Browserfenster angezeigt, man spricht im Englischen vom sogenannten Rendering. Aus dem Document Object Model, wird dann das Accessibility Object Model, der Accessibility-Tree erstellt, welcher siene Informationen dann den Assistenzsystemen zur Verfügung stellt. Schauen wir uns einmal beide Bäume an.
Was ist das DOM
Das Document Object Model ist eine standardisierte Programmierschnittstelle, die von Webbrowsern bereitgestellt wird, um strukturierte Dokumente wie HTML- oder XML-Dokumente zu modellieren und zu manipulieren. Oder einfacher gesagt: es stellt das Dokument in Form eines baumartigen Modells dar, bei dem jeder Knoten einen Teil im Dokument repräsentiert.
Wir haben folgende Knoten:
- Element-Knoten: HTML-Tags wie
<div>
,<p>
,<a>
- Attribut-Knoten: Attribute und Eigenschaften der Elemente wie
id
oderclass
- Text-Knoten: Der Textinhalt von Elementen
Jeder Teil der Website lässt sich also als ein verschachtelter Baum solcher Knoten verstehen. Beginnend beim Stamm, dem HTML-Element verzweiget er sich immer weiter: zunächst vielleicht in die Hauptäste <header>, <main> und <footer>. Später entstehen kleinere Äste wie <section> oder <article> und am Ende die feinen Zweige: Überschriften, Absätze und Links.
Jede Änderung am DOM wirkt sich direkt auf die Darstellung der Seite im Browserfesnter aus. Am Einfachsten kann dieser über JavaScript verändert werden. Elemente werden hinzugefügt, verschoben oder entfernt, am häufigsten werden aber wohl Klassennamen geändert um verschiedene Zustände zu beschreiben.
Und was enthält nun der AOM-Baum?
Im AOM-Baum oder Accessibility Tree werden grundsätzlich dieselben Elemente gespeichert, eine Art Spiegelung des DOM-Baumes. Dieser filtert jedoch die Eigenschaften heraus, die speziell für Assistenzsysteme relevant sind und bereitet sie entsprechend auf.
Der AOM-Baum enthält:
Semantische Informationen
Zunächst beinhaltet jeder Knoten Informationen über die Rolle eines Elements, wie button
, link
, heading
, oder checkbox
. Diese Rollen werden aus HTML-Tags (z. B. <button>
), ARIA-Rollen (z. B. role="alert"
) oder impliziter Semantik abgeleitet.
Mehr Informationen zur Semantik von HTML finden Sie beispielsweise im Artikel über die richtige Auszeichnung von Überschriften.
Zugänglichkeitseigenschaften
Hinzu kommen Informationen über die Zugänglichkeit von Elementen. Diese werden vor allem aus ARIA-Attributen ermittelt.
aria-hidden
: Ob ein Element für assistive Technologien ausgeblendet ist.aria-live
: Gibt an, wie dynamische Inhalte von Screenreadern angesagt werden sollen.aria-expanded
: Gibt an, ob ein Element (z. B. ein Dropdown-Menü) geöffnet oder geschlossen ist.
Lesen Sie im Blog mehr über ARIA-Rollen und ARIA-Attribute oder Live-Regionen mit ARIA
Textinhalte
Inhalte von Textknoten, einschließlich derjenigen, die durch CSS-Pseudoelemente wie ::before
und ::after
hinzugefügt wurden, sofern diese für Barrierefreiheit relevant sind.
Interaktive Zustände
Informationen über den aktuellen Zustand eines Elements, z. B. ob eine Checkbox aktiviert ist (checked
), ob ein Button deaktiviert ist (disabled
), oder ob ein Element fokussiert ist.
Namensberechnungen
Der „Accessible Name“, den assistive Technologien verwenden, wird basierend auf Elementinhalt, Attributen (wie alt
, aria-label
, title
) und der Dokumentstruktur berechnet. Dadurch können Nutzer die einzelnen Elemente identifizieren.
Sorgen Sie also dafür, dass nicht jeder Link „mehr“ lautet und entscheiden Sie sich für barrierefreie Linktexte.
Den Accessibility Tree anschauen
Die meisten Browser bieten die Möglichkeit, sich den Accessibility Tree anzuschauen um die ermittelten Namen, Rollen und Attribute zu überprüfen. Hier eine kurze Anleitung, wie das in den verschiedenen Browsern funktioniert:
- Google Chrome, Safari und Edge: Klicken Sie mit der rechten Maustaste auf ein beliebiges Element und öffnen Sie mit „Untersuchen“ die Entwicklertools. Im Reiter „Elemente“ finden Sie anschließend ganz am Ende den Unterpunkt „Barrierefreiheit“ (in Chrome: „Zugänglichkeit“). Hier können Sie die Barrierefreiheits-Informationen ansehen.
- Firefox: Einzig im Firefox ist der Zugriff deutlich unkomplizierter. Nach einem Rechtsklick auf jedes beliebige Element steht schon im Kontextmenü die Option „Barrierefreiheit-Eigenschaften untersuchen“ zur Verfügung.
Barrierefreies Webdesign hat eine Liste weiterer Tools zur Überwachung des Accessibility Trees erstellt.
Fazit – Der Accessibility Tree als wertvolles Werkzeug
Barrierefreiheit ist ein zentraler Bestandteil moderner Webentwicklung und hilft dabei, Websites für alle nutzbar zu machen – unabhängig von Einschränkungen. Der Accessibility Tree spielt dabei eine Schlüsselrolle, weil er assistiven Technologien genau die Infos liefert, die sie brauchen.
Wer den Unterschied zwischen DOM- und Accessibility Tree versteht und gezielt mit semantischem HTML und ARIA-Attributen arbeitet, legt den Grundstein für barrierefreie Anwendungen. Die Entwicklertools moderner Browser bieten dabei praktische Unterstützung, um Schwachstellen zu finden und zu verbessern. So wird Barrierefreiheit zu einem festen Bestandteil im Entwicklungsprozess – und sorgt dafür, dass wirklich alle von einer Website profitieren können.