Der Accessibility Tree

Der Accessibility Tree sorgt dafür, dass deine Webseite barrierefrei navigierbar ist und Inhalte für Nutzer:innen mit Assistenztechnologien, wie Screenreadern, optimal aufbereitet werden. Er ist entscheidend, um eine inklusive Nutzungserfahrung zu schaffen und sicherzustellen, dass deine Inhalte für alle zugänglich sind.

Definition

Accessibility Tree

Die vereinfachte und optimierte Darstellung einer Webseite oder Webanwendung, die speziell für assistive Technologien wie Screenreader konzipiert ist.

Abgeleitet aus dem Document Object Model (DOM) enthält er ausschließlich die Informationen, die für einen barrierefreien Zugang zu einer Webseite/Anwendung notwendig sind, wie Name, Rolle, Zustände und Eigenschaften von Elementen.

Inhaltsübersicht

    Mockup der Webwild-Webseite und der Entwickler-Tools mit Darstellung des Accessibility Trees

    Aufbau eines Accessibility Trees

    Der Accessibility Tree entsteht, indem der Browser, bzw. die jeweilige Accessibility-API eines Browsers, das Document Object Model (DOM) einer Webseite analysiert und daraus eine vereinfachte Version erstellt, die speziell auf die Bedürfnisse von assistiven Technologien ausgerichtet ist.

    Dabei werden nicht relevante Elemente und Attribute, wie <div> oder <span>, die nur zum Styling eingesetzt werden, entfernt und die verbleibenden Elemente mit zugänglichkeitsrelevanten Informationen wie Rollen, Namen und Zuständen angereichert.

    Der Accessibility Tree kann innerhalb der Entwicklertools eines Browsers betrachtet werden (siehe Abbildung). Dafür einfach Rechtsklick auf die Webseite > Untersuchen > Elemente und auf der rechten Seite „Zugänglichkeit“ anschauen. Oder du wählst das Häkchen an mit der Beschriftung „Vollbild-Baumansicht für Barrierefreiheit aktivieren“ – dann hast du nämlich eine deutlich bessere Übersicht über deinen Accessibility Tree.

    Accessibility Tree in den Google Chrome Entwicklertools

    Wichtig: Als Nutzer:in bzw. Entwickler:in gibt es keinen direkten Zugang zum Accessibility Tree. Die optimale Darstellung dessen lässt sich nur durch den korrekten Aufbau des HTMLs und der Verwendung passender ARIA-Attribute und -Rollen, beeinflussen.

    How-To: Weg zum Accessibility Tree

    Barrierefreiheit im Netz wird immer wichtiger. Doch nicht selten scheitert es an der richtigen Umsetzung.
    Deshalb hier die wichtigsten Tipps zur Erstellung eines Accessibility Trees:

    Icon

    Korrekte Semantik:
    Die Verwendung semantisch korrekter HTML-Elemente (wie <button>, <nav>, <header>, <footer>, und <article> usw.) hilft, die Struktur und Funktion der Webseite klar zu definieren.

    Icon

    Klare Navigation:
    Eine logische und vorhersehbare Strukturierung von Navigationselementen, Überschriften und Links ermöglicht eine intuitive Navigation innerhalb des Accessibility Trees.

    Icon

    ARIA-Rollen & -Attribute:
    Wenn Rollen und Attribute sinnvoll eingesetzt werden, liefern sie zusätzliche Informationen über das Verhalten oder den Zustand von Elementen, die nicht allein durch HTML ausgedrückt werden können. Beispiele hierfür sind die Attribute aria-hidden=“true/false“, aria-label=“[Beschreibung]“ oder die Rollen role=“button“, role=“navigation“, etc.

    Icon

    Zustands- und Eigenschaftsänderungen:
    Elemente, die ihre Eigenschaften ändern können, wie beispielsweise von „aktiviert“ zu „deaktiviert“ oder von „erweitert“ zu „kollabiert“ sollten ihre Änderungen immer deutlich im Accessibility Tree widerspiegeln. So können Screenreader & Co. den aktuellen Status stets korrekt wiedergeben.

    Warum du einen Accessibility Tree brauchst

    „Code like you give a damn.”
    ~ Léonie Watson | Director of TetraLogical

     

    Der Accessibility Tree bietet viele Vorteile, während einige davon sehr offensichtlich sind, entdeckt man andere erst auf den zweiten Blick. Hier finden sich einige davon:

    • Nutzer:innen können,unabhängig ihrer Fähigkeiten, auf Informationen und Funktionen zugreifen.
    • Ein breiteres Publikum wird angesprochen, indem die Nutzungsfreundlichkeit und Accessibility generell verbessert wird.
    • Alle rechtlichen Standards werden eingehalten.
    • Die SEO-Performance wird positiv beeinflusst, indem die Seite ein strukturiertes und semantisch korrektes HTML aufweist.
    • uvm.

    Noch nicht das Richtige gefunden?

    Willst du richtig tief in ein Thema eintauchen und mit einer Anleitung einen spezifischen Bereich selbst lernen? Dann findest du in unserem Webseiten Ratgeber genau die richtigen Inhalte für dich!

    Webseiten Ratgeber