Diese Seite wird bereits seit mehreren Jahren nicht mehr gepflegt. Ich lasse sie aber zu Dokumentationszwecken vorerst weiterhin im Internet. Wenn die Zeit es zulässt, gestalte ich sie vielleicht mal komplett neu, aber das kann ich derzeit noch nicht sicher zusagen.
Eine sehr wichtige Anforderung an barrierefreie Webseiten ist der richtige Umgang mit Bildern. Wenn diese Vorgaben nicht beachtet werden, könnte es zu diesen Situationen kommen:
Dies sind nur einige Beispiele, die aber bereits eindrucksvoll zeigen, wo die Hürden beim falschen Bereitstellen von Bildern sind. Dabei ist es gar nicht so schwer, Bilder richtig zu präsentieren. Wenn Sie die folgenden Vorgaben beachten, haben die Besucher Ihrer Webseite zukünftig mehr von Ihren Bildern.
Im ersten Beispiel mit den farbigen Bild-Schaltflächen tritt neben der fehlenden Bildbeschreibung auch das Problem mit der Farbwahl auf. Ein Grundsatz sollte sein, dass Sie Informationen niemals von Farben abhängig übergeben sollten. Auch die Wahl von Bildern für den Sendemechanismus ist problematisch. Wenn das Bild aus technischen Gründen nicht angezeigt wird und keine Bildbeschreibung vorhanden ist, weiß kein Besucher wo er klicken soll.
In solchen Fällen sollte auf die tolle optische Darstellung zu Gunsten einer besseren Handhabung verzichtet werden. Anstatt der Bilder könnte der Web-Entwickler reguläre Formular-Bedienfelder nutzen und diese so einstellen, dass sie bei Bedarf auch vergrößert werden können.
Meistens hat der Großteil der Bilder auf einer Webseite einen rein gestalterischen Sinn. Würde man all diesen Bildern eine ausführliche Bildbeschreibung geben, würde man die Besucher damit eher nerven. Schließlich erhalten sie dann keine wichtigen Zusatzinformationen, sondern werden nur mit redundanten sinnlosen Informationen überhäuft. Die vorgelesene Bildbeschreibung einer Layoutgrafik könnte sich dann zum Beispiel so anhören: „Grafik: Layoutgrafik“. Daraus kann der Besucher keine brauchbare Information ziehen.
Wenn man stattdessen das oben genannte Beispiel des Kuchendiagramms mit den Wahlergebnissen nimmt, ist eine ausführliche
Beschreibung sehr wichtig. Die Informationsfülle eines Diagramms können Sie jedoch nicht nur als kleine Bildbeschreibung
(alt="Wahl-Diagramm" oder title="Diagramm
mit den Wahlergebnissen") hinterlegen. Hier macht es Sinn,
die Informationen nochmal eindeutig im Fließtext in Form einer kleinen Datentabelle oder einer Auflistung zu hinterlegen.
Als Faustregel gilt also: Vergeben Sie Bildbeschreibungen nicht wahllos, sondern machen Sie sich darüber Gedanken welche Bilder auf der Webseite wirklich Informationen vermitteln. Bei Bildern ohne informativen Wert lassen Sie das Beschreibungs-Attribut leer.
Man unterscheidet zwischen der Kurzbeschreibung (alt="") und dem Bildtitel
(title="").
Die Kurzbeschreibung wird an Stelle des Bildes angezeigt, wenn das Bild aus technischen Gründen nicht angezeigt werden kann. Sie
sollte daher immer sehr kurz und eindeutig gefasst sein. Der Bildtitel hingegen gibt eine erweiterte Information zum Bild und kann
daher auch etws länger sein. Er sollte jedoch nie mehr als 75 Zeichen beinhalten, da es Browser
gibt, die den Bildtitel automatisch nach dieser Zeichenanzahl abschneiden.
Bei reinen Layoutgrafiken lassen Sie das Attribut für die Kurzbeschreibung leer (kein Lehrzeichen machen!) und geben dem Bild kein Bildtitel-Attribut. Bei einem informativen Bild müssen Sie sich überlegen, welche Informationen mit diesem Bild transportiert werden. Idealerweise schreiben Sie diese Informationen direkt in den Fließtext. Damit gehen Sie am ehesten sicher, dass wichtige Infos nicht verloren gehen.
Falls Sie die Informationen nicht im Text unterbringen können, können Sie kurze Informationen im Bildtitel hinterlegen. Formulieren
Sie diese Information idealerweise als Satz, so dass es inhaltlich zum umgebenden Text passt, wenn dieser Titel von einem Vorlesegerät
vorgelesen wird. Das Problem hierbei ist jedoch, dass das Title-Attribut keine 100% zuverlässige
Möglichkeit ist Informationen zu
hinterlegen (siehe Probleme des
title-Attributs). Wenn es irgendwie möglich ist, sollten Sie daher wichtige Infos
immer in den Fließtext schreiben oder eine richtige Bildunterschrift als Text unter dem Bild plazieren.
Es gibt auch noch die Möglichkeit längere Informationen zu einem Bild mit dem longdesc-Befehl
zu verlinken.
In der Theorie können Sie so auf einer kleinen Extraseite ausführliche Informationen zu einem Bild hinterlegen. Das Problem hierbei ist,
dass der longdesc-Befehl in den verschiedenen Browsern
nicht ideal unterstützt wird. Ich gehe daher auf diese Möglichkeit hier vorerst nicht weiter ein.
<img src="vorstand.gif" height="250" width="250" alt="Foto" title="Schönes Foto eines Mannes"> <img src="vorstand.gif" height="250" width="250" alt="Vorstands-Portrait" title="Ein Portrait vom Vorstand Doktor Mustermann.">