Schafe im Schnee
Bilder machen jede Webseite schöner, genauso wie Schnee im Winter die Landschaft schöner macht. Doch wenn der Schnee schmilzt oder die Bilder nicht angezeigt werden, kann das ein trostloser Anblick sein. Sandra Kallmeyer zeigt, wie man trotz abgeschalteter Bilder nicht auf Informationen verzichten muss.
Eine Website muss natürlich auch bei abgeschalteten Bildern lesbar bleiben. Dies wird dann knifflig, wenn Schrift auf einem Bild steht und die Schriftfarbe dieselbe wie die Hintergrundfarbe ist. In den meisten Fällen können wir uns jedoch mit einem kleinen Trick behelfen.
Die Ausgangssituation
Nehmen wir als Beispiel einen Text, der in weißer Schrift auf einem Foto steht und dieses wiederum auf weißem Hintergrund.

Das Problem
Schauen wir uns dies nun ohne Bilder an, bleibt etwas übrig, das an die ostfriesische Nationalflagge erinnert, nämlich weiße Schrift auf weißem Grund. Von unserer liebevoll getexteten Bildunterschrift keine Spur. Lediglich der Alternativtext des Bildes ist zu sehen.

Wir brauchen also eine Möglichkeit, die Hintergrundfarbe zu ändern, sobald keine Bilder angezeigt werden.
Die Lösung
Um die Hintergrundfarbe zu ändern, sobald wir die Bilder abschalten, erzeugen wir die Hintergrundfarbe einfach mit einem Bild. Wir bauen uns in diesem Fall also eine schneeweiße Hintergrundkachel. Wir setzen die eigentliche Hintergrundfarbe auf Schwarz und legen darüber unsere weiße Kachel.
- background: url(kachel.gif) #000;
Schalten wir nun die Bilder ab, verschwindet auch die weiße Kachel, der schwarze Hintergrund wird sichtbar und unsere weiße Schrift ist darauf großartig lesbar!

Leider ist nun unser Alternativtext „Schafherde im Schnee“ nicht mehr zu sehen. Zum Glück können wir diesem jedoch auch eine Farbe zuweisen, in unserem Beispiel Weiß:
- img { color: #fff; }
Das dürfen wir bedenkenlos tun, weil wir diesen Text sowieso nur bei abgeschalteten Bildern zu sehen bekommen. Das Ergebnis sieht dann so aus:

Da so viel Schwarz ziemlich trüb wirkt, können hier noch kreativ werden und stattdessen für unsere Schafe ein saftiges Grün wählen. Wir müssen dabei nur sicher stellen, dass der Kontrast zur Schriftfarbe noch ausreicht, z.B. mit der Juicy Studio Accessibility Toolbar.
Wer mag, kann sich am Alternativtext bei der Gelegenheit auch noch typografisch austoben, um die bilderlose Ansicht ein wenig aufzupeppen:
- img {
- font: italic small-caps bold 2em/5 Georgia, serif;
- color: #fff;
- }
Nicht alle Angaben werden von allen Browsern interpretiert. Das macht aber nichts, da dies ja nur dazu dient, alles ein wenig hübscher zu machen. Im Firefox 3.5 schaut das fertige Beispiel so aus:

Wir merken uns: bei weißem Schaf auf weißem Grund: Schneedecke abtauen, Wiese sichtbar machen! :)
Viel Spaß beim Ausprobieren!
Kommentare
Renate Hermanns (Webkraut)
am 18.12.2009 - 08:48
Gute Idee, kannte ich noch nicht. Unbedingt merken!
Schepp
am 18.12.2009 - 10:05
Solange das Bild nicht mit Transparenzen daherkommt, könnte man ihm alternativ auch per CSS eine dunkle Hintergrundfarbe verabreichen.
Lupus
am 18.12.2009 - 10:54
Diese Sache hat nur einen Haken. Wenn man davon ausgeht das man noch einen anderen Text hat der schwarz gefärbt ist wird dieser dann unlesbar. Also ist das nur eine bedingte Lösung die man eventuell in einer Box anwenden kann, aber nicht für die ganze Website.
Dennoch ein wirklich guter(gutes?) Workaround.
mcnesium
am 18.12.2009 - 13:01
ich halte das für umständliches gefrickel. wenn die website lädt und dann erst alles schwarz ist und dann auf einmal weiß, fängt der monitor an zu flackern. der container des bildes muss dann sowieso eine feste größe haben, sonst erkennt der user nicht, dass da eigentlich ein bild sein sollte, und das absolut positionierte textfeld hängt irgendwo im nirvana. außerdem hat das bild (mit den runden ecken) ja schon einen weißen hintergrund. warum muss dann noch ein kachel.gif dahinter liegen?
Die Kommentare sind geschlossen.