HTML-Grafiken: Sinn, Zweck und Verwendung des ALT-Attributs

Wer seine Seite schon mal durch einen Validator laufen gelassen hat, der bekam wie hier beim W3C-Validator sicherlich auch schon folgende Meldung:

Was hat es mit dem ALT-Attribut auf sich?

Eine Grafik wird üblicherweise mit dem Tag <img> eingebunden. Der vollständige Code für das Einbinden einer Grafik könnte also in etwa so lauten:

Seit HTML 4.0 und in XHTML sowieso, muss hier aber noch das Attribut ALT in den Code eingefügt werden:

ALT steht für „Alternativtext“. Der Alternativtext wird immer dann angezeigt, wenn ein Besucher einen Browser benutzt, der keine Grafiken anzeigen kann oder wenn er das Laden von Grafiken absichtlich ausgeschaltet hat. Darüber hinaus können auch Suchmaschinen keine Grafiken „sehen“, dafür können sie aber den Alternativtext lesen und in Suchmaschinen-Index aufnehmen.
Wer profitiert also von einem Alternativtext für Grafiken?

• Sehbehinderte und Blinde, die auf einen Screenreader (Programm, welches Internetseiten vorliest) angewiesen sind.

• Sehbehinderte und Blinde, die Internetseiten in Brailleschrift lesen.

• Der Webmaster einer Seite, weil Grafiken für Suchmaschinen keinen Inhalt haben. Sie können aber sehr wohl den Alternativtext sehen und ihn indexieren. Davon profitiert wiederum das Ranking der Seite.

• Menschen, die das Laden von Grafiken in ihrem Browser deaktiviert haben (z. B. Modembenutzer, um die Ladezeit zu verbessern).

• Menschen, die mit Textbrowsern surfen.

• Alle Besucher ihrer Seite, in dem Fall dass eine Grafik aus irgendwelchen Gründen auf dem Server nicht mehr existent ist.

Wie soll der Alternativtext aussehen?
Der Alternativtext soll eine Grafik ersetzen, im gewissen Maß soll er auch eine Grafik beschreiben. Schreiben sie aber keinen Roman (wenn sie für ein Bild eine längere Beschreibung einfügen möchten, können sie ergänzend zu ALT das Attribut longdesc benutzen). Stellen sie sich einfach vor, welche Information für einen Blinden nützlich sein könnte, damit dieser eine ungefähre Vorstellung von dem Inhalt der Grafik hat. Ergo wäre ein Alternativtext wie „roter Punkt“ unsinnig.

Ein negatives Beispiel für den Gebrauch von Alternativtexten möchte ich hier einmal demonstrieren.
Stellen sie sich vor, sie haben eine Liste oder eine Aufzählung. Vor dieser Liste kommt vor jedem einzelnen Listenpunkt unser roter Punkt. Dieser rote Punkt ist natürlich als Grafik eingebunden und wurde mit dem Alternativtext „roter Punkt“ versehen. Wie sähe unsere Liste aber für einen Blinden aus? Sehen sie selbst:

Sie stellen wahrscheinlich selbst fest, dass „roter Punkt“ ein eher ungünstiger Alternativtext ist. Zum einen taucht „roter Punkt“ nun bei jedem Eintrag auf und würde von einem Screenreader immer wieder vorgelesen, zum anderen muss man sich Fragen, ob es Sinn macht, etwas als rot zu bezeichnen, wenn ein Blinder keine Farben kennt (jedenfalls nicht so, wie Sehende sie kennen).
Benutzen sie stattdessen doch lieber einen Stern, oder ein Bindestrich — je nach Belieben. Dadurch sieht es gleich eleganter aus:

Todsünde Nr.2: Muss ich alle Grafiken mit einem Alternativtext versehen?
Nein! Es sollten nur Grafiken einen Alternativtext bekommen, die auch inhaltlich-semantische Bedeutung haben. Layoutgrafiken, die nur gestalterischen Zweck haben, sollten auf keinen Fall einen Alternativtext bekommen. Welchen Blinden interessiert es, wo sich genau ihre Layoutgrafiken befinden und wie sie aussehen? Was soll jemand, der Grafiken ausgeschaltet hat, mit Wortfetzen wie „Banner“, „Container rechts-oben“, „rechter Rand“ anfangen? Es stört nur, macht den eigentlichen Inhalt unübersichtlicher und die vorhandene Bildschirmfläche kleiner.
Also: lassen sie den Alternativtext einfach leer. Dadurch kommen wir auch gleich zur 3.Todsünde…

Todsünde Nr.3: Was passiert, wenn der Alternativtext ganz weggelassen wird?
Viele (Text-)Browser, Screenreader oder Braille-Lesegeräte zeigen dann den Dateinamen ihrer Grafiken an. Das ist natürlich nicht besonders nützlich, sondern eher störend. Screenreader lesen dem Blinden die Dateinamen vor. Besonders wenn die Dateinamen sehr obskur ausgewählt sind, wird die Idiotie eines völlig weggelassenen ALT-Attributs deutlich:

Also eine kleine Merkliste:

• ALT-Tag nur für Bilder ausfüllen, die inhaltlich relevant sind. Für reine Layoutgrafiken sollte kein Alternativtext definiert werden.

• Lassen sie das ALT-Attribut niemals weg. Wenn sie keinen Alternativtext eintragen wollen, dann erstellen sie einfach ein „Dummy“ und lassen den eigentlich Alternativtext weg: <img src="grafik.jpg" alt="">. Dies wird bei Validatoren nicht als Fehler angesehen.

• Schreiben sie kurze und bündige Alternativtexte. Schreiben sie nur Dinge in den Alternativtext, mit denen ein Blinder auch was anfangen kann (also keine Farben z. B.).

• Der Alternativtext soll in erster Linie eine Grafik ersetzen und erst in zweiter Linie dessen Inhalt beschreiben. Wenn wir - wie oben bei unserer Liste - eine Grafik benutzen, um einen neuen Listeneintrag zu verdeutlichen, dann überlegen sie, wie sie denselben Effekt mit einem Zeichen bewirken können (z. B. indem sie ein Sternchen oder ein Bindestrich dafür nehmen).

Zum Schluss noch ein weiterer kleiner Fehler, der von vielen Hobby-Webmastern begangen wird.
Der Internet Explorer hat die Unart, den Alternativtext als Tooltip anzuzeigen, wenn man mit der Maus über eine Grafik mit Alternativtext fährt. Dies ist kein W3C-standardkonformes Verhalten. Wenn sie den beschrieben Effekt erzielen möchten, nämlich dass beim Überfahren mit der Maus ein zusätzlicher Hinweis für die Grafik angezeigt wird, dann benutzen sie das TITLE-Attribut: