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.
Im Buch erstellen Sie in Kapitel 17.8 die Klasse visually-hidden, die Sie den zu versteckenden HTML-Elementen zuweisen können. Eine leicht aktualisierte Version dieser CSS-Regel könnte z. B. so aussehen:
/* Boxen am Bildschirm ausblenden */
.visually-hidden {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
border: 0 !important;
margin: -1px !important;
clip: rect(0, 0, 0, 0) !important;
overflow: hidden !important;
white-space: nowrap !important;
}Zunächst einmal fällt auf, dass alle Deklarationen den Zusatz !important bekommen, damit sie unabhängig von der Spezifität der Selektoren angewendet werden. Das habe ich bei Bootstrap 5 gesehen, fand es einleuchtend und habe es hier übernommen.
Weiter geht es mit der Positionierung der Box und den Box-Modell-Eigenschaften:
position: absolutehebt ein Element aus dem Dokument heraus, sodass es im Layout keinen Platz beansprucht.- Eine 0px große Box wird von einigen Screenreadern nicht vorgelesen. Deshalb definiert man mit
widthundheightzunächst eine 1px große Box und reduziert diese dann mit einem negativenmarginvon-1pxauf 0. Von hinten durch die Brust ins Auge sozusagen. - Außerdem werden
paddingundborderauf 0 gesetzt.
Am Ende der Regel folgen noch drei weitere Deklarationen:
- Die Eigenschaft
clipbestimmt, welcher Bereich eines absolut positionierten Elements sichtbar ist. Als Wert wird ein 0px großes Rechteck (rectangle) definiert. Zwei Anmerkungen zu dieser Deklaration:- Im Wert
rect(0, 0, 0, 0)sollten Kommata als Trennzeichen verwendet werden. Nur Leerstellen funktionieren zwar auch, aber der Validator gibt dann eine Warnung aus. - Der Validator warnt außerdem, dass die Eigenschaft
clipveraltet (deprecated) sei. Er hat Recht, aber die Browser verstehen es alle, und das wird sich in absehbarer Zeit auch nicht ändern.
- Im Wert
- Die Anweisung
overflow: hiddenschneidet eventuell überfließenden Inhalt ab, sodass von der Box am Bildschirm wirklich gar nichts zu sehen ist. - Die Zeile
white-space: no-wrapverhindert, dass Screenreader Leerstellen versehentlich verschlucken und einen Satz wie »Leerstellen sind wichtig« dann als ein Wort vorlesen (»Leerstellensindwichtig«).
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:
- 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)
UPDATE: In Comparing Various Ways to Hide Things in CSS vergleicht Marco Illic diverse Methoden.
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
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:absolutemit kräftigen Negativ-Werten wietop:-9999pxundleft: -9999pxist eine beliebte Methode zum Verstecken von Inhalten, hat aber einen Nachteil: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
clipund Tricks wieoverflow:hiddenkombiniert (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:absolutemit ein paar kräftigen Negativ-Werten.Den Beitrag von Marco Illic habe ich oben in der Linkliste am Ende des Beitrags ergänzt.
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