visually-hidden

visually-hidden ist ein verbreiteter CSS-Klassenname für Text, der per Stylesheet aus dem sichtbaren Layout genommen wird, für Screenreader aber lesbar bleibt. Der Name bezeichnet keinen eigenen Mechanismus, sondern das Muster, das dieses Glossar unter „Visuell versteckter Text (sr-only)“ erklärt. Technischer Kern ist ein kleiner Regelblock: position:absolute, eine Box von einem Pixel Größe, overflow:hidden und ein Zuschnitt über clip-path. Bewusst fehlen display:none und visibility:hidden, denn beide verbergen Inhalte auch vor assistiven Technologien. Denselben Regelblock führen Frameworks und Utility-Bibliotheken unter je eigenem Namen, häufig auch als sr-only. Selbst das W3C schreibt den Namen nicht einheitlich: Die WCAG-Technik C7 nennt die Klasse visually-hidden, das WAI-Tutorial zu Formularbeschriftungen visuallyhidden. Einen standardisierten Klassennamen oder ein verbindliches Referenz-CSS gibt es nicht. Die Schnipsel unterscheiden sich je nach Quelle im Detail; C7 etwa führt das ältere clip und das neuere clip-path parallel. Fehlanwendung Nummer eins: die Klasse für Inhalte, die niemand erhalten soll. Dort gehört display:none hin.

In der Praxis

Übernehmen Sie den Regelblock aus der WCAG-Technik C7 unverändert in Ihr Stylesheet, unter dem Namen, den Ihr Projekt bereits verwendet. Typische Einsatzorte: Formularbeschriftungen, die visuell durch ein Icon ersetzt sind, ergänzender Linktext wie „Bericht als PDF“ und Überschriften, die nur die Gliederung für Screenreader tragen. Der häufigste Fehler ist der Griff zu display:none oder visibility:hidden, weil beides kürzer wirkt. Damit verschwindet der Text auch aus jeder Screenreader-Ausgabe, und das Muster ist wirkungslos. Zweiter Stolperstein: fokussierbare Elemente in der versteckten Box. Ein visuell versteckter Link erhält Tastaturfokus, ohne am Bildschirm zu erscheinen; Skip-Links brauchen deshalb eine Variante, die das Element bei Fokus wieder einblendet. Zum Schluss der Gegentest: Screenreader starten und prüfen, ob der versteckte Text angesagt wird. Danach mit Tab prüfen, ob nichts Unsichtbares den Fokus fängt.

Passende Leistung

Quellen

← Zurück zum Glossar