WordPress & Webwork - perun.net

CSS: Methoden um Inhalte zu verbergen

am 07. 03. 2011 um 15:17 Uhr

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;
}

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 Artikel weiterempfehlen:

Premium WordPress Themes

Verwandte Artikel:

Kategorien:
HTML & CSS
Tags:
,  
Beitrag:
Trackback-Adresse und die Druckvorschau
Kommentare:
Kommentare verfolgen oder Kommentar abgeben

 — 

5 Kommentare »»

  1. 1. – Klaus

    Kommentar vom 08. March 2011 um 14:30

    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. :wink:

    Gruß
    Klaus

  2. 2. – P.S.X

    Kommentar vom 08. March 2011 um 20:44

    Funktioniert die Methode den auch in allen Browsern und bei älteren?

  3. 3. – Perun

    Kommentar vom 08. March 2011 um 21:14

    @P.S.X,

    text-indent funktioniert auch bei dem IE6.

  4. 4. – Bachsau

    Kommentar vom 11. March 2011 um 04:38

    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.

  5. 5. – Adrian

    Kommentar vom 08. August 2011 um 20:42

    Ein kreativer Weg ist womöglich auch die Clip-Eigenschaft: WebCode-Blog: Elemente mit CSS teilweise verstecken

    Viele Grüße

Hinweis:
Kostenloser WordPress-Newsletter
Wöchentl. Newsletter zu WordPress und verwandten Themen

Einen Kommentar hinterlassen




XHTML (folgende Tags sind erlaubt): <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> . Kommentar-Vorschau ist aktiviert (Javascript wird benötigt).

Code-Beispiele: damit die Code-Beispiele richtig angezeigt werden müssen die Sonderzeichen maskiert werden (z. B. < zu &lt;).

Weblog der perun.net webwork gmbh mit Artikeln zum Thema WordPress, Webwork, und Internet.