Inhalte am Bildschirm verstecken mit der Klasse »visually-hidden«

Peter Müller

27. Dezember 2021

Auf Webseiten gibt es manchmal Elemente, die zwar im Quelltext und für Benutzer mit einem Screenreader sinnvoll sind, in einem visuellen Layout aber nicht benötigt werden.

Zu diesem Zweck kann man, wie in diesem Beitrag beschrieben, einen Hilfsklasse erstellen, die man z. B. visually-hidden nennt.

Mit der Klasse visually-hiddenkann man HTML-Elemente am Bildschirm ausblenden. Eine mögliche Version dieser CSS-Regel könnte z. B. so aussehen:

/* Boxen am Bildschirm ausblenden */
.visually-hidden {
    position: absolute;
    overflow: hidden;

    width: 1px; 
    height: 1px; 

    clip: inset(50%); 
    white-space: nowrap;
}

Los geht es mit der Positionierung der Box und dem Overflow-Verhalten:

position: absolute hebt ein Element aus dem Dokument heraus, sodass es im Layout keinen Platz beansprucht.
overflow: hidden schneidet eventuell überfließenden Inhalt ab, sodass von der Box am Bildschirm wirklich gar nichts zu sehen ist.

Am Ende der Regel folgen noch drei weitere Deklarationen:

Eine 0px große Box wird von einigen Screenreadern nicht vorgelesen. Deshalb definiert man mit width und height zunächst eine 1px große Box.
Die Eigenschaft clip bestimmt, welcher Bereich eines absolut positionierten Elements sichtbar ist und inset(50%) definiert ein Rechteck, das den Inhalt verschwinden lässt (siehe Ahmad Shadeed).
Die Zeile white-space: no-wrap verhindert, dass Screenreader Leerstellen versehentlich verschlucken und einen Satz wie »Leerstellen sind wichtig« dann als ein Wort vorlesen (»Leerstellensindwichtig«).

Diese Version entspricht dem Vorschlag von Manuel Matuzovic, den er in seinem Web Accessibility Cookbook auf Seite 224 macht.

Es gibt im Web diverse Variationen für diese CSS-Regel, aber diese neun Deklarationen sind bei fast allen vorhanden. Zum Abschluss noch ein paar Quellen zu dieser Regel:

The anatomy of visually-hidden von James Edwards (10/2022, toller Überblick!)
How-to: Hide content von Dave Rupert (The A11Y Project, 02/2013)
CSS hide-and-seek von Kitty Giraudel (10/2016)
Bootstrap 5: Quelltext für .visually-hidden und Beschreibung in den Docs
Tailwind CSS: Screen-reader-only elements
HTML5 Boilerplate (.visually-hidden)
In Comparing Various Ways to Hide Things in CSS vergleicht Marco Illic diverse Methoden.

Accessibility, Zugänglichkeit

Kommentare

3 Antworten zu „Inhalte am Bildschirm verstecken mit der Klasse »visually-hidden«“

Horst Peters

21. November 2022

Moin,

da arbeitet sich der Mensch an 9 Anweisungen ab mit dem Ziel, etwas nicht sichtbar zu machen … und zwar betont »!important« unsichtbar …
Vielleicht fehlt in Ihrem Artikel der (Zu-)Satz, dass dieser Mensch vorab und allgemein überlegen könnte, schlicht wegzulassen, was er da verstecken will.
Sprunghilfen für Screenreader und Co., allgemein alles, was halt nicht sichtbar sein soll aber unbedingt auf die Site gehört, lässt sich auch schlicht mit position absolute nebst kräftigem Negativ-Margin in irgendeine Himmelsrichtung »wegmachen« …
Der sehende Mensch sieht dann halt auch nicht, was er nicht sehen soll – und der schreibende Mensch kaspert mit solchen Anweisungsfibeln und Important-Gezaubere nicht herum: allein zwecks Einhaltung einer drohenden Verlustigkeit irgendeiner nicht mehr recht überschaubar werdenden Spezifität …?!
Ähem: Überflüssiges Geschreibe in Quelltexten sei schlicht nicht mehr zeitgemäß?
Könnte man ja erfragen … nein, warten Sie: sollte man erfragen!
Ökologisch betrachtet bröseln da ellenlange Scripte und derlei Important-Empfehlungen im Netz herum, verbrauchen Energie für Design, das Verstecken von Inhalten … sowie – mit Verlaub – für allerlei Eitelkeiten, was mit einer Handvoll sparsamsten CSS auch erreicht werden könnte … und diese Sparsamkeit aber auch nichts, aber auch mal gar nichts mit »altbacken« zu tun hat …
Bin froh, mittlerweile auf einem Stand zu sein, der mich souverän über solche Artikel wie diesen hinwegfegen lässt.
Bevor ich aber nur noch als Nörgler bei Ihnen auftrete, es sei angefügt, Ihre Arbeiten allgemein … und auch dieses kleine, schwarze Schild im Adressfenster meines Browsers finde ich an Ihren Seiten wunderbar …

Freundlichen Gruß

Horst Peters

Antworten
1. Peter Müller
  
  22. November 2022
  
  Schön für Sie, dass Sie mittlerweile auf einem Stand sind, der Sie souverän über solche Artikel wie diesen hinwegfegen lässt, aber vielleicht ist der Ton in Ihrem Kommentar doch etwas übertrieben.
  
  position:absolute mit kräftigen Negativ-Werten wie top:-9999px und left: -9999px ist eine beliebte Methode zum Verstecken von Inhalten, hat aber einen Nachteil:
  
  If the hidden element contains focusable content, the page will scroll to the element when it is in focus, creating a sudden jump. (Quelle: Beitrag von Marco Illic, Punkt 4)
  
  Aus diesem Grund haben viele pfiffige Köpfe sich überlegt, wie man das verbessern könnte, und haben die absolute Positionierung mit Dingen wie der Eigenschaft clip und Tricks wie overflow:hidden kombiniert (siehe Beitrag von Marco Illic, Punkt 5).
  
  Diese Klasse findet sich wie erwähnt so oder so ähnlich in vielen Frameworks und Best-Practice-Sammlungen, denn sie ist universell einen Ticken besser einsetzbar als das von Ihnen bevorzugte position:absolute mit ein paar kräftigen Negativ-Werten.
  
  Den Beitrag von Marco Illic habe ich oben in der Linkliste am Ende des Beitrags ergänzt.
  
  Antworten
Horst Peters

22. November 2022

Moin Herr Müller,

Der Verweis zu Marco Illic als Ergänzung Ihres Beitrags ist sehr hilfreich!
So steht die von Ihnen aufgeführte Anweisung inklusive der zugehörigen Quellenangaben nicht alleine – und wird von der Fragestellung erweitert, die Marco Illic in seiner Einleitung und seiner Zusammenfassung stellt:

Welche Methode des Verbergens von Inhalten erscheint für mein konkretes Vorhaben zweckmäßig, sinnvoll?

Er stellt die Frage nach den (technischen) Folgen, wenn diese oder jene Methode für das Verstecken von Inhalten gewählt wird – und verweist implizit auf die Frage nach der Motivation, Inhalte »verstecken« zu wollen.

Durch seine anschauliche Übersicht am Ende seines Beitrages gibt er den Schreibern von Websites an die Hand: Was passiert bei den Nutzern, wenn ich diese oder jene Methode verwende?

Diesen Kontext – von Motivation und Folgen – vermisste ich bei Ihrem Beitrag; ein Beitrag mit EINER vorgestellten Anweisung, die möglicherweise allzu rasch via Copy & Paste von einer »Lehrseite« auf diversen Websites landet …

Gut, mein Duktus in der vorangegangenen Post ist – von Ihnen noch höflich umschrieben – übertreibend. Verzeihen Sie.
Aber als ein Nutzer des Web mit ausreichend Kenntnissen, um bei der Analyse von Websites mitunter ordentlich ins Hüsteln kommen zu können … fehlte es dann doch an meiner Haltung, den angehäuften Ärger über die zuvor besuchten Websites nicht abgeschüttelt zu haben, bevor ich Ihren Beitrag kommentierte.
Ich würde meine Zeilen so nicht mehr schreiben.
Sie sehen es mir nach?

Jedoch sei der Kern meiner vorangegangenen Antwort wiederholt, dass vor all diesen Methoden des Versteckens von Inhalten die Frage stehen könnte: Kann dieser Inhalt nicht einfach weg?
Dies lehrt wenigstens meine Durchsicht diverser Websites: Da kann mitunter so einiges weg, was noch nicht einmal versteckt wird …

Eine sehr schlichte aber effiziente Methode:
Auskommentieren im Quelltext.

Die von Ihnen genannte Pfiffigkeit von Kennern rund um CSS ist das eine.
Die von mir zu oft vermisste Frage nach dem Zweck und den Folgen diverser »Pfiffigkeiten« der Webgestaltung darf auch bei sehr spezifischen Feldern – wie das Verstecken von Inhalten – in den Blick gerückt werden.
Mehr wollte meine spontane Federführung im zuvor stehenden Kommentar eigentlich nicht leisten.

Grüße

Horst Peters

Antworten