CSS: Methoden um Inhalte zu verbergen

Es gibt mehrere Methoden um Inhalte zu verbergen. Um gewisse Inhalte zu verbergen gibt es mindestens zwei sinnvolle Gründe. Zum einen wäre dies um die Zugänglichkeit einer Website für die Screenreader zu verbessern und der zweite Grund ist die Suchmaschinenoptimierung (SEO).

Nein! Im Fall von SEO rede ich jetzt nicht von den Methoden, die Google auf den Plan rufen, wie zum Beispiel versteckte Links etc. Ich rede hier davon, dass ein Logo welches als Hintergrundbild abgelegt ist, oder wie hier ein Teil der kompletten Kopfgrafik, weder für den Screenreader noch für eine Suchmaschine eine Aussage hat. Daher ist es sinnvoll für die “normalen” Besucher das Logo einzublenden, die anderen bekommen dann zum Beispiel den Titel der Seite als Text präsentiert.

Diesen Text möchte man allerdings vor der ersten Gruppe verbergen und hierfür gibt es diverse Methoden. Ich benutze seit Jahren folgende Methode. Zuerst das HTML:

<h1 id="kopfbereich"><a href="/">WordPress & Internet - perun.net</a></h1>

In die CSS-Datei kommt dann folgende Regel rein:

#kopfbereich a {
    display: block; width: 360px; height: 132px;
    text-indent: -9999px;
}

[adrotate banner=”41″]

Die Eigenschaft text-indent ist sehr praktisch, da ich den Text des Links verstecken kann – in diesem Fall liegt er 9.999 Pixel entfernt weg – ohne dafür zusätzliches HTML (zum Beispiel <span> oder ähnliches) bemühen zu müssen. Und so weit ich informiert bin wird der Text auch von den Textreadern erfasst im Gegensatz zu den Methoden wo man zum Beispiel mit display: none; arbeitet.

Allerdings hat diese Methode ein kleines Problem, welches uns hier in Europa eigentlich kaum betrifft: bei Sprachen, die von rechts nach links geschrieben werden, funktioniert diese Methode nicht. Daher stellt Jonathan Snook im Artikel Hiding Content for Accessibility mehrere Methoden vor.

Unter anderem eine Methode die er bei Yahoo! eingesetzt hat und die auf eine absolute Positionierung die CSS-Eigenschaft clipping basiert.

Wir arbeiten seit 20 Jahren mit WordPress und bieten diverse Dienstleistungen rund um das System an. Kontaktiere uns für weitere Informationen oder für ein Angebot.