Navigation mit Sprites

Wir haben bereits über Sprites berichtet und erklärt, wie diese funktionieren. Verwendet man diese Methode mit einem sich verschiebenden Hintergrundbild für Effekte in einer Navigation, dann werden Textlinks für eben diese überflüssig.
Leider stimmt dies aber nicht ganz. Es ist nämlich so, dass Suchmaschinen wie Google keine Bilder lesen können. Dies hat wiederum zur Folge, dass es für Google diesen Navigationspunkt in Textform gar nicht gibt. Gleiches gilt für so genannte Screenreader, die Webseiten vorlesen.
In beiden Varianten werden Webseiten nämlich nur als Text gelesen, CSS wird dabei ignoriert.

Lesbarer Text in der Navigation (natürlich gilt dies für alle Elemente) ist also für ein gutes Ranking sowie für die Barrierefreiheit immens wichtig.
Wie lassen sich aber diese Aspekte mit optischen Ansprüchen vereinbaren? Der Trick ist, den Link-Text in den Quellcode zu schreiben und anschließend auszublenden. Allerdings kann auch dies gefährlich sein. Denn versteckter Text wird generell als schlecht eingestuft, da es den Anschein macht, als wollte man etwas verbergen oder gar den User täuschen.

Die Methoden
Es gibt viele Möglichkeiten, diesen Text für die Augen der Nutzer unsichtbar zu machen. Allerdings sind die meisten davon nicht zu empfehlen, da eine Webseite durch Anwendung solcher Methoden abgestraft werden kann. Dazu gehören die folgenden CSS-Einstellungen:

• weiße Schrift auf weißem Hintergrund
• Schriftgröße von 0px
• Verschieben des Textes “aus dem Browserfenster heraus” (Beispiel text-indent: -10000px)
• Text hinter Bildern

display: none
Ein Weg, welcher einigermaßen geduldet wird, ist die Schrift innerhalb des Links auszublenden. Dabei wird der Linktext in ein <span> Tag eingebunden.
<a class="link" href="link.html">
<span>Linktext</span>
</a>

Über das CSS lässt sich anschließend das <span> ausblenden, während der Link samt Hintergrundbild aber erhalten bleibt. Das CSS dazu sieht folgendermaßen aus:
.link span {
display: none;
}

Fazit
Unser Sprite-Beispiel lässt sich auf die vorgestellte Weise ganz einfach erweitern. So erreicht man, dass der Link auch für Suchmaschinen lesbar bleibt und eine gewisse Barrierefreiheit geschaffen wird. Zu exzessives Anwenden solcher Methoden zum Verstecken von Text oder gar Links ist aber nicht zu empfehlen. Man sollte damit sparsam umgehen und es nur einsetzen, um die beschriebenen Ziele zu verfolgen.