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 von Webseiten oder Anwendungen, die speziell für assistive Technologien wie Screenreader entwickelt wurde.
Ausgehend vom Document Object Model (DOM) enthält er ausschließlich alle relevanten Informationen wie Name, Rolle, Zustände und Eigenschaften von Elementen, die für den barrierefreien Zugang zu Webseiten oder Anwendungen notwendig sind.
Inhaltsübersicht
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. Diese ist speziell auf die Bedürfnisse von assistiven Technologien ausgerichtet.
Dabei werden nicht relevante Elemente und Attribute, wie <div> oder <span>, die nur zum Styling eingesetzt werden, entfernt. Die verbleibenden Elemente werden hingegen mit wichtigen Informationen wie Rollen, Namen und Zuständen angereichert.
Der Accessibility Tree lässt sich ganz einfach innerhalb der Entwicklertools eines Browsers betrachten (siehe Abbildung). Dazu einfach mit der rechten Maustaste auf die Webseite klicken und dann > Untersuchen > Elemente und auf der rechten Seite „Zugänglichkeit“ auswählen.
Hier siehst du nun den Accessibility Tree – alternativ kannst du an dieser Stelle auch noch das Häkchen bei „Vollbild-Baumansicht für Barrierefreiheit aktivieren“ setzen – dann hast du eine deutlich bessere Übersicht deines Accessibility Tree.
Wichtig: Als Nutzer:in bzw. Entwickler:in gibt es keinen direkten Zugang zur Bearbeitung des Accessibility Trees. 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:
Korrekte Semantik:
Die Verwendung semantisch korrekter HTML-Elemente, wie <button>, <nav>, <header>, <footer>, und <article>, hilft, die Struktur und Funktion der Webseite klar zu definieren.
Klare Navigation:
Eine logische und vorhersehbare Strukturierung von Navigationselementen, Überschriften und Links ermöglicht eine intuitive Navigation innerhalb des Accessibility Trees.
Hier erfährst du noch mehr zu userfreundlichen Navigationen.
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“.
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 für verschiedenste Menschen. Während einige dieser Vorteile sehr offensichtlich sind, entdeckt man andere erst auf den zweiten Blick.
- Nutzer:innen können, unabhängig ihrer Fähigkeiten, auf alle Informationen und Funktionen deiner Webseite zugreifen.
- Generelle Verbesserung der Userfreundlichkeit & Accessibility: Ansprache eines breiteren Publikums.
- Alle rechtlichen Standards werden eingehalten.
- Die SEO-Performance wird positiv beeinflusst, indem die Seite ein strukturiertes und semantisch korrektes HTML aufweist.
- u. v. m.
Verwandte Artikel
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!
