Der Accessibility Tree (zu Deutsch »Barrierefreiheitsbaum«) ist eine für Menschen nicht sichtbare Baumstruktur, die parallel zum Document Object Model (DOM) existiert. 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 wird vom Browser erzeugt, indem er die semantischen Informationen aus dem DOM extrahiert und sie in einer vereinfachten, 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 semantische Auszeichnung sollte idealerweise mit nativen HTML-Elementen erfolgen. Nur wenn diese nicht ausreichen, sollten ARIA-Rollen und -Attribute verwendet werden:
<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 Entwicklung von barrierefreien Websites sehr hilfreich ist.
