Einstieg in Barrierefreies Webdesign

Bilder können nicht nur ein Mittel sein um Sachverhalte oder Situationen in Infografiken oder Fotos zu erklären. Auch werden Bilder und Grafiken in Layouts verwendet, um bestimmte Anmutungen zu erzeugen. In einer modernen und möglichst barrierefreien Webseite gestaltet man auch die Anmutung eines Layouts durch Grafiken mittels CSS, um die geforderte Trennung zwischen Layout und Struktur konsequent einzuhalten.

Dekorative Bilder

Als dekorativ werden Bilder ohne einen informativen Kontext bezeichnet, zum Beispiel Hintergrundgrafiken oder Verläufe als Verzierde. Diese sollten möglichst nur in den CSS - Stilen aufgerufen werden, da ansonsten in CSS - unfähigen Browsern diese dekorativen Bilder einfach in der Luft hängen würden, da sie ja an das Layout des CSS - Stils gebunden sind und unnötige Ladezeiten verursachen. Es ist nicht direkt untersagt dekorative mittels HTML einzubinden, aber es sorgt folglich zu recht unschönen Effekten, wie oben beschrieben.

Möchte man nun ein dekoratives Bild mittels HTML einbinden, so muss man auf jeden Fall ein leeres alt - und title - Attribut angeben, wodurch man Textbrowsern und Screenreader mitteilen kann, dass hinter dem Bild sich keine relevanten Informationen befinden, wie es schon unter "HTML - Bilder als Layoutelemente" beschrieben wurde.

Was auf jeden Fall vermieden werden sollte ist, Bilder und Grafiken mit einem informativen Kontext - zum Beispiel Stadtpläne oder Diagramme - mittels CSS einzubinden. Denn CSS hat keine Fähigkeiten Bildern einen Kontext mitzugeben, wie es unter HTML mit den Attributen alt und longdesc möglich ist.

Hintergründe

In einer strikten Trennung von Layout und Bildern landen nun die dekorativen Bilder in den CSS - Stilen. Dazu werden die background - Eigenschaften verwendet. Für Bilder gibt es:

• background-image
• background-repeat
• background-postion
• background-attachment

Mit background-image wird das Hintergrundbild geladen, mit background-repeat legt man fest, ob und wie das Hintergrundbild wiederholt wird und background-postion legt die Positionierung des Hintergrundbildes fest. Mit background-attachment wird festgelegt, ob das Hintergrundbild mitscrollen oder fixiert sein soll.

Alle Eigenschaften funktioneren in allen Browsern, ein fixierter Hintergrund ( background-attachment:fixed; ) sorgen auf schwächeren Rechnern für ein zäheres Scrollen . Ansonsten kann man bedenkenlos alle Eigenschaften verwenden.

In Kombination mit anderen Eigenschaften wie padding, lassen sich ansprechende Effekte und Designs erzielen, die mit herkömmlichen Tabellenlayout schwer umzusetzen ließen. Viele gängige Tutorials im Internet bieten hierfür Anleitungen an.

Beachten sollte man bei den Hintergründen, dass der Kontrast zwischen Hintergrund und Bild nicht die Lesbarkeit beeinträchtigt und sollte man auch an die Menschen mit Farbsehschwächen denken, in dem man mit der color - Eigenschaft die Schriftfarbe an den Hintergrund anpasst. Bei transparenten Hintergrundbildern sollte auch eine passende Hintergrundfarbe gewählt werden.

CSS - Eigenschaften für img - Elemente

So gut wie alle Eigenschaften sind auch bei Bildern (dem img - Element) anwendbar. Diese Eigenschaften können somit zur Verbesserung der Ästhetk und der Anmutung des Layouts und auch der Bilder selbst beitragen. Neben den gewöhnlichen Eigenschaften, wie Rahmen und Abstände, gibt es unter CSS Eigenschaften, die bei Bildern nette Effekte auslösen.

Text um Bilder umfließen

Im Prinzip ist es sehr einfach mittels CSS einen Text um ein Bild umfließen zu lassen. Man gibt dem img - Element die Eigenschaft float mit den Werten left oder right, um das Bild an die linke oder rechte Seite anzuordnen, so dass der Text entsprechend das Bild umfließen kann. Mit den Eigenschaften padding und/oder margin legt man die Abstände zwischen Bild und umfließenden Text fest. Beachten sollte man aber folgendes:

• Der Text sollte in einem Absatz oder wenigstens einem Blockelement liegen
• Das img - Element muss im Quelltext vor dem zu umfließenden Text auftauchen, damit der Text diesen umfließen kann.

Was unter der derzeitigen CSS - Spezifikation nicht möglich ist, sind umfließender Text um ein zentriertes Bild.

Hier sind einige Beispiele für umfließenden Text.

Hintergründe für Bilder

Man kann auch Hintergründe für Bilder anlegen, was nur auf den ersten Blick etwas sinnlos erscheint. So kann man einen Hinweis mit dem Text "Bild wird geladen" als Grafik in den Hintergrund setzen. Solange das eigentliche Bild geladen wird, sieht der Anwender den Hintergrund des img - Elements. Gerade bei sehr großen Bildern wäre dies eine gute Option.

Oder man kann auch mit kleinen Grafiken die leeren Felder verschönern, die beim längerem Laden entstehen. Beachten sollte man aber dabei, dass die Hintergründe nicht zu groß werden - ein wenige Kilobyte großes Hintergrundbild reicht völlig aus - um zu hohe Ladezeiten bei geringen Bandbreiten zu verhindern.

Image-Replacement

Möchte man an Stelle der Seitenüberschrift - das h1 - Element - ein Logo haben, so könnte man es auf diese Weise umsetzen.

<h1><img src="logo.jpg alt="Ein schönes Weblog" title="Ein schönes Weblog" /></h1>

Diese Variante ist zwar valide, hat aber einen Haken. Viele Webbrowser, sei es der Internet Explorer, ein Textbrowser oder Screenreader, können den Alternativtext nicht als h1 - Überschrift darstellen. Dass heißt, der Text wird als gewöhnlicher Text angezeigt und somit kann nicht sicher gestellt werden, dass die Semantik auch von sämtlichen Browsern oder auch Suchmaschinen richtig erkannt wird. Um dies zu gewährleisten muss die Überschrift als Text verfügbar bleiben.

<h1>Ein schönes Weblog</h1>

Man kann nun mit den CSS - Eigenschaften background-image, width, height und so weiter ein Logo als Hintergrundbild einsetzen. Die Frage ist nur noch: Was macht man nun mit dem Text? Hierzu verwendet man sogenannte Image-Replacementverfahren an, wodurch mittels CSS ein HTML - Element mit einem Bild ersetzt und der Text ausgeblendet wird.

Verfahren gibt es viele, die auf verschiedenen Ebenen wie HTML, JS oder PHP funktionieren. Die meisten Verfahren auf der HTML - Ebene benötigen auch ein span - Element, dass den Text umspannt.

<h1><span>Ein schönes Weblog</span></h1>

Ein gutes IR - Verfahren kann mit folgenden Szenerien klarkommen, dass heißt entweder den Text oder das Bild in sämtlichen Browsern darstellen.

• CSS aktiviert, Bilder aktiviert
• CSS deaktiviert, Bilder deaktiviert
• CSS aktiviert, Bilder deaktiviert
• CSS deaktiviert, Bilder aktiviert

Als bewährt hat sich das Fahrner Image Replacement erwiesen, kurz FIR, obwohl es bei aktiviertem CSS und nicht angezeigten Bildern der Text nicht angezeigt wird. Es hat sich in der Hinsicht bewährt, weil der Quelltext in dem Fall valide und semantisch sinnvoll ist, im Gegensatz zu anderen IR. Für FIR muss der Text mit einem span - Element umgeben sein und es müssen folgende Regeln im Stil enthalten sein.

h1 {
  background: url(logo.gif);
  height: 25px;
  width: 250px;
}

h1 span {
  visibility: hidden;
}

Der h1 - Selektor lädt mit background ein Bild in den Hintergrund, und mit width und height werden die Maße der h1 - Box an die Bildgröße angepasst. Der "h1 span"-Selektor macht mit visibility:hidden; den Text unsichtbar, so in der "offiziellen Variante" mit FIR. Da aber einige Fahrner Screenreader Probleme mit visibility- und display - Werten haben, siehe Problemlösungen - Screenreader, empfiehlt eher folgende Variante.

h1 {
  background: url(logo.gif);
  height: 25px;
  width: 250px;
}

h1 span {
  position:absolut;
  width:200px;
  left:-5000px;
}