Wenn Browser-Anbieter die Standards missachten und Dinge tun, die nicht den Regeln entsprechen, kann das zu Problemen oder zumindest Verwirrung führen. Ein Beispiel ist die Art und Weise, wie einige Browser mit Alt-Attributen (oft fälschlicherweise Alt-Tags genannt) umgehen, wie etwa Internet Explorer für Windows, der eine große Anzahl von Benutzern hat.
Alt-Text wird nicht als Tooltip verwendet, oder genauer gesagt, er wird nicht verwendet, um zusätzliche beschreibende Informationen für das Bild bereitzustellen. Stattdessen sollte das Titelattribut verwendet werden, um zusätzliche beschreibende Informationen für das Element bereitzustellen. Diese Informationen werden in den meisten Bildbrowsern als Tooltip angezeigt, es steht den Herstellern jedoch frei, den Text des Titelattributs auf andere Weise darzustellen.
Viele Leute scheinen durch diese beiden Eigenschaften verwirrt zu sein (diese Frage taucht in letzter Zeit auf der Mailingliste der Web Standards Group auf), also habe ich meine Gedanken darüber aufgeschrieben, wie man sie verwendet.
Alt-Attribut
Für Benutzeragenten (UA), die keine Bilder, Formulare oder Applets anzeigen können, wird das Alt-Attribut verwendet, um alternativen Text anzugeben. Die Sprache des Ersetzungstextes wird durch das lang-Attribut angegeben.
Quelle: So geben Sie alternativen Text an .
Das Alt-Attribut (beachten Sie „attribute“ statt „label“) enthält Ersetzungsanweisungen, die für Bilder und Bild-Hotspots erforderlich sind. Es kann nur in IMG-, Area- und Eingabeelementen (einschließlich Applet-Elementen) verwendet werden. Bei Eingabeelementen soll das Alt-Attribut das Bild der Schaltfläche „Senden“ ersetzen. Beispiel: <input type="image" src="image.gif" alt="Submit" />.
Verwenden Sie das Alt-Attribut, um eine Textbeschreibung für Betrachter bereitzustellen, die die Bilder in Ihrem Dokument nicht sehen können. Dazu gehören Benutzer, die Browser verwenden, die die Bildanzeige nicht nativ unterstützen oder bei denen die Bildanzeige deaktiviert ist, Benutzer mit Sehbehinderungen und Benutzer, die Bildschirmleseprogramme verwenden. Alt-Text wird verwendet, um ein Bild zu ersetzen, anstatt zusätzlichen beschreibenden Text bereitzustellen.
Überlegen Sie sorgfältig, bevor Sie Ihren Alternativtext schreiben, um sicherzustellen, dass er tatsächlich Informationen für Personen bereitstellt, die das Bild nicht sehen können, und dass er im Kontext Sinn ergibt. Verwenden Sie für dekorative Bilder einen leeren Wert (alt="", keine Leerzeichen zwischen Anführungszeichen) anstelle von irrelevantem Ersatztext wie „blue Bullet“ oder „spacer.gif“. Ignorieren Sie es nicht, denn wenn Sie es ignorieren, lesen einige Bildschirmleseprogramme den Namen der Bilddatei direkt vor und Textbrowser wie Lynx zeigen den Namen der Bilddatei an, was für Ihre Betrachter keinen großen Nutzen hat.
Es ist am einfachsten, alternativen Text für Bilder festzulegen, die Text enthalten. Im Allgemeinen kann der im Bild enthaltene Text als Alt-Attributwert verwendet werden.
Was die Länge des Alternativtexts betrifft, schauen Sie sich an, was WCAG 2.0 (Website Content Availability Guidelines 2.0) zu sagen hat:
Die Länge des Alt-Attributwerts muss weniger als 100 englische Zeichen betragen oder der Benutzer muss sicherstellen, dass der Ersetzungstext so kurz wie möglich ist.
Ich verstehe darunter „so kurz wie möglich und so lang wie nötig“.
Auch wenn Sie möchten, dass es als Tooltip angezeigt wird, verwenden Sie das Alt-Attribut nicht für Textelemente. Dies ist nicht seine beabsichtigte Verwendung. Soweit ich weiß, funktioniert dies nur im IE-Browser von Windows und im alten Netscape 4.* (Windows-Version). Kein Mac-Browser zeigt dies als Tooltip an.
Der Missbrauch des Alt-Attributs wird gefördert, wenn Browser Alt-Text als Tooltip anzeigen. Manche Leute beginnen, bedeutungslosen Alternativtext zu schreiben, weil sie ihn eher als zusätzliche beschreibende Information und nicht als Ersatz betrachten, der das Bild nicht anzeigen kann. Andere möchten möglicherweise nicht, dass der Tooltip angezeigt wird, und ignorieren dann den Alt-Attributwert vollständig. Diese falschen Praktiken verursachen Schwierigkeiten für Betrachter, die die Bilder nicht sehen können.
Für zusätzliche beschreibende Informationen und nicht wesentliche Informationen verwenden Sie bitte das Titelattribut.
Titelattribut
Das Titelattribut stellt Hinweisinformationen für das Element bereit, für das es festgelegt ist.
Quelle: Das Titelattribut .
Das Titelattribut kann für alle Tags außer base, basefont, head, html, meta, param, script und title verwendet werden. Aber es ist nicht notwendig. Vielleicht verstehen deshalb viele Menschen nicht, wann sie es verwenden sollen.
Verwenden Sie das Titelattribut, um nicht wesentliche zusätzliche Informationen bereitzustellen. Die meisten visuellen Browser zeigen den Titeltext als Tooltip an, wenn die Maus über ein bestimmtes Element fährt. Es liegt jedoch am Hersteller, zu entscheiden, wie der Titeltext dargestellt wird. Einige Browser zeigen den Titeltext in der Statusleiste an. Zum Beispiel frühe Versionen des Safari-Browsers.
Eine gute Verwendung des Titelattributs besteht darin, einem Link beschreibenden Text hinzuzufügen, insbesondere wenn der Link selbst den Zweck des Links nicht klar wiedergibt. Auf diese Weise wissen Besucher, wohin die Links sie führen, und sie laden keine Seite, an der sie möglicherweise überhaupt nicht interessiert sind. Eine weitere mögliche Anwendung besteht darin, zusätzliche beschreibende Informationen für Bilder bereitzustellen, beispielsweise Datumsangaben oder andere nicht wesentliche Informationen.
Der Wert des Titelattributs kann länger eingestellt werden als der Wert des Alt-Attributs. Beachten Sie jedoch, dass einige Browser zu lange Texte (z. B. Tooltips oder andere) abschneiden. Beispielsweise kann der Kernbrowser von Mozilla nur die ersten 60 Zeichen anzeigen. Dies wird als Mozilla-Fehler angesehen und sollte Ihnen bewusst sein.
Denken Sie nach, bevor Sie es verwenden
Mein Rat ist, Ihren Alternativtext auf das Wesentliche zu beschränken. In den meisten Anwendungen sollte es leer bleiben, alt="" (beachten Sie, dass zwischen den Anführungszeichen keine Leerzeichen stehen). Denken Sie über diese Bilder nach: Welche Informationen stellen Sie denjenigen zur Verfügung, die sie betrachten, mit welchen Worten sollten Sie sie beschreiben oder welche Informationen sollten Sie Personen bereitstellen, die die Bilder nicht sehen können? Wäre es für Leute, die das Bild nicht sehen können, wirklich hilfreich, den Alternativtext wie folgt zu schreiben: „Foto: CEO steht vor einem Gebäude, trägt einen grauen Anzug und eine schwarze Krawatte und blickt in den Himmel“? Wenn Sie so denken, dann schreiben Sie es. In vielen Fällen halte ich es für besser, den Ersatztext leer zu lassen.
Für das Titelattribut ist es schwierig, genaue Verwendungsanweisungen zu geben. Ich verwende es hauptsächlich bei Links, die nicht selbsterklärend sind, wie zum Beispiel derselbe Linktext auf derselben Seite, aber auf verschiedenen verlinkten Seiten. Manchmal wird für einige Schaltflächen oder Formularelemente ausführlicherer Text bereitgestellt.
längere Beschreibung
Wenn für ein Bild eine längere Beschreibung als durch die Alt-Attributgrenzen erforderlich ist, gibt es einige Optionen.
Das longdesc-Attribut kann verwendet werden, um einen Link zu einer separaten Seite bereitzustellen, die eine Textbeschreibung des Bildes enthält. Dies bedeutet, dass der Betrachter auf eine andere Seite verlinkt wird, was zu Verständnisschwierigkeiten führen kann. Darüber hinaus ist die Browserunterstützung für das longdesc-Attribut inkonsistent und nicht sehr gut.
Das longdesc-Attribut kann einen Link zu einem anderen Teil des aktuellen Dokuments (einen Anker) enthalten, anstatt auf eine andere Seite zu verweisen. In den Fußnoten zur Barrierefreiheit gibt Andy Clarke eine gute Erklärung, wie man es anwendet.
Beschreibungslinks (D-Links) können zur Ergänzung von longdesc verwendet werden. Ein Beschreibungslink ist ein normaler Link zu einer Seite, die Alternativtext enthält. Der Link wird neben dem Bild platziert und ist in allen Browsern verfügbar. Über die Wirksamkeit gibt es viele unterschiedliche Meinungen und mir persönlich gefällt dieser Hinweis nicht. Auch WCAG sind in ihrem Arbeitsentwurf HTML Techniques for WCAG 2.0 Beschreibungslinks „veraltet“.
Wenn eine lange Beschreibung des Bildes für jeden Betrachter nützlich ist, sollten Sie darüber nachdenken, es einfach im selben Dokument anzuzeigen, anstatt es auf andere Seiten zu verlinken oder es auszublenden. Damit es jeder lesen kann. Dies ist ein einfacher Low-Tech-Ansatz.