Inhalte am Bildschirm verstecken: ».visually-hidden«

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 erstellt man Hilfsklassen mit Namen wie .visually-hidden.

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; }
Code language: CSS (css)

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: absolute hebt 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 width und height zunächst eine 1px große Box und reduziert diese dann mit einem negativen margin von -1px auf 0. Von hinten durch die Brust ins Auge sozusagen.
  • Außerdem werden padding und border auf 0 gesetzt.

Am Ende der Regel folgen noch drei weitere Deklarationen:

  • Die Eigenschaft clip bestimmt, 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 clip veraltet (deprecated) sei. Er hat Recht, aber die Browser verstehen es alle, und das wird sich in absehbarer Zeit auch nicht ändern.
  • Die Anweisung overflow: hidden schneidet eventuell überfließenden Inhalt ab, sodass von der Box am Bildschirm wirklich gar nichts zu sehen ist.
  • 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«).

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:

Schreiben Sie einen Kommentar