Wie der Zen-Geist ist auch der Accessibility-Geist ein Anfängergeist. Wir beginnen einfach immer wieder von vorne. Fehlern bei der Bildeinbindung begegnen wir bei jedem Accessibility Test. Sie stellen eine große Barriere für blinde Internet-NutzerInnen dar. Es ist also sinnvoll auch Ende 2013 noch über Alternativtexte zu reden.

Textalternativen für blinde Internet NutzerInnen

1. Screen-Reader BenutzerInnen brauchen eine Textalternative für Bilder. Das alt-Attribut bei Bildern ist allgemeiner Webstandard dafür.
2. Jedes Bild muss zumindestens mit einem leeren alt Attribut (alt=““) versehen sein. Ein Bild mit leerem alt-Attribut wird von Screen-Readern ignoriert.
3. Manche aktuelle Screen-Reader (z.b. JAWS, NVDA) ignorieren auch Bilder mit gänzlich fehlendem alt-Attribut, manche Screen-Reader geben jedoch den Bildnamen aus, der verwirrend und unverständlich sein kann. Die einzig zuverlässige Lösung ist immer noch das leere alt-Attribut.
   (Laut HTML5 Spezifikation – aktuell in der HTML5 Entwurfsfassung Dezember 2013 – ist es nur unter ganz bestimmten Voraussetzungen erlaubt, das alt-Attribut wegzulassen.)
4. Verlinkte Bilder benötigen unbedingt ein alt-Attribut mit Angabe des Linkziels (z.B. „Wienfluss – zur Startseite“ bei einem verlinkten Logo) . Das Ziel des Links soll zuerst dort stehen, ev. zusätzlich eine Information über das Bild.
5. Bei verlinkten Bildern mit leerem oder fehlendem alt-Attribut ist der Output von Screen-Readern nicht einheitlich. JAWS liest einen Teil des Linkpfades oder ein vorhandenes Link title-Attribut, VoiceOver liest nur “Hyperlink”.  Die sichere Lösung ist nach wie vor das Linkziel im alt-Attribut anzugeben.
6. Screen-Reader kündigen beim Vorlesen Bilder, die ein befülltes alt-Attribut haben, an mit: “Grafik” oder “Bild”. Ein Bild mit Leerzeichen im alt-Attribut (alt=“ „) wird also auch als Bild angekündigt.
7. Inhaltlich wichtige Bilder soll man mit einer Beschreibung im alt-Attribut versehen, so kurz und aussagekräftig wie möglich (1-5 Wörter, maximal 100 Zeichen).
   Gute Beispiele für verschiedenste Anwendungsfälle finden sich in der aktuellen Entwurfsfassung der HTML5 Spezifikation.
8. Komplexe Grafiken, wie Diagramme benötigen eine zusätzliche Information in Textform, weil sich die Bedeutung nicht via alt-Text allein vermitteln lässt.
9. Zusätzlicher erklärender Text zu einem Bild kann mit dem aria-describedby Attribut exakt dem Bild zugeordnet werden, wenn er  in der Lesereihenfolge nicht direkt anschließt.
10. Der alt-Text (alt=“…“) darf keine zusätzlichen Anführungszeichen „“ enthalten.
11. Platzhalterbilder, Dekobilder und inhaltlich unwichtige Bilder soll man mit leerem alt-Attribut (alt=““) versehen, damit sie von Screen-Readern ignoriert werden können.
12. Inhaltlich nicht wichtige Icons neben Textlinks und grafische Listenpunkte soll man besser im CSS als Hintergrundbilder definieren, ansonsten mit leerem alt-Attribut (alt=““). Dies gilt auch, wenn das Icon Teil vom Link ist.
13. Wichtige Information soll nicht nur über Hintergrundbilder allein transportiert werden, z.B. CSS Sprites für Icons, die als Bedienelemente fungieren. Hier braucht es auch einen grafisch versteckten Textersatz.
    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;) oder mit “clip” beschneidet und damit grafisch versteckt.
14. Redundante Information soll man vermeiden (z.b. der gleiche Inhalt in alt- und title- Attribut und Bildunterschrift oder alt=“Bild:Beschreibung vom Bild“), weil doppelt gegebene Information störend und verwirrend ist.
15. Das Auslesen des Bild title-Attributs ist meist deaktiviert in Screen-Readern, deshalb soll dort keine zentral wichtige Information stehen.
16. Copyrightangaben: Das Verstecken von © Angaben im alt-Attribut ist eine missbräuchliche Verwendung. Es genügt nicht dem Copyright (man sieht es nicht) und nützt Screen-Reader BenutzerInnen wenig. Copyright im title-Attribut wird am Desktop bei mouse-over angezeigt, es ist aber nicht für Touch Screens geeignet. Copyright Angaben soll man deshalb am besten als immer sichtbare Bild Caption einfügen.

Optimierung von Bildern für Menschen mit Sehschwächen

1. Bild title-Attribute werden bei mouse-over angezeigt. Beim Zoomen bleiben sie klein und stören mehr als sie nützen. Bei Verwendung von Zoom Software werden sie vergrößert, ragen aber häufig über den gerade sichtbaren Bildschirmausschnitt hinaus.
2. Kleine Textgrafiken soll man vermeiden, weil sie beim Zoomen schlechter lesbar sind als richtiger Text.
3. Text in Grafikform muss zumindestens groß und gut lesbar sein und muss ein alt-Attribut, das die idente Textinformation enthält, haben.
4. Internet NutzerInnen mit starker Seheinschränkung verwenden auch die Sprachausgabe ihrer Zoomsoftware oder Screen-Reader. Es gelten also die gleichen Vorgaben wie für Screen-Reader.
5. Bei Grafiken, in denen Farben Bedeutungsunterschiede transportieren, wie z.b. Balken- oder Tortendiagramme, ist auf ausreichende Kontraste zu achten. Wenn z.B. rot und grün mit ähnlichem Helligkeitswert verwendet werden, sieht ein User mit Rot-Grün Blindheit möglicherweise nur eine sehr ähnliche bräunliche Farbe für rot und grün. Was genau gesehen wird bei diversen Farbfehlsichtigkeiten, ist individuell unterschiedlich. Eine einfache Methode um bedeutungsunterscheidende Farben in Diagrammen zu testen, ist ein Schwarz-Weiß Ausdruck.
6. Textgrafiken soll man besser nicht mit transparentem Hintergrund abspeichern, bzw. muss man kontrollieren, ob man sie im Kontrastmodus (z.B. auf schwarzem Hintergrund) noch lesen kann.
7. Den Kontrastmodus testen kann man in Windows unter Systemsteuerung / Eingabehilfen / Anzeige. Im Opera auch sehr gut im Benutzermodus.
8. Im Kontrastmodus von Windows werden Hintergrundbilder ausgeblendet. Wichtige Information soll deshalb nicht allein über in CSS definierte Hintergrundbilder (z.B. CSS Sprites)  transportiert werden .
9. Vorsicht ist auch bei Image Replacement Techniken geboten, d.h. bei Auslagerung von Bildern als Hintergrundbilder ins CSS kombiniert mit grafisch verstecktem Text, auch wenn dieser screenreadertauglich ist.Menschen mit Sehbehinderungen verwenden nicht immer Zoomsoftware, sondern verändern die Benutzereinstellungen im Browser. Sie verwenden den Kontrastmodus von Windows oder schalten Farbinformationen weg (z.b. unter Extras / Internetoptionen / Eingabehilfen). Damit schalten sie Hintergrundbilder aus und verlieren durch das aus dem Sichtfeldschieben eines versteckten Textes jede Information. Text kann für diese Zielgruppe unterhalb des Hintergrundbildes versteckt werden, in gleicher Farbe wie der Hintergrund (dies führt aber zu Validierungsfehlern und möglicherweise Suchmaschinenproblemen) oder außerhalb des zugehörigen Containers.Man kann aber auch argumentieren, dass User vorhandene Zoomsoftware verwenden sollen, wenn sie sie benötigen, und es nicht Aufgabe von Webentwicklern ist auf alle möglichen individuellen Benutzereinstellungen Rücksicht zu nehmen.

Optimierung für Menschen mit motorischen Einschränkungen

1. Verlinkte Bilder / Icons sollen groß genug sein, um bei motorischen Problemen (gestörter Feinmotorik, Zittern) leichter klickbar zu sein. Man  kann Icons mit größerem transparentem Bereich  abspeichern oder im CSS ein padding  definieren, damit die Klickfläche größer wird.
2. Bild title-Attribute werden nur bei mouse-over, nicht bei Tastaturfokus angezeigt.
3. Der Mauszeiger ändert sich nicht (von Pfeil zur Hand) bei Navigation mit der Tastatur. User, die keine Maus benutzen, benötigen also einen zusätzlichen Fokus Indikator bei verlinkten Bildern, z.B. eine sich ändernde Rahmenfarbe oder die browsereigene Darstellung mit strichliertem oder farbigem Rahmen. Die CSS Definition outline:0 bei Links schaltet diese Markierung  aus.