ALT-Attribute richtig setzen

Heute im Himmeleinschen HTML-Horrorkabinett: (X)HTML-Bildattribute, die unbekannten Wesen.

Wer seine Bilder ohne ALT-Attribut einbindet, kann sich viel Ärger einhandeln. Der Web-Editor meldet bei der Syntax-Überprüfung das fehlende Attribut als Fehler -- spätestens beim Test der Behindertenkompatibilität. Auch der Web-Validator des W3C bemängelt fehlende Alt-Attribute.

Die unausweichliche Folge: Neuere Websites strotzen nur so vor sinnlosen ALT-Attributen wie "bild.jpg" oder "blaue Trennlinie". Die Ratio dahinter: Hauptsache, irgend ein ALT-Attribut im IMG-Tag; die Sinnfrage wird gar nicht mehr gestellt. Super gemacht, Leute.

Daher jetzt ein für alle Mal: So funktioniert das Alt-Attribut, und hierfür ist es einzusetzen. Damit mir danach keiner mehr sagt, er habe das nicht gewusst.

Grundsätzliche Syntax

HTML: <img src="bild.jpg" alt="Beschreibung" [...]>

XHTML: <img src="bild.jpg" alt="Beschreibung" [...] />

([...] steht als Platzhalter für weitere Attribute wie z.B. class, hspace, vspace, border usw.)

Wozu es gut ist

• als erklärende Beschreibung für Surfer mit Sehbehinderung oder ausgeschalteten Grafiken.
• wird bei der "normalen" Ausgabe (eingeschaltete Grafiken, kein Screenreader) einer Seite nicht angezeigt.

Wozu es nicht gut ist

... als QuickInfo / Tooltip zur Erklärung von Funktionen.

Beispiele (alles XHTML):

• Das Bild home.gif ist ein Button mit der Aufschrift "Hauptseite".
  Schlecht: <img src="home.gif" alt="Klicken Sie hier, um zur Hauptseite zurückzukehren." />
  Gut: <img src="home.gif" alt="Hauptseite" />  
• Das Bild ausflug.jpg zeigt einen Familienausflug.
  Schlecht: <img src="ausflug1.jpg" alt="Von links nach rechts: Toni, Heidi, Papi, Mami, Michi. Ich bin nicht drauf, ich stehe hinter der Kamera. :-)" />
  Gut: <img src="ausflug1.jpg" alt="Familienbild auf Ausflug" />

Warum sind die Beispiele schlecht?

Das Alt-Attribut soll den Inhalt eines Bildes beschreiben und nicht erklären.

Wie erzeugt man dann vernünftige Tooltips/QuickInfos?

Dafür gibt es das Title-Attribut.

Syntax: <img src="bild.jpg" title="Erklärung des Bilds" [...] />.

Das Title-Attribut hat den Vorteil, dass es auch mit anderen Syntaxelementen wie normalen Hyperlinks funktioniert. So können Sie also

<a href="link.html" title="Dieser Verweis öffnet eine neue Seite">Verweis</a>

angeben und wenn der Mauszeiger darüber schwebt, erscheint ein QuickInfo-Fensterchen mit dem Text "Dieser Verweis öffnet eine neue Seite." Ist doch cool.

Die obigen Beispiele sehen in der optimalen Form also so aus:

<img src="home.gif" alt="Hauptseite" title="Klicken Sie hier, um zur Hauptseite zurückzukehren." />

und

<img src="ausflug1.jpg" alt="Familienbild auf Ausflug" title="Von links nach rechts: Toni, Heidi, Papi, Mami, Michi. Ich bin nicht drauf, ich stehe hinter der Kamera. :-)" />

Nochmal zum Mitschreiben bitte?

Gern. Die richtige Syntax lautet:

<img src="bild.jpg" alt="Beschreibung" title="Erklärung" />

Auf den Punkt gebracht: "Alt für Sehbehinderte, Titel für Tooltops." Sehbehinderte, Surfer mit ausgeschalteten Bildern und meine Wenigkeit werden es Ihnen danken.

• viel zu lange "Mini-FAQ" zum Einsatz des Alt-Attributs