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.

Diesen Blogartikel teilen:

Vladimir

Vladimir Simović arbeitet seit 2000 mit HTML & CSS und seit Januar 2004 mit WordPress. Im Laufe der Jahre hat er diverse Fachbücher und Fachartikel publiziert.

Verwandte Beiträge

5 Gedanken zu „CSS: Methoden um Inhalte zu verbergen“

  1. Hi,

    vielleicht sollte man noch erwähnen, das visibility:hidden; das gleiche wie display:none; ist, d.h. die Screenreader lesen es nicht vor.
    Hier noch ein Link mit Tabelle dazu. 😉

    Gruß
    Klaus

  2. 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.

Kommentare sind geschlossen.