AlternativtextDie Verwendung von Bilddateien, üblicherweise in einem der Formate GIF, JPEG oder PNG, ist aus dem WWW kaum wegzudenken, obgleich viele Seiten genauso gut oder gar besser ohne sie funktionieren [könn[t]en].
<img src="bilddatei" alt="Alternativtext" />/ nur bei XHTML, nicht bei HTML<object data="bilddatei">
Alternativinhalt, nicht notwendigerweise nur Text
</object>type-Attribut ist optional, da der korrekte MIME-Typ vom server gesendet werden sollte. Auch lokal kann das funktionieren: Sogar Windows prüft anhand in der Registry hinterlegter Werte, welcher Dateierweiterung welcher MIME-Typ zugeordnet ist.<input type="image" src="bilddatei" alt="Alternativtext" />
Die explizite Betrachtung von clientseitigen Imagemaps mit map und area und Bildern als Formularelemnten mit <input type="image" /> folgt später. Ersteres vermutlich in einem eigenem Kapitel.
selector {background-image: bilddatei}-imageselector:before {content: url("bilddatei")}:afterul {list-style-image: bilddatei}display: list-item, also standardmäßig auch ol und dlDaneben gibt es in transitionalem HTML auch die Möglichkeit, für diverse Elemente ein Hintergrundbild durch das Attribut background anzugeben, dies wird hier aber wegen der dem vorzuziehenden CSS-Variante nicht weiter berücksichtigt.
Prinzipiell ist object dem älteren img vorzuziehen, u.a. steht der Alternativtext auch Suchmaschinen zur Verfügung, die das alt-Attribut nicht auswerten; leider gibt es in einigen Browsern noch Probleme damit. Außerdem ist mir kein HTML-Editor bekannt, der standardmäßig object anstelle von img verwendet. Schlussendlich ist es etwas mehr Arbeit für die Hardcore-Alles-per-Hand-Tipper wie mich.
Jedem dürfte auffallen, dass es nicht möglich ist, via CSS eingebundenen Grafiken einen Alternativtext zuzuweisen. Dies ist auch gar nicht nötig, da sie prinzipbedingt nur Layout- und nicht Inhaltszwecken dienen sollen, z.B. Hintergrundbilder. Wenn dies doch nötig sein sollte, liegt üblicherweise ein Fehler im Konzept vor. Andersherum wären viele Grafiken, die alt="" erfordern, besser per CSS eingebunden.
Auch in begleitenden Texten sollte man daran denken, dass nicht jeder die Bilder sieht. "Klicken sie auf den Briefkasten, um mir eine E-Mail zu schreiben." ist also absoluter Unsinn.
Genauso wie es verschiedene Arten gibt, sie zu referenzieren, so existieren auch diverse Verwendungszwecke von Bildern in HTML-Seiten. Danach richtet sich vornehmlich, wie der alternative Text am sinnvollsten aussieht.
In vernünftig geschriebenen HTML-Seiten, die ihr Layout per CSS erhalten, sollten diese i.d.R. 1 transparentes Pixel großen Dateien eigentlich nicht nötig sein, dennoch meinen viele Autoren sie immer noch benutzen zu müssen, vor allem um auch in älteren Browsern ansehnliche Ergebnisse zu erzielen. Der alt-Text sollte aus einem leeren oder in manchen Fällen nur Leerzeichen enthaltenden String bestehen, also z.B.
<img src="spacer.gif" alt=" " />.
Sofern der Name der Firma, oder wofür auch immer das Logo steht, nicht bereits genannt ist, gehört er, eventuell inklusive Slogan, in den Alternativtext. "Logo" oder "Firmenlogo" ist Quatsch, "Acme AG [Logo]" jedoch IMHO noch in Ordnung.
Logos, d.h. das Logo der Seite, sind oft losgelöst vom restlichen Inhalt und sind von keinem Block-Element umgeben, was nur in Strict vorgeschrieben ist. Daher ergeben sich nach dem Abschalten der Bildanzeige recht häufig ungünstige Schrift-/Hintergrundfarb-kombinationen; auch dem img-Element lassen sich in CSS die Eigenschaften background-color und color zuweisen.
Viele Autoren wollen besondere Schriftarten einsetzen, wissen aber, dass sie nicht auf vielen Systemen verfügbar sind und flüchten sich daher in Grafikdateien, die lediglich formatierten Text beinhalten. Wie der alternative Inhalt auszusehen hat, ist wohl offensichtlich. Allerdings scheinen viele zu vergessen, dass, obwohl es bei aktivierten Grafiken keinen Effekt zeigt, auch die HTML-Elemente richtig eingesetzt werden sollten, d.h. i.d.R. h1 bis h6:
<h1><img src="topic.gif" alt="Der vernünftige ALTernativtext" /></h1>
Besonders im Mittelalter war es üblich, den ersten Buchstaben eines Kapitels besonders groß und verziert darzustellen. CSS berücksichtigt diesen Aspekt der Typografie mit dem Pseudoelement first-letter. Wem die somit verfügbaren Gestaltungsmittel nicht ausreichen, der ersetzt den ersten Buchstaben durch ein Bild, dabei wandert die Letter natürlich in den Alternativtext.
Prinzipiell wäre hier statt der Verwendung von img oder object auch folgende reine CSS-Lösung möglich:
:first-letter {visibility: hidden}, nicht display: none;, da das auch auf :before vererbt werden würde!
:first-letter:before {content: url("buchstabe.png"); visibility: visible}
Da aber einige Browser weder das before-Pseudoelement noch die content-Eigenschaft unterstützen, wohl aber visibility, ist hiervon abzuraten.
Bevor man solche Bilder inline in seinen Text einbindet, sollte man überlegen, ob ein Link zu der Datei nicht sinnvoller ist. Fotografien und Gemälde benötigen im Allgemeinen keinen alt-Text, d.h. leerer String. Wohl aber ist hier neben dem title- oft das longdesc-Attribut angebracht, um den Inhalt zu beschreiben.
Da Textbrowser wie Lynx zwar keine Bilder inline anzeigen, sie aber extern öffnen können, ist es IMHO unter Umständen richtig, einen Hinweis auf die Existenz der Fotos anzubringen, etwa durch "[Foto]" im Alternativtext, hierüber besteht allerdings weder in dciwam noch sonstwo ein Konsens. Dies unter anderem deswegen, weil es Screenreader gibt, die bereits voreingestellt Grafik
sagen, sobald sie auf ein <img stoßen. Es gibt natürlich auch (erstrebenswerte) Situationen in denen das Bild weitere Informationen zum ihm umgebenden Text offenbart, etwa folgendermaßen:<p>Am 21. Juni ergibt sich bei der Mayapyramide folgendes Bild: <img src="maya/pyramid.png" alt="Durch die Schatten der Stufen entsteht der Eindruck einer die Treppe herunterkriechenden Schlange." /></p>
Obwohl hier sogar das Wort Bild benutzt wurde, was eigentlich zu vermeiden ist, gibt der Alternativtext die essenzielle Information des Fotos wieder, ohne dass dem Textbrowserbenutzer aufgefallen wäre, dass hier ein Bild hingehört. Ein anderes Beispiel wäre ein Gruppenfoto:<img src="gruppe2002.jpeg" alt=" Anwesend waren $LISTE." title="Gruppenfoto Treffen 2002" longdesc="gruppe2002.html" />
In gruppe2002.html würde dann beispielsweise auch stehen, welche Anwesenden auf dem Foto nicht zu sehen sind.
Prinzipiell gilt das gleiche wie für Fotos, doch bieten die genannten Typen eigentlich immer über den Text hinausgehende Informationen, ein zusammenfassender Satz im alt reicht; longdesc ist praktisch unverzichtbar und kann auch Sehenden weiterhelfen. Um diese Informationen nicht zu sehr vor dem bilderlosem Leser zu verstecken, plädiere ich für ein einheitliches Taggen solcher Grafiken, etwa alt="[Karte]", um was es sich genau handelt, sollte dagegen nur im title stehen, also z.B. title="Karte der Region um die Autobahn A7 zwischen Hannover und Hamburg." alt=" Der direkteste Weg mit dem Auto von Hannover nach Hamburg ist die A7.".
Da MathML, CML etc. noch nicht allzuweit verbreitet sind, werden in wissenschaftlichen Arbeit zur Darstellung von mathematischen oder chemischen Formeln meist Grafiken verwendet. Besonders bei Mathematikern kann man davon ausgehen, dass sie (einfachen) TEX-Code verstehen, dieser ist hier also für den alt-Text angebracht. Meist liegt er sowieso schon vor, da die Grafiken daraus generiert wurden.
Noch besser ist es allerdings, MathML via object einzubinden und erst als 2. Alternative das GIF oder PNG, die 3. wäre dann wieder der Alternativtext.
Sowas sollte mit der CSS-Eigenschafte list-type-image gelöst werden, ist das aus irgendwelchen Gründen nicht möglich, wird als Alternativtext für ein Bullet meist das Sternchen * (Asterisk) empfohlen; ich plädiere trotz geringerer Browserunterstützung für die Entity •: • (bzw. das auch von NS4 unterstützte •: •), welche den von ul-Listen gewohnten gefüllten Kreis erzeugt, notfalls auch ·: ·.
Generell gilt, "Hier klicken!" ist als Alternativtext falsch. Eine genauere Beschreibung des Linkzieles gehört entweder in den Kontext oder das title-Attribut des a-Elementes. Wenn ein Link bspw. zu einer Firmenhomepage durch ein Bild, d.h. das Firmenlogo, begleitet wird, ist es normalerweise sinnig, dem Bild ein leeres alt-Attribut zu verpassen, da es ansonsten nur zu doppelten Informationen käme; idealerweise wird CSS mit :before oder :after und content benutzt.
Ähnlich wie bei den bereits behandelten Überschriften, ergibt sich der Alternativtext grafischer Navigationsleisten und Buttons meist ganz von selbst. Zu beachten ist lediglich, dass man die Funktion und nicht das Aussehen von Icons in den alt-Text schreibt, also bspw. "zur Startseite" statt "Haus".
Buttons und Icons sollten in der Regel identische alt- und title-Attribute tragen: Da kaum ein Icon universell verstanden wird, hilft ein Tool-Tipp mit dem Inhalt des title-Attributs auch Sehenden weiter, diese Information wird normalerweise für wiederkehrende Symbole im Gehirn gespeichert. Dies trifft besonders auf Gästebücher und Diskussionsforen zu. Bei Navigationslisten, die nicht in einer HTML-Liste (ul) verpackt sind, kann es bei Nur-Text-Anzeige zu unschönen Effekten dadurch kommen, dass kein sicht- oder hörbarer Unterschied zwischen den einzelnen Elementen besteht, dies lässt sich je nach Erfordernis durch sinnvol gesetzte Leerzeichen, | oder (eckige) Klammern vermeiden.
Vorschaubildchen müssen IMHO anders behandelt werden, als vollformatige Bilder. Sie dürfen gerne den Text enthalten, dem man dem Bild im Linkziel als title verpassen würde, auch die Größe, Auflösung und/oder Dateiformat ist hier ausnahmsweise angebracht. Entscheidet man sich wie oben vorgeschlagen zum Taggen von Grafiken ohne zusätzliche Information, so wäre hier bspw. "[Thumbnail]" angebracht.
Mir würde sicher ein leerer alt-Text oder "[Werbung]" bei Bannern reichen, sinnvoller ist es aber wohl, zumindest den Namen des Werbenden und möglicherweise auch die Slogans zu wiederholen.
ALT Attribute Pflicht sindAlt-AttributsALT texts in IMGsALT texts in IMG elementsDieser Artikel wurde erstmalig in der Usenet-Newsgroup de.comm.infosystems.www.authoring.misc am 2002-04-03 mit der Message-ID <a8ffdk$1fde$1@ariadne.rz.tu-clausthal.de> veröffentlicht und seitdem sporadisch überarbeitet.
Christoph Päper, christoph@paeper.de