CSS: Überschrift durch Bild ersetzen, barrierefrei
Mit Hilfe von CSS kann man ganz einfach Text durch ein Bild ersetzen, ohne dass das die Suchmaschinen oder Screenreader stört. Dazu setzt man ein Bild als Hintergrundbild einer Überschrift z.B. H1 und blendet den Text mit einem kleinen Trick aus Das macht man, indem man den “text-indent” (Texteinzug) auf -9000px setzt. Somit ist der Text unsichtbar und wird durch das Hintergrundbild ersetzt.
CSS-code:
h1 {
background: url(euer_hintergrund_bild.jpg);
text-indent: -9000px;
height:50px;
width:150px;
}
XHTML-code:
<h1>Eure Überschrift</h1>
