Warum ALT Attribute Pflicht sind

Nach den HTML 4.0 Spezifikationen ist für jedes Bild das mit <IMG> eingebunden wird, ein ALT Attribut notwendig. Dieser Artikel soll erläutern, warum das so ist, und wie man das Attribut richtig einsetzt. Einige Leser halten es für sinnvoll, sich zuerst die schlechten Beispiele anzusehen.

Wofür gibt es das ALT Attribut überhaupt?

Das ALT Attribut soll einen alternativen (!) Text für ein Bild enthalten um den Inhalt des Bildes auch dann zugänglich zu machen, wenn der User-Agent (z.B. der Browser) keine Bilder unterstützt oder der Benutzer das automatische Laden von Bildern deaktiviert hat. User-Agents die mit Bildern nichts anfangen können sind u.a. Robots von Suchmaschinen, die zwar Bilder nicht verstehen, aber den ALT Text in ihre Datenbank aufnehmen können Ein sinnvoller ALT Text kann also auch die Plazierung in den Suchmaschinen positiv beeinflussen. Auch Browser die auf einem einfachen Text-Terminal laufen wie z.B. Lynx oder Browser für Blinde, die den Text in Brailleschrift umwandeln, damit der auch für Blinde zugänglich ist oder auch die langsam auf den Markt kommenden Voicebrowser, die Text in Sprache verwandeln, welche man dann über den Computer oder auch über ein Telefon hören kann sind auf vernünftige ALT Attribute angewiesen. Eine Gruppe an die man aber auf jeden Fall denken sollte sind die Leute, die in ihrem Browser das automatische Laden von Bildern absichtlich deaktiviert haben, weil sie z.B. nur mit einem langsamen Modem unterwegs sind.

Bilder ohne inhaltliche Funktion

Einige Autoren benutzen Bilder um das Design aufzuwerten. Das will ihnen auch keiner absprechen. Sie sagen, daß diese Bilder keinen ALT Text brauchen, da die Bilder ja auch keine Inhaltliche Bedetung haben. So einfach ist das aber leider nicht. Wenn kein ALT Text angegeben wird, muß der User-Agent auf eine andere Weise versuchen, daß Bild zu ersetzen. Es gibt in der Praxis unterschiedliche Möglichkeiten, wie das geschehen kann. Lynx z.B. stellt dann den Dateinamen oder den Platzhalter [INLINE] dar, was vor allem bei vielen Grafiken merkwürdig aussieht, bzw. sich bei Voicebrowsern sehr merkwürdig anhören würde. Daher muß man Bilder ohne inhaltliche Bedeutung auch als solche markieren, mit ALT="". Dann weiß der Browser, daß die Grafik nur zu Layoutzwecken benutzt wird, und stellt dem Bild entsprechend nichts dar. Wenn man ALT="" nicht setzt, riskiert man, daß das gesamte Dokument unleserlich wird. Das will man seinen Besuchern doch nicht antun, oder?

Title und Longdesc

Wenn man aber erweiterte Informationen zu einem Bild anbieten möchte, gibt es für das IMG Element zwei weitere Attribute: Title und Longdesc.

Das Title Attribut besitzen fast alle HTML Elemente. Es dient dazu, erklärende Informationen zu einem Element zu liefern. So kann man z.B. einen Link näher erläutern, ein Akronym auseinanderziehen oder weitere Informationen zu einem Bild liefern. Der Inhalt des Title Attributs wird dann als ToolTip dargestellt.

Wenn man verhindern will, daß ein ALT Text als ToolTip erscheint, benutzt man Title="".

Mit Hilfe des Longdesc Attributs kann man einen Link zu einer längeren Beschreibung eines Bildes setzen. Ein Beispiel könnte so aussehen:


<IMG SRC="umsatz98.gif" ALT="Umsatzentwicklung 1998"

      Longdesc="umsatz98-Longdesc.html">

und in umsatz98-Longdesc.html:

Ein Diagramm, das die Umsätze von 1998 zeigt. Das Diagramm ist ein Balkendiagramm und zeigt die prozentualen Umsatzsteigerungen pro Monat. Der Umsatz von Januar auf Februar ist um 10% gestiegen ...

Für User-Agents die das Longdesc Attribut nicht unterstützen sollte man zusätzlich einen Beschreibungslink direkt neben der Grafik einfügen:


<IMG SRC="umsatz98.gif" ALT="Umsatzentwicklung 1998"

      Longdesc="umsatz98-Longdesc.html">



<A HREF="umsatz98-Longdesc.html" TITLE=

   "Beschreibung des Umsatzentwicklung 1998 Diagramms">[D]</A>

Das [D] wird offiziell empfohlen und sollte nach Möglichkeit auch benutzt werden um es den Menschen nicht unnötig schwer zu machen, einen solchen Link zu erkennen.

Image Maps

Eine Image Map ist ein Bild das "aktive Regionen" besitzt.
Autoren sollten Client-side Image Maps (mit "usemap") benutzen, anstatt von Server-side Image Maps (mit "ismap"), weil letztere ein spezielles Eingabegerät erfordern. Wenn man AREA benutzt, um eine Region zu definieren, muß für AREA ein ALT Text benutzt werden. Ein Beispiel:


<IMG SRC="willkommen.gif"

 ALT="Image Map der Bereiche der Bibliothek" USEMAP="#map1">



<MAP NAME="map1">

  <AREA SHAPE="rect" COORDS="0,0,30,30" HREF="kinder.html"

   ALT="Kinderbuecher">

  <AREA SHAPE="rect" COORDS="34,34,100,100"

   HREF="romane.html" ALT="Romane">

</MAP>

So kann man die Links auch benutzen, wenn man das Bild nicht sieht.

ALT Text als ToolTip

Bei einigen Browsern, wie z.B. dem Internet Explorer von Microsoft oder dem Netscape Navigator werden ALT Texte als sogenanntes ToolTip über dem Bild dargestellt, wenn man den Mauscursor darüber hält. Das ist falsch! ALT Texte dienen als Alternative zum Bild weshalb sie auch nur dann dargestellt werden sollten, wenn man das Bild nicht sieht. Einige Autoren hat das verwirrt, und sie benutzen den ALT Text für andere Informationen als einen Bildersatz (Beispiele dazu im Horrorkabinett). Wenn man erweiterte Informationen zu einem Bild anbieten will, benutzt man Title und Longdesc.

Das Horrorkabinett, eine Sammlung schlechter Beispiele

Diese Rubrik zeigt einige Beispiele aus der täglichen Praxis beim surfen mit Lynx oder ähnlichen Browsern. Wenn es bisher nicht gelungen ist, sollten spätestens diese Beispiele überzeugen, ALT Attribute wirklich immer zu setzen. Firmennamen wurden durch "ACME" ersetzt.


[null.gif]

[null.gif] ACME Corporation [null.gif]

Ein typisches Beispiel dafür, was passiert, wenn man ALT="" bei inhaltlich bedeutungslosen Bildern nicht setzt. Was von dieser Agentur zu halten ist, sagen sie ja selber ;-) Aber es geht noch schlimmer:


   [LINK]-visual ACMEGmbH direct rubriken



   [space.gif] [space.gif] [space.gif] [space.gif] [space.gif]

   [space.gif] [space.gif] [space.gif] [space.gif] [space.gif]

   [space.gif] [space.gif]

   [space.gif] [space.gif] Privat [space.gif] [space.gif] [space.gif]

   [space.gif] [space.gif] [space.gif] [space.gif] [space.gif]

   [space.gif] Aktuell [space.gif] [space.gif] [space.gif] [space.gif]

   [spitze-links.gif]

Das man Text, der sich dazwischen versteckt, nicht mehr lesen kann, dürfte wohl klar sein. Ein paar ALT="" mehr hätten diesem ISP mindestens einen Kunden mehr gebracht, aber so war es mir nicht möglich, Informationen von diesem Unternehmen zu bekommen. Schwer zu glauben, daß die Agentur für diese 'professionelle' Arbeit mehrere Tausend DM erhalten hat, oder? Soetwas will man den eigenen Kunden und Besuchern sicherlich nicht zumuten.


Im WWW finden Sie die [INLINE] PNG Specification.



[LINK] [LINK]

Menschen die die Bilder sehen können, wird vermittelt, daß der "PNG Specification" Link auf eine englische Seite führt, und man mit den anderen beiden Links an den Anfang bzw. das Ende des Dokuments kommt. Menschen die das nicht tun (können) verweigert diese Html Dokumentation diese Information.

ALT="Cover fehlt oder kommt später!"

ALT="Cover des Buches" wäre in meinen Augen sinnvoller gewesen.


Another fine Web sight from [Company Logo]

(genauso geschrieben im Original) Also so richtig Werbung ist das nicht für die Firma, wenn ich noch nicht einmal den Namen kenne.


Our site is best experienced with: [LINK]Click to Get It!

Ähm, mit was denn? Und was ist eigentlich Click?


This site is best viewed with [logoanim.gif] etscape

oder


This site is [LINK]etscape [INLINE]

Es ist erstaunlich, wieviele Seiten man bei einer Suche nach dem String "etscape" findet.

Was man auch tatsächlich finden kann, sind Sachen wie ALT="kleine gelbe Kugel". So bekommt man etwas zu hören oder zu sehen wie:


kleine gelbe Kugel Einleitung

kleine gelbe Kugel Das Problem

    kleine rote Kugel Geschichtliche Entwicklung

    kleine rote Kugel Situation heute

kleine gelbe Kugel Die Lösung

ALT soll eben ersetzen und nicht beschreiben, daher wäre ALT="*" wesentlich besser gewesen. Noch besser ist es natürlich, wenn man die Liste mit den HTML Elementen <UL> und <LI> erstellt, und dann mit der CSS Eigenschaft list-style-image das Bild entsprechend wählt.


bildatei.gif (2039 Bytes)

Nach diesem Muster fügt ein bekannter HTML Editor ALT Texte ein. Keine besonders nützlichen Informationen, oder? Wenn man das ganze jetzt noch in einen Text einbindet, kommt sowas dabei raus:


s.gif (853 Byte) ie lernen, welche Suchtechniken [...]

Dabei wäre ein ALT="S" doch nun wirklich nicht schwer gewesen, oder?


Put your alt text here

Wie soll ich das verstehen?


Bilder einschalten!!!

Kann ich nicht. Wozu überhaupt?


Bitte warten...

Nach 5 Minuten hat man es spätestens aufgegeben...


Hier klicken!!!

Leider kann ich weder klicken, noch weiß ich warum ich das tun soll.

Weitere Beispiele hat Alan J. Flavell gesammelt. Einige seiner Beispiele wurden hier mit seiner Erlaubnis übernommen.

Accessibility überprüfen

Um Bilder ohne ALT Text im HTML Code aufzuspüren, oder generell die Zugänglichkeit (Accessibility ) eines HTML Dokumentes zu prüfen, gibt es z.B. Bobby, der ein Dokument auf verschiedene Kriterien hin überprüft. Wer sehen möchte, wie seine Seiten in einem Textmode Browser aussehen, kann sich Lynx selber besorgen oder sich online die Seite mit Lynx View oder Lynx It ansehen.

Links zum Thema

Wer sich weiter mit diesem Thema, oder Accessibility generell auseinandersetzen möchte, kann sich bei den folgenden (englischen) Seiten informieren: