Elemente per CSS barrierefrei ausblenden

Die wahrscheinlich am häufigsten genutzte CSS-Anweisung ist display:none. Damit kann man alle Sachen wegzaubern, die im Layout stören. Aber auch Screenreader sehen dann nichts mehr davon. Das ist nicht immer sinnvoll.

Mit display:none wird ein Element vollständig entfernt. Ähnliches gilt für visibility:hidden. Im DOM steht das Element noch drin, aber der Inhalt ist für Screenreader nicht mehr erreichbar. Das Element wird vom accessibility tree entfernt.

Zu diesem Artikel hat mich die kluge und großartige Sara Soueidan inspiriert. Sie hat in ihrem Blog darüber geschrieben wie man Checkboxen und Radio Buttons barrierefrei per CSS verbergen und gestalten kann (englisch). Sehr lesenswert.

Unterschied display:none und visibility:hidden

Der Unterschied zwischen display:none ist, dass bei visibility:hidden der Raum, den das Element einnimmt, erhalten bleibt. Es entsteht sozusagen ein Loch im Layout. Das ist in den meisten Fällen unpraktisch. Bei display:none ist das Element einfach weg.

(2) Element B ist mit visibility:hidden nur ausgeblendet. Der Platz bleibt leer.
(3) Wenn Element A die Anweisung display:none bekommt, verschwindet A vollständig, der Platz wird frei und B rutscht nach.

Barrierefreie Alternative zu display:none

Angenommen, du hast ein Element, das du loswerden willst. Aber du willst nicht, dass es vollständig verschwindet. Screenreader sollen weiter darauf zugreifen können.

Nehmen wir die Seitentitel in WordPress als Beispiel. Manchmal stören sie im Layout, aber sie enthalten wichtige Informationen. Meist sind sie die einzige H1 auf der Seite und die sollte man nicht einfach so entfernen.

Dann kannst du so etwas machen:

h1.page-title { 
  clip: rect(0 0 0 0); 
  clip-path: inset(100%); 
  height: 1px; 
  overflow: hidden; 
  position: absolute; 
  white-space: nowrap; 
  width: 1px; 
}

Quelle: https://www.scottohara.me/blog/2017/04/14/inclusively-hidden.html

Die Seitentitel verschwindet aus der optischen Darstellung, aber der Inhalt bleibt erreichbar. Per CSS wird das Element in ein winziges Quadrat von 1×1 Pixel Größe verwandelt und ist damit unsichtbar.

Kommentare, die nichts mit dem jeweiligen Artikel zu tun haben, oder die (weitgehend) inhaltslos sind und keinen Mehrwert für andere Leserinnen und Leser bieten, veröffentlichen wir nicht.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Hinweise zum Datenschutz
Wenn du einen Kommentar schreibst, wird dieser inklusive Metadaten zeitlich unbegrenzt gespeichert. Auf diese Art können wir Folgekommentare automatisch erkennen und freigeben, anstelle sie in einer Moderations-Warteschlange festzuhalten.
Wenn Besucher Kommentare auf der Website schreiben, sammeln wir die Daten, die im Kommentar-Formular angezeigt werden, außerdem die IP-Adresse des Besuchers und den User-Agent-String (damit wird der Browser identifiziert), um die Erkennung von Spam zu unterstützen. Aus deiner E-Mail-Adresse kann eine anonymisierte Zeichenfolge erstellt (auch Hash genannt) und dem Gravatar-Dienst übergeben werden, um zu prüfen, ob du diesen benutzt.
Die Datenschutzerklärung des Gravatar-Dienstes findest du hier.
Nachdem dein Kommentar freigegeben wurde, ist dein Profilbild öffentlich im Kontext deines Kommentars sichtbar.