Inhalt Der vernünftige Alternativtext 1. Bilder in [X]HTML 2. Bilder in CSS 3. Spacer, Blind-GIFs 4. Logos 5. Schriftzüge, Überschriften 6. Initialien 7. Fotos 8. Karten, Illustrationen, Diagramme 9. Formeln 10. Aufzählungen, Bullets 11. Verlinkte Grafiken a) Navigation, Buttons b) Thumbnails, Vorschaubilder c) Werbung 12. externe Links -------------------------------------------------------------------------------- DER VERNÜNFTIGE ALTERNATIVTEXT Die 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]. Bilder werden dabei auf vielerlei Arten eingebunden: 1. [X]HTML | Alternativtext Slash / nur bei XHTML, nicht bei HTML | | Alternativinhalt, nicht notwendigerweise nur Text | Das 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. | Es gilt prinzipiell das gleiche wie für verlinkte Grafiken. Die explizite Betrachtung von clientseitigen Imagemaps mit map und area und Bildern als Formularelemnten mit folgt später. Ersteres vermutlich in einem eigenem Kapitel. 2. CSS | selector {background-image: url("bilddatei")} auch ohne -image | selector:before {content: url("bilddatei")} auch :after | ul {list-style-image: url("bilddatei")} alle Elemente mit display: list-item, also standardmäßig auch ol und dl Daneben 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ück- sichtigt. Prinzipiell ist object dem älteren img vorzuziehen, u.a. steht der Alternativ text 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. Andersrum 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 schrei- ben." 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. 3. Spacer, Blind-GIFs 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. |   4. Logos 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 Alternativ text. "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üns- tige Schrift-/ Hintergrundfarb-kombinationen; auch dem img-Element lassen sich in CSS die Eigenschaften background-color und color zuweisen. 5. Schriftzüge, Überschriften Viele Autoren wollen besondere Schriftarten einsetzen, wissen aber, dass sie nicht auf vielen Systemen verfügbar sind und flüchten sich daher in Grafik- dateien, 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: |

Der vernünftige ALTernativtext

6. Initialen 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-Eigen- schaft unterstützen, wohl aber visibility, ist hiervon abzuraten. 7. Fotos Bevor man solche Bilder inline in seinen Text einbindet, sollte man über- legen, 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 Am 21. Juni ergibt sich bei der Mayapyramide folgendes Bild: | Durch die Schatten der Stufen entsteht der | Eindruck einer die Treppe herunterkriechenden Schlange.

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 hin- gehört. Ein anderes Beispiel wäre ein Gruppenfoto: | Anwesend waren $LISTE. In gruppe2002.html würde dann beispielsweise auch stehen, welche Anwesenden auf dem Foto nicht zu sehen sind. 8. Karten, Illustrationen, Diagramme Prinzipiell gilt das gleiche wie für Fotos, doch bieten die genannten Typen eigentlich immer über den Text hinausgehende Informationen, ein zusammen- fassender 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 Auto-Weg von Hannover nach Hamburg ist die A7." 9. Formeln Da MathML, CML etc. noch nicht allzuweit verbreitet sind, werden in wissen- schaftlichen 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. 10. Aufzählungen, Bullets Sowas sollte mit der CSS-Eigenschaft 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 ge- ringerer 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 · (·). 11. Verlinkte Grafiken 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 dop- pelten Informationen käme; idealerweise wird CSS mit :before oder :after und content benutzt. a) Navigation, Buttons Ä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 Navigations- listen, 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. b) Thumbnails, Vorschaubilder 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 vorge- schlagen zum Taggen von Grafiken ohne zusätzliche Information, so wäre hier bspw. "[Thumbnail]" angebracht. c) Werbung 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ög- licherweise auch die Slogans zu wiederholen. 12. Links Björn Höhrmann: Warum ALT Attribute Pflicht sind Guppi: Richtiger Einsatz des Alt-Attributs Alan J. Flavell: Use of ALT texts in IMGs Jukka Korpela: Simple guidelines on using ALT texts in IMG elements W3C - XHTML 4.01 Specification: 13.8 How to specify alternate text W3C - WAI: Techniques for Web Content Accessibility Guidelines, Guideline 1. Provide equivalent alternatives to auditory and visual content. Dieser Artikel wurde erstmalig in der Usenet-Newsgroup am 2002-04-03 mit der Message-ID veröffentlicht und seitdem sporadisch überarbeitet. -- Christoph Päper, christoph@paeper.de URL: .