WordPress & Webwork

CSS: Methoden um Inhalte zu verbergen

Wie kann man mit Hilfe von CSS Inhalte verbergen bzw. unsichtbar machen?

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.

5 Reaktion(en)

  1. Bachsau

    Das ganze Gemurkse kann man sich sparen, wenn man sich angewöhnt, Titelgrafiken so einzubinden, wie es sich gehört: Als Grafiken. Dann kann man den für den Seitentitel auch prima das Alt-Tag nutzen. Es ist eine Unart, diese ja durchaus bedeutungsvollen Grafiken als Hintergrund einzubinden, eine sinnlose noch dazu.

    PS@Klaus: Visibillity:Hidden ist nicht das gleiche wie Display:None. Display:Nome wird garnicht erst geladen, während Visibillity:Hidden nur nicht angezeigt wird.

Die Kommentare in diesem Beitrag sind geschlossen.

✉ WordPress-Newsletter ✉

Tipps und News als E-Mail in deinem Postfach? Dann abonniere einfach den ersten deutsch­sprachigen Word­Press-Newsletter:


Der Newsletter ist hinterher jederzeit abbestellbar.

Eintragen!