Der Accessibility Tree (zu Deutsch »Barrierefreiheitsbaum«) ist eine für Menschen nicht sichtbare Baumstruktur, die parallel zum Document Object Model (DOM) existiert und grundlegend für die barrierefreie Nutzung von Webseiten ist. Diese Struktur wird von Screenreadern und anderen assistiven Technologien genutzt, um Webinhalte für Menschen mit Einschränkungen zugänglich zu machen.
Der Accessibility Tree entsteht, indem der Browser die semantischen Informationen aus dem DOM extrahiert und in einer simplifizierten, hierarchischen Struktur darstellt. Beispielsweise werden verschachtelte <div>-Elemente, die nur dem Layout dienen, im Accessibility Tree nicht berücksichtigt, während semantisch bedeutsame Elemente wie Überschriften, Listen oder Formulare mit ihren jeweiligen Rollen und Eigenschaften abgebildet werden. Die korrekte semantische Auszeichnung von HTML-Elementen ist dabei essentiell. Entweder mit ARIA-Landmark oder idealerweise mit nativen HTML-Element:
<button aria-pressed="false" aria-label="Menü öffnen">☰</button>
Die Qualität des Accessibility Trees – und damit die Zugänglichkeit der Webseite – hängt maßgeblich von der korrekten Verwendung semantischer HTML-Elemente und ARIA-Attribute ab. Moderne Browser bieten in ihren Entwicklungswerkzeugen häufig die Möglichkeit, den Accessibility Tree zu inspizieren, was bei der barrierefreien Entwicklung sehr hilfreich ist.
