Barrierefreiheitsbaum
Die Grundlage für den Barrierefreiheitsbaum pflanzt jeder Browser - immer.
Der sogenannte Barrierefreiheitsbaum (Accessibility Tree) ist eine Darstellung der Dokumentelemente einer HTML-Seite in Form eines Baums, der auf dem DOM (Document Object Model) basiert. Durch diese Darstellungsform wissen unterstützende Technologien wie Bildschirmleseprogramme, was auf der Seite vorhanden ist und was dort interagiert.
Wie wird ein Barrierefreiheitsbaum erstellt?
HTML-Elemente haben den größten Einfluss, gefolgt von CSS-Anweisungen und JavaScript-Code in geringerem Maße auf den Barrierefreiheitsbaum. Jedoch spiegelt dieser nicht das gesamte DOM-Baummodell wider. So werden HTML-Elemente mit CSS-Eigenschaften wie display: none, visibility: hidden, dem Attribut hidden oder dekorative <div>-Elemente ohne Textinhalt nicht im Barrierefreiheitsbaum erfasst.
Barrierefreiheitsbäume werden parallel zum DOM-Baum vom verwendeten Browser erstellt und können je nach Browser unterschiedlich aufgebaut sein. Der Browser warten darauf, dass die Seite vollständig gerendert wird, bevor entschieden wird, welche Informationen in den Barrierefreiheitsbaum aufgenommen werden. Neben Informationen zu semantischen Tags können darin beispielsweise auch Inhalte von Pseudo-Elementen ::before und ::after sowie zusätzliche Markierungen für unterstützende Technologien enthalten sein.
Unterstützende Technologien interagieren nicht direkt mit den Bäumen, sondern über einen Vermittler - die Barrierefreiheits-API (Accessibility API) des Betriebssystems des Benutzers.
Zugänglichkeitsobjekte gelangen in den Baum, wenn eines der beiden Ereignisse eintritt:
- Das Element, sein Inhalt, seine Eigenschaften und Beziehungen zu anderen Elementen auf der Seite sind wichtig für unterstützende Technologien.
- Ein zugängliches Ereignis wurde ausgelöst - der Benutzer betritt die Website mit einem Bildschirmleser, einer Bildschirmlupe o.ä.
Zugänglichkeitsobjekte - die "Objekte der Barrierefreiheit”
Die meisten semantischen Tags haben standardmäßig die erforderlichen Rollen, Namen und Zustände bereits zugewiesen. Jedoch können sie explizit mit Hilfe von ARIA (Accessible Rich Internet Applications) festgelegt und geändert werden. ARIA ist eine unterstützende Technik zur Schaffung von zugänglicherem Inhalt für Bildschirmleser und andere unterstützende Technologien. Es erweitert die Möglichkeiten von HTML durch spezielle Attribute und Rollen.
Eine der Hauptregeln bei der Verwendung von ARIA ist paradoxerweise, ARIA selbst möglichst zu vermeiden. Es sollte nur dann eingesetzt werden, wenn die Möglichkeiten von HTML nicht ausreichen. Dies trifft meistens für komplexe interaktive Elemente wie Tabs, Dropdown-Listen, modale Fenster oder Fehlerbenachrichtigungen zu. ARIA deklariert in solchen Fällen das Verhalten des interaktiven Elements verständlich und vorhersehbar.
Rollen
Rollen beschreiben, um welchen Objekttyp es sich handelt und ob damit interagiert werden kann. Es gibt eingebaute (voreingestellte) und explizite Rollen. Eingebaute Rollen sind standardmäßig bei semantischen Tags vorhanden. Zum Beispiel hat ein Link-Tag <a> mit dem Attribut href die Rolle "Link".
<a href="/cozy-page/">Gemütliche Seite</a>Selbst für die Tags <span> und <div> ist standardmäßig die Rolle "generic" vorgesehen, welches aber zu unpräzise ist und den Tags somit nicht die benötigte Semantik verleiht! 🤯
Explizite Rollen werden mit ARIA festgelegt. Zum Beispiel kann das <span>-Element (HTML-Element ohne semantische Bedeutung, welches nur zur abweichenden Formatierung von Textbereiche dient) mit dem Attribut role="link", CSS und JavaScript problemlos in einen Link umgewandelt werden.
<span role="link">Gemütliche Seite</span>In der Praxis ist es jedoch besser, dies zu vermeiden und die vorgesehenen HTML-Funktionen dafür zu nutzen. Dann ist es nicht notwendig, ein Skript zu schreiben, um <span> in einen echten Link mit allen erforderlichen Eigenschaften und Verhaltensweisen zu verwandeln.
Name
Ein weiterer Begriff dafür ist "zugänglicher Name" (accessible name). Einfach ausgedrückt handelt es sich dabei um die Beschriftung des Zugänglichkeitsobjekts. Namen helfen dabei zu verstehen, um welches Element es sich handelt und welchen Zweck es hat. Normalerweise werden sie bei Fokussierung durch einen Screenreader vorgelesen und stammen aus dem Textinhalt der Tags oder Attribute.
Wir schauen uns das Beispiel mit dem Link hierzu noch einmal an. In diesem Fall wird der Name aus dem Text zwischen den öffnenden und schließenden Tags genommen: „Gemütliche Seite“.
<a href="/cozy-page/">Gemütliche Seite</a>Mit zusätzlichen Feldern im HTML-Element ist alles noch einfacher. Ihr Name wird aus dem <label>-Tag genommen, wenn es mit dem Feld per for-Attribut verbunden ist. In diesem Beispiel lautet der Name „Lieblings-Pokemon“.
<label for="pokemon">Lieblings-Pokemon:</label>
<input type="text" id="pokemon">Wenn ein <button> keinen Text hat, werden Nutzer von unterstützenden Technologien leidglich erfahren, dass es sich um eine Schaltfläche handelt jedoch welcher Inhalt hinterlegt ist.
<button type="button"></button>In so einem Fall können Namen mit den Attributen aria-label und aria-labelledby hinzugefügt werden. Zum Beispiel könnte der Name für diesen Button mit einem Symbol im Inneren "Kompliment machen" sein.
<button aria-label="Kompliment machen">
<!-- Symbol -->
</button>Die Methoden zur Bereitstellung von Namen weisen verschiedene Merkmale und Prioritäten auf. Weitere Informationen dazu finden Sie in der Spezifikation Accessible Name and Description Computation 1.1. vom W3C-Konsortium.
Description
Andere Bezeichnungen für die Description sind "zugängliche Beschreibung" (accessible description) oder "Hilfstext" (Helfertext). Dies ist eine Ergänzung zum Namen, die mehr über das Objekt erzählt oder einen ausführlicheren Hinweis dazu enthält. Es wird nach dem Namen und der Rolle ausgesprochen, wenn diese Einstellung in einem Screenreader entsprechend ausgewählt ist.
Tatsächlich handelt es sich dabei um einen optionalen Teil des Barrierefreiheitsobjekts, der Benutzern hilft, sich tiefer in die Benutzeroberfläche einzuarbeiten. Beschreibungen sind besonders nützlich, wenn auf einer Website komplexe oder ungewöhnliche Elemente vorhanden sind.
Bei einigen Elementen werden die Beschreibungen aus speziellen Tags entnommen. Für <figure> ist dies <figcaption>, für <table> - <caption>, und für <svg> - <desc>.
In einem weiteren Beispiel fügen wir allgemeine Beschreibungen zu Bildern in <figure> hinzu:
<figure>
<img src="dog-1.png" alt="Chihuahua">
<img src="dog-2.png" alt="Zwergpinscher">
<figcaption>
Obwohl Chihuahuas äußerlich Zwergpinschern ähneln,
handelt es sich um völlig unterschiedliche Rassen. Sie wurden unabhängig voneinander in verschiedenen
Ländern gezüchtet.
</figcaption>
</figure>In dem obigen Beispiel ist es interessant, dass den Bildern zusätzlich Namen zugeordnet sind. Im Falle des <img>-Tags wird der Name aus dem Alt-Attribut übernommen.
Sie können alternativ Beschreibungen zu den Elementen auch mit aria-describedby, aria-details und aria-description hinzufügen.
Zum Beispiel lautet die Beschreibung für diese Schaltfläche: "Wählen Sie Ihre Lieblingsfarbe aus, und sie wird im Hintergrund der Seite erscheinen." Diese Information stammt aus dem <span> mit dem Text, der mit dem aria-describedby-Attribut des <button> verknüpft ist.
<button
type="button"
aria-describedby="hint"
>
Thema auswählen
</button>
<span id="hint">
Wählen Sie Ihre Lieblingsfarbe aus, und sie wird im Hintergrund der Seite erscheinen.
</span>Eigenschaften und Zustände
Eigenschaften und Zustände enthalten Details zur Anordnung und den möglichen Aktionen mit Objekten. In vielen semantischen Tags gibt es neben der Rolle auch eingebaute Eigenschaften und Zustände, zum Beispiel haben Checkboxen das Attribut "checked". Es informiert unterstützende Technologien darüber, ob sie derzeit ausgewählt ist. In diesem Beispiel mag definitiv jemand Pizza mit Ananas 🍍.
<label for="pineapple">
Ich liebe Pizza mit Ananas:
</label>
<input id="pineapple" type="checkbox" checked>Eigenschaften und Zustände können auch mithilfe von ARIA gesteuert werden. Es gibt ARIA-Attribute, die HTML-Attribute duplizieren, wie zum Beispiel aria-checked.
<span id="label">
Ich liebe Pizza mit Ananas:
</span>
<span
role="checkbox"
aria-labelledby="label"
aria-checked="true"
>
</span>Es gibt besondere ARIA-Attribute, die zusätzliche Informationen zu den Elementen an unterstützende Technologien weitergeben. Zum Beispiel gibt aria-expanded Auskunft darüber, ob der zugehörige Inhalt zusammengeklappt oder erweitert ist. In diesem Beispiel ist die Liste der Produkte derzeit zusammengeklappt.
<button
aria-expanded="false"
aria-controls="list"
>
Alle Produkte
</button>
<ul id="list">
<!-- Liste der Verknüpfungen -->
</ul>Wie debuggen
Chrome, Edge
In den Chrome DevTools (im Browser mit der Funktionstast F12 aufrufbar) finden Sie die Registerkarte "Barrierefreiheit" (Accessibility) im Hauptbereich "Elemente" (Elements), mit welcher Sie umfangreiche Informationen der aktuellen Seite zur Barrierefreiheit aufrufen können.
Zusätzlich können Sie die experimentelle Einstellung "Gesamte Seiten-Barrierefreiheitsstruktur aktivieren" (Enable full-page accessibility tree) aktivieren, indem Sie das entsprechende Kontrollkästchen im Akkordeon "Barrierefreiheitsstruktur" (Accessibility Tree) auswählen. In diesem Fall erscheint im Abschnitt mit der Seitenstruktur ein Schalter mit einer menschenähnlichen Figur, um zwischen den Ansichten des Baums zu wechseln.
Ein alternativer Weg: Einstellungen (Settings) > Registerkarte "Experimente" (Experiments) > Kontrollkästchen "Gesamte Seiten-Barrierefreiheitsstruktur in der Elemente-Panel aktivieren" (Enable full accessibility tree view in the Elements panel).
Firefox
Der Barrierefreiheitsinspektor wird automatisch aktiviert, wenn Sie eine der folgenden Aktionen ausführen (vor Firefox 79 musste er explizit aktiviert werden):
1. Wählen Sie Barrierefreiheit im Menü Extras > Browserwerkzeuge.
2. Wählen Sie den Tab "Barrierefreiheit" im Werkzeugkasten der Entwicklertools aus.
3. Klicken Sie mit der rechten Maustaste im Hauptfenster des Browsers und wählen Sie "Barrierefreiheitseigenschaften inspizieren" im Kontextmenü aus.
4. Klicken Sie mit der rechten Maustaste auf ein Element im HTML-Bereich des Seiteninspektors und wählen Sie "Barrierefreiheitseigenschaften anzeigen" im Kontextmenü aus.
Nach der Aktivierung bleibt der Barrierefreiheitsmotor aktiv, bis Sie den Werkzeugkasten der Entwicklertools schließen.
Safari
Die Registerkarte "Node" in der Hauptleiste "Elemente" (Elements) > das Akkordeon "Barrierefreiheit" (Accessibility) öffnen.
In Chrome und Firefox finden Sie die detailreichsten Voransichten der Baumstruktur. In diesen Browsern können Sie sowohl den gesamten Zugänglichkeitsbaum als auch einzelne Knoten einsehen.
In der Praxis ist es besser, sich bei der Überprüfung der Barrierefreiheit der Benutzeroberfläche nicht vollständig auf die Bäume in den Browsern zu verlassen. Die Browser zeigen Ihnen leidglich visuelle Vorschauen der Bäume (Emulationen). Diese spiegelt nicht wider, wie Bildschirmlesegeräte die Benutzeroberfläche tatsächlich vorlesen, und sie werden nicht immer schnell aktualisiert, wenn sich dynamische Änderungen auf der Seite ereignen, z.B. kann sich der Name eines Elements ändern, ein Tooltip kann erscheinen oder verschwinden und vieles mehr.
Genauere Informationen zur Arbeit mit dem Accessibility Tree in verschiedenen Browsern finden sie unter folgenden weiterführenden Links:
