Oft kommt von Verantwortlichen die Frage, wann Inhalte vor assistiven Technologien, insbesondere Screenreadern versteckt werden sollten. In diesem Beitrag möchte ich eine Einschätzung treffen. Manche Themen sind umstritten, bei manchen Aspekten ist es eindeutig.
Nicht-informationstragende Elemente
Da für blinde Menschen der kognitive Load mit der Zahl der Elemente steigt, ist es für sie sinnvoll, dass nicht informations-tragende Elemente versteckt werden. Anders als Sehende können sie wiederkehrende oder für sie überflüssige Elemente nicht einfach überspringen.
Dekorative Elemente werden in aller Regel versteckt. Im Zusammenhang mit digitaler Barrierefreiheit spricht man von dekorativen Elementen, wenn bestimmte Inhalte oder Elemente einer Website oder Anwendung rein visuell sind und keinen funktionalen oder informativen Zweck haben. Sie dienen lediglich der ästhetischen Gestaltung und tragen nicht zur Übermittlung von wesentlichen Informationen bei.
Beispiele für dekorative Elemente sind:
- Hintergrundbilder oder Muster: Ein Hintergrundmuster oder ein Bild, das nur zur Verschönerung der Seite dient.
- Verzierungsgrafiken: Icons, Ornamente oder Illustrationen, die keine zusätzliche Bedeutung haben.
- Visuelle Trennelemente: Linien oder Grafiken, die zur optischen Strukturierung eingesetzt werden, aber keine inhaltliche Bedeutung haben. Dazu zählen auch Spacer-GIFs, wie sie in Layout-Tabellen eingesetzt wurden.
Oft sind es Elemente, die auf jeder Seite vorkommen wie Banner, Trennlinien und so weiter.
Redundante Inhalte sollten nicht mehrfach vorgelesen werden, zum Beispiel ein Alternativtext und eine Bild-Beschreibung zu einem Bild.
Auch Elemente, die zur grafischen Gruppierung von Elementen verwendet werden, obwohl sie eine andere Funktion haben, sollten versteckt werden. Es sind die berühmten Layout-Tabellen, die trotz CSS Grid nicht totzukriegen sind. Spezifisch dafür gibt es das Attribut ARIA presentation.
Nur zeitweise sichtbare Elemente
Oft kommt es bei ausklappenden Elementen wie Menüs oder Akkordeons vor, dass Blinden der Inhalt vorgelesen wird, obwohl er für Sehende noch unsichtbar ist. Das kann vor allem bei umfangreichen Navigationen ein Problem werden: Stellen Sie sich eine Navigation mit Dutzenden Elemente vor. Für Blinde ist es schwierig, sich innerhalb der Navigations-Hierarchie zu bewegen und den Navigationspunkt zu finden, den sie benötigen.
Ein weiteres Problem sind Overlays oder Dialogboxen, zum Beispiel Cookie-Layer: Oftmals ist der Hintergrund für Sehende ausgegraut und gesperrt, damit zuerst mit dem Overlay interagiert wird. Für Blinde ist es aber möglich, mit dem Inhalt per Tastatur zu interagieren: Sie können ihn lesen und auch Links aufrufen. Das liegt an einer fehlerhaften Einbindung der Overlays. Problematisch wird es spätestens dann, wenn Daten eingegeben werden sollen, denn Formulare lassen sich meisten nicht versenden, wenn das Overlay noch geöffnet ist. Für Overlays werden nicht die Technologien zum Verstecken verwendet, wie sie unten genannt werden, sondern Focus Traps. Focus Traps halten den Focus absichtlich solange in einem Element, bis damit interagiert wurde.
Es sollen nur die Inhalte ausgegeben werden, die auch visuell sichtbar sind. Das heißt, wenn ein Navigationselement oder Akkordeon-Inhalt für Sehende sichtbar ist, sollte er auch für Blinde sichtbar sein.
Nicht dazu zählen Inhalte, die bei Mouse Over angezeigt werden. Sie sollen ausgegeben werden, wenn Elemente den Screenreader-Fokus erhalten.
Meines Erachtens sollten auch UI-Elemente nicht versteckt werden, die aktuell inaktiv sind, zum Beispiel Senden-Buttons, die disabled sind, solange die Pflichtfelder nicht befüllt sind. Blinde müssen in der Lage sein, eine grafische Benutzer-Oberfläche zu erlernen. Das wird ihnen erschwert, wenn sie nicht alle Elemente wahrnehmen können, egal, ob sie aktuell verfügbar sind oder nicht.
Wie Inhalte vor Screenreadern verstecken?
Es gibt verschiedene Methoden, um Inhalte vor Screenreadern zu verstecken:
aria-hidden=“true“
- Was es macht: Elemente mit diesem Attribut werden komplett vor Screenreadern versteckt, bleiben aber visuell sichtbar.
- Wann verwenden: Für dekorative Elemente oder Inhalte, die für Screenreader-Benutzer irrelevant sind.
2. Leeres alt-Attribut für Bilder
3. CSS: display: none oder visibility: hidden
visibility: hidden: Versteckt das Element visuell, hält aber seinen Platz im Layout. Es wird von Screenreadern ignoriert.
Wann verwenden: Für Elemente, die komplett unsichtbar sein sollen, z. B. deaktivierte Menüs.
Offscreen-Technik (nur visuell verstecken)
Rolle presentation oder none für dekorative Elemente
tabindex=“-1″ für nicht-fokussierbare Inhalte
Wie testen?
Wie immer rate ich Newbies davon ab, direkt mit Screenreadern zu testen. Vielmehr ist der Umgang mit dem Accessibility Tree aus meiner Sicht die beste Methode, um zu prüfen, ob Inhalte für Screenreader versteckt oder sichtbar sind.
Relevante WCAG-Erfolgskriterien
Die folgenden WCAG-Kriterien sindin diesem Zusammenhang relevant:
- 1.1.1 Nicht-Text-Inhalte
- 1.3.1 Info und Beziehungen
- 1.4.13 Inhalte bei Fokus oder Hover
- 2.4.3 Fokusreihenfolge
- 2.4.7 Fokus sichtbar
- 4.1.2 Name, Rolle, Wert