Aus dem Kurs: Webtechniken lernen 2: CSS-Grundlagen

So erhalten Sie Zugriff auf diesen Kurs

Werden Sie noch heute Mitglied und erhalten Sie Zugriff auf mehr als 23.200 Kurse von Branchenfachleuten.

Boxen am Bildschirm ausblenden: die Klasse visually-hidden

Boxen am Bildschirm ausblenden: die Klasse visually-hidden – Tutorial zu CSS

Aus dem Kurs: Webtechniken lernen 2: CSS-Grundlagen

Gratismonat starten Für Ihr Team erwerben

Boxen am Bildschirm ausblenden: die Klasse 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 eher überflüssig wirken. Auf der Übungswebsite gibt es z.B. ein paar H2-Überschriften, wie z.B. diese hier, diese Website im Überblick, oder auch auf der News-Seite hier Beiträge und Linklisten. Die sind mit ein bisschen visueller Gestaltung am Bildschirm nicht wirklich nötig. Man könnte diese Überschriften mit der Anweisung display-none einfach ausblenden. Der Nachteil dabei wäre, dass sie dann auch für die Zielgruppe, nämlich die Screenreadernutzer, verschwunden wären. Das heißt, sie erstellen jetzt eine Klasse mit dem Namen visually hidden, visuell versteckt, die Sie dann den gewünschten HTML-Elementen wie diese Überschriften, die Sie eben gesehen haben, zuweisen können. Diese Klasse füge ich hier auf einen Schlag ein. Das ist ein ganz schöner Brocken, Boxen am Bildschirm ausblenden, die Klasse .visually hidden, die wird hier…

Inhalt