aktualisiert am 18.7. 2007

Textalternativen

1. alt Attribut bei Bildern ist allgemeiner Webstandard, Screen-Reader BenutzerInnen brauchen den Alternativtext.
2. Screen-Reader kündigen beim Vorlesen Bilder an mit: Grafik (im strukturierten Modus zeigt es auch die Braille Zeile an??).
3. Inhaltlich wichtige Bilder mit Beschreibung, so kurz und aussagekräftig wie möglich.
4. Keine redundante Information (z.b. gleiche Info in alt und title und Bildunterschrift oder alt=“Bild:Beschreibung vom Bild“).
5. Ausblendung des ev. störenden Tooltipps bei mouseover im Internet Explorer erreicht man durch leeren title=”".
6. Verlinkte Bilder benötigen unbedingt alt Attribut mit Angabe des Linkziels. Ziel des Links soll zuerst im alt stehen, ev. zusätzlich Bildinfo.
7. title Attribut ist by default ausgeschalten in Screen-Readern, deshalb keine zentral wichtige Info in title.
8. Verstecken von © Angaben im alt ist eine missbräuchliche Verwendung, es genügt nicht dem Copyright und nützt Screen-Reader BenutzerInnen nichts.
9. Platzhalterbilder (spacer.gifs, wenn man sie noch nötig hat…) und ev. auch inhaltlich unwichtige Bilder mit leerem alt=““, damit sie von Screen-Readern ignoriert werden können.
10. Inhaltlich nicht wichtige Icons neben Textlinks und grafische Listenpunkte besser im CSS definieren, ansonsten mit leerem alt=”"

Optimierung für Menschen mit Sehschwächen

1. Textgrafiken wenn möglich vermeiden, weil sie beim Zoomen schlecht lesbar sind.
2. Text in Grafikform muss zumindestens groß und gut lesbar sein und sollte ein alt Attribut haben.
3. Vorsicht bei Image Replacement Techniken (d.h. Auslagerung von Bildern als Hintergrundbilder ins CSS + verstecktem Text). Verstecken von Text mit display:none ist nicht screen-reader-tauglich. Für Screen-Reader kann die Textinformation gegeben werden, in dem man sie außerhalb des Viewports positioniert (z.B. left:-1000px;) und damit grafisch versteckt.

   Menschen mit Sehbehinderungen, die nicht Zoomsoftware verwenden, sondern die Benutzereinstellungen im Browser verändern (z.b. den Kontrastmodus von Windows verwenden oder Farbinformationen wegschalten – unter Extras / Internetoptionen / Eingabehilfen) schalten damit Hintergrundbilder aus. Sie verlieren durch das aus dem Sichtfeldschieben des Textes jede Information.

   Text sollte für diese Zielgruppe besser unterhalb des Hintergrundbildes versteckt werden, in gleicher Farbe wie Hintergrund (gibt Validierungsfehler) oder außerhalb des zugehörigen Containers.

4. Textgrafiken besser nicht mit transparentem Hintergrund abspeichern, bzw. kontrollieren, ob man sie im Kontrastmodus (z.b. auf schwarzem Hintergrund) noch lesen kann.
   Kontrastmodus testen kann man mit Windows unter Systemsteuerung / Eingabehilfen / Anzeige. Im Opera auch sehr gut im Benutzermodus.

Optimierung für Menschen mit motorischen Einschränkungen

1. Verlinkte Bilder / Icons sollten groß genug sein, ev. transparenten Rahmen rundherum lassen, damit die Klickfläche größer wird.