HTML/CSS > Unisichtbarer Text

Manchmal braucht man einen unsichtbaren Text, der nur von Suchmaschinen (aus SEO-Gründen) oder Screenreadern gelesen werden kann, normale Besucher der Webseite sollen stattdessen ein Bild sehen können. Um das zu bewerkstelligen verwenden viele die CSS-Eigenschaft display: none;. Die wenigsten wissen allerdings, dass Google den Inhalt anschließend nicht mehr interessiert und auch die meisten Screenreader ignorieren den Text einfach.
Also muss eine andere Lösung her: Opacity. Mit dieser CSS-Eigenschaft lässt sich der Text durchsichtig darstellen und wird somit von Google als normaler Text behandelt.

Beispiel: Eine Überschrift soll den Namen der Webseite enthalten, der normale Seitenbesucher soll aber stattdessen das Logo der Webseite sehen können. Unser HTML-Code dafür sieht so aus:

<h1 id="logo"><span>Unsichtaber Name der Webseite</span></h1>

Über CSS wird der Text durchsichtig gemacht und das h1-Element bekommt als Hintergrundbild das gewünschte Logo:

#logo {
	background: url(alternativ-bild.png);
	width: 200px;
	height: 203px;
}
#logo span {
	-ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
	filter: alpha(opacity=0);
	opacity: 0;
	-moz-opacity: 0;
	zoom: 1;
	display: block;
	overflow: hidden;
}

Der Trick funktioniert in allen bekannten Browsern – selbst im Internet Explorer 6.

Eine Demo dazu gibt es natürlich auch:
Demo: HTML/CSS > Unsichtbarer Text