Manchmal muss man Dinge verstecken. Seien es die Schokolade vor den Kindern, das Chaos im Wohnzimmer vor unangekündigtem Besuch – oder digitale Inhalte, die zwar da sind, aber nicht für alle sichtbar sein sollen.
Aber warum sollte man Inhalte auf einer Website unsichtbar machen? Vielleicht sind es rein dekorative Elemente, die für Screenreader keinen Mehrwert haben. Oder ein Menüpunkt, der erst nach einem Klick erscheinen soll. Vielleicht ein Hinweis, der nur für bestimmte Nutzer relevant ist. Oder ein Button, der erst nach der richtigen Eingabe sichtbar wird.
Aber Achtung: Verstecken ist nicht gleich verstecken! Wer einfach mit display: none oder visibility: hidden um sich wirft, läuft Gefahr, wichtige Informationen für assistive Technologien gleich mit ins digitale Nirwana zu schicken. Damit das nicht passiert, schauen wir uns heute an, wie man Inhalte barrierefrei ausblendet – und was man dabei unbedingt beachten sollte.
Inhalte für alle ausblenden – unsichtbar und unhörbar
Möchte man Inhalte ausblenden, die im Moment tatsächlich irrelevant oder sogar störend sind, dann ist es wichtig, dass diese auch wirklich für alle Nutzer ausgeblendet sind. Das heißt, auch Screenreader und andere Assistenzsysteme sollten sie nicht mehr vorlesen.
Hier sind einige sinnvolle Anwendungsfälle:
- Navigationselemente für mobile Menüs
In vielen responsiven Designs sind Navigationsmenüs standardmäßig ausgeblendet und erscheinen erst, wenn Nutzer auf ein sogennantes Burger-Icon klicken. - Temporär nicht benötigte Inhalte
Ein Formular könnte verschiedene Abschnitte enthalten, die nur auf Wunsch sichtbar werden (z. B. zusätzliche Felder für die Rechnungsadresse). - Alternative Inhalte für verschiedene Geräte oder Benutzergruppen
Manche Websites bieten unterschiedliche Inhalte für verschiedene Gerätetypen an, z. B. eine mobile und eine Desktop-Version einer Komponente. Je nach Viewport kann eine der beiden Varianten vollständig ausgeblendet werden.
Das Attribut hidden
Die sauberste Lösung um direkt im HTML zu hinterlegen, dass ein Element nicht sichtbar sein soll, ist das Attribut hidden. Es gibt Entwicklern die Möglichkeit, sowohl mit CSS als auch mit JavaScript sauber auf den aktuellen Zustand zuzugreifen und diesen auch zu ändern. So wird, semantisch richtig, festgelegt, dass etwas gerade absolut unwichtig ist und wird von allen Browsern unterstützt.
<button hidden>Klick mich nicht</button>display: none
Der Klassiker unter den Methoden, Inhalte auszublenden und vermutlich am bekanntesten. Mit der CSS-Eigenschaft display lässt sich nicht nur steuern, wie ein Element dargestellt wird. Man kann mit display: none auch dafür sorgen, dass Elemente ganz ausgeblendet werden.
Alles was mit display: none entfernt wird, ist auch wirklich weg. Es ist nicht Teil des Accessibility Trees, wird damit auch von Screenreadern nicht vorgelesen und ist nicht mit der Tabulator-Taste fokussierbar. Es ist also, genau wie hidden, immer dann geeignet, wenn Inhalte irrelevant sind oder erst später eingeblendet werden.
visibility: hidden
Während hidden und display: none ein Element vollständig aus dem Dokument entfernen, sorgt visibility: hidden lediglich dafür, dass es nicht sichtbar ist – es bleibt aber weiterhin im Dokumentenfluss und nimmt Platz ein. Für Screenreader und andere Assistenzsysteme ist es trotzdem nicht zugänglich. Da sehende Nutzer sich über den leeren Platz wundern könnten, wird es meistens nur bei Elementen verwendet, die direkt eingeblendet werden.
Extra-Infos für Screenreader – unsichtbar, aber hörbar
Nicht immer möchte man Inhalte komplett ausblenden. Oft genug, gerade bei der Entwicklung einer barrierefreien Website, muss man Inhalte nur für Screenreader hinterlegen. Das könnten Alternativtexte für Icons sein, aber auch Anleitungen zur Verwendung oder zum Verständnis bestimmter Komponenten. Schauen wir uns also einmal an, wie man Elemente zwar optisch entfernt, sie für Assistenzsysteme wie Screenreader und Braille-Zeilen aber weiterhin zugänglich lässt.
sr-only oder screenreader-only
Meist werden diese Inhalte mit Klassen wie „sr-only“ oder „screenreader-only“ versehen. Hier ein Beispiel, wie eine solche Klasse aussehen kann:
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
Eingesetzt wird sie dann so:
<p class="sr-only">Dieser Text ist nur für Screenreader sichtbar.</p>
Dadurch bleibt der Text für Screenreader und alle anderen Assistenzsysteme, die den Accessibility Tree nutzen, zugänglich, aber für sehende Nutzer unsichtbar. Diese Klassen sind an allen gängigen Browsern und mit verschiedenen Screenreadern getestet worden und funktionieren zuverlässig.
Funktionieren auch opacity: 0 oder height: 0 und width: 0?
Möchte man Elemente animiert ein- oder ausblenden, dann kommt oft das CSS-Attribut opacity zum Einsatz, durch das man die Transparenz steuern kann. Dabei sind Werte zwischen 0 (vollständig transparent, unsichtbar) und 1 (vollständig opak, sichtbar) möglich.
Mit den CSS-Attributen height und width kann man dagegen die Breite und Höhe von Elementen steuern und sie so versuchen, auszublenden.
Im Gegensatz zu display: none und visibilty: hidden bleiben Inhalte, die nur transparent oder auf Größe Null geschrumpft sind, für alle Nutzer grundsätzlich bedienbar. Im Prinzip funktioniert es wie ein Tarnumhang: Alles bleibt wie es ist, nur nicht sichtbar. Das heißt:
- Sie können per Tastatur Fokus erhalten.
- Sie können mit der Maus angeklickt werden.
- Sie werden von Screenreadern vorgelesen.
Man könnte also Meinen, Sie funktionieren so wie die Klasse sr-only. Es fällt aber sicher auf, dass sr-only keine der beiden Methoden nutzt, auch wenn sie naheliegend sind. Das liegt daran, dass es einzelne Screenreader gibt, die diese Inhalte schlicht als „weg“ betrachten und deshalb auch nicht vorlesen. Sie behandeln sie also genauso, als hätte man display: none verwendet. Bleiben Sie also bei Inhalten, die nur für Screenreader gedacht sind, bei den bewährten Definitionen. Dann sind Sie auf der sicheren Seite.
Ausblenden fokussierbarer Elemente
Keine der oben erwähnten Methoden hindert einen Nutzer daran, das Element zu fokussieren. Das kann ein Problem werden, denn Inhalte, mit denen man interagieren kann, sollten auch sichtbar sein. Jedes Element, dass gerade den Fokus besitzt, sowieso. Bei der Verwendung gilt also:
- Das Element und keines seiner Kinder ist fokussierbar
- Oder: Das Element wird sichtbar, wenn es den Fokus erhält
Nicht wichtig für Screenreader – sichtbar, aber unhörbar
Selten, aber doch manchmal, möchte man Elemente anzeigen, sie aber vor Screenreadern verstecken. Das kann verschiedene Gründe haben.
- Es sind rein dekorative Elemente, die nicht einmal einen Alternativtext benötigen
- Das Element ist nicht barrierefrei bedienbar, es gibt aber eine barrierefreie Alternative, auf die hingewiesen wird.
- Es handelt sich um ein Duplikat, beispielsweise mehrere Links zur selben Seite
Auch bei der Implementierung barrierefreier Cards haben wir einen falschen Button eingebaut, der nichts tut, und diesen für Screenreader ausgeblendet um Nutzer nicht zu verwirren.
Das Attribut aria-hidden
Analog zu hidden kann mit dem HTML-Attribut aria-hidden dafür gesorgt werden, dass ein Element zwar grundsätzlich sichtbar ist, aber nicht in den Accessibility Tree aufgenommen wird. Damit existiert es für Screenreader und Braille-Zeilen praktisch nicht.
Wichtig: genau deshalb darf es nie auf fokussierbare Elemente angewendet werden. Denn den Fokus können diese per Tastatur und Maus natürlich weiterhin erhalten.
Was ist mit role="presentation" und role="none"?
Wenn Sie ein Element für Screenreader ausblenden möchten, sind role="presentation" und role="none" nicht die richtige Wahl. Diese Rollen sorgen dafür, dass das Element seine semantische Bedeutung verliert (beispielsweise wird eine Tabelle nicht mehr als solche erkannt), aber der Inhalt bleibt weiterhin zugänglich. Sie werden also eben nicht ausgeblendet.
Sinnvoll ist die Verwendung, wenn Sie ein Element rein zur Gestaltung nutzen, ohne dass es eine inhaltliche Rolle spielt. Ein typisches Beispiel sind Layout-Tabellen: Früher wurden Tabellen oft für das Seitenlayout verwendet, was für Screenreader verwirrend sein kann. Durch role="presentation" oder role="none" bleibt die Struktur zwar erhalten, aber Screenreader interpretieren sie nicht als Tabelle. Klingt nach einer passablen Notlösung, richtig wäre aber, von Anfang an keine Tabellen zu nutzen.
Fazit
Es gibt viele Möglichkeiten, Inhalte auszublenden – aber nicht jede Methode ist für jeden Zweck geeignet. Während display: none und hidden Inhalte für alle Nutzer unsichtbar machen, bleiben sie mit sr-only für Screenreader erhalten. aria-hidden hingegen blendet Elemente nur für assistive Technologien aus, während role="presentation" oder role="none" lediglich die semantische Bedeutung eines Elements versteckt.
Wichtig ist, sich bewusst zu machen, wann welche Technik sinnvoll ist. Ein gut durchdachtes Zusammenspiel sorgt dafür, dass Inhalte nur dann sichtbar oder hörbar sind, wenn sie auch wirklich gebraucht werden – und das verbessert die Barrierefreiheit für alle.