ALT versus TITLE
Grundsätzlich ist es eine gute Idee, HTML-Elemente mit kommentierendem Text bzw. Meta-Information auszustatten. Der kommentierende Text sollte vom Browser in einem kleinen Fensterchen („Tooltip”) angezeigt werden, wenn der Anwender mit der Maus über den Anzeigebereich des HTML-Elements fährt. Bei diesem Kommentar kann es sich um ein einzelnes Wort oder eine Kurzbeschreibung handeln.
Viele Autoren nutzen dafür das ALT-Attribut. Obwohl diese Maßnahme von vielen Browsern unterstützt wird, ist sie leider falsch. Warum? Nun, zum Einen funktioniert ALT nur für Bilder (Images), zum Anderen steht dort ALT für „alternativ” und darf eigentlich nur zum Einsatz kommen, wenn das Bild aus irgendeinem Grund NICHT angezeigt wird (falsch referenziert, Abbruch des Ladevorgangs, Grafikanzeige abgeschaltet, Text-Browser etc.). Das Anzeigen des ALT-Textes ist nicht vorgesehen, wenn das Image korrekt dargestellt wird.
Für diesen Zweck gibt es das Universalattribut „TITLE”, welches erlaubt, HTML-Elemente mit kommentierendem Text (Meta-Information) auszustatten. Dieses Attribut ist nicht auf Images beschränkt, sondern lässt sich auf praktisch alle HTML-Elemente anwenden (ausser: base, basefont, head, html, meta, script, style, title). Sehr bewährt hat sich sein Einsatz zum Beispiel, um Hyperlinks mit zusätzlichen Informationen zum Verweisziel auszustatten.
Da moderne Browser das ALT-Attribut korrekterweise nicht mehr anzeigen (ausser bei wirklich fehlenden Images), empfiehlt es sich, beide Attribute einzusetzen. Bei Bildern notieren Sie zum Beispiel:
<img src="bild.gif"
width="120"
height="180"
border="0"
alt="Hier die Beschreibung"
title="Hier der Bildtitel">
Bei allen anderen Elementen notieren Sie nur das entsprechende TITLE-Attribut.
Was unterscheidet nun einen ALT-Text von einem TITLE-Text? Zur Erinnerung: Der ALT-Text erscheint NUR, wenn das Bild nicht angezeigt wird. Folglich muss er dieselbe Information transportieren, die man normalerweise aus dem Bild gewinnen würde. Ein Beispiel: Sie zeigen einen Screenshot mit den Proxy-Einstellungen Ihrer Uni. Die dazugehörigen Texte sollten so aussehen:
alt="Die Dialogbox 'Proxy Settings' zeigt für jedes Protokoll die Einträge "proxy.tu-berlin.de" im 'Host'-Feld sowie "1234" im 'Port'-Feld."
title="Der Screenshot zeigt die Netscape 4.x Proxy-Einstellungen für die TU Berlin."
Mit Blick auf barrierefreies Design bietet sich für Bilder ein weiteres Attribut an: LONGDESC.
Mit diesem Attribut können Sie per Hyperlink auf eine Stelle verweisen, wo die Grafik in Textform näher beschrieben wird. Hier wieder ein Beispiel:
<img src="bild.gif"
width="120"
height="180"
border="0"
alt="Hier die Beschreibung"
title="Hier der Bildtitel">
longdesc="beschreibung.html">
Die Seite „beschreibung.html” enthält den ausführlichen Text, der die Grafik beschreibt und erläutert.
Hinweis: Bisher wird dieses Attribut lediglich von Netscape6+ und Mozilla unterstützt, und auch hier leider nur sehr versteckt: Klicken Sie mit der rechten Maustaste auf die Grafik und wählen Sie aus dem Kontextmenü die Option „Eigenschaften”. Im dann folgenden Dialog können Sie auf die Adresse zur Beschreibung klicken.
Übrigens werden Ihnen hier auch alle anderen Infos zum Bild angezeigt (Name, Adresse, Title usw.).
Wenn Sie diese Technik nutzen möchten, empfiehlt es sich bis auf Weiteres, zusätzlich direkt neben dem Bild einen Link anzubringen, der auf die Lang-Beschreibung führt. Am Besten nutzen Sie dafür entweder ein durchgängiges Kürzel (zum Beispiel [L]) oder ein kleines verlinktes Symbol.
