Einführung und Analyse der Verwendung von Alt-Attributen und Titelattributen von HTMLimg-Tags

HTML-img-Tag: alt-Attribut und title-Attribut Viele Leute scheinen über diese beiden Attribute verwirrt zu sein, deshalb habe ich meine Gedanken darüber aufgeschrieben, wie man sie verwendet. 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 liefert keine zusätzlichen beschreibenden Informationen für das Bild. 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

ist ein Benutzeragent (UA), der keine Bilder, Formulare oder Applets anzeigen kann. Das Alt-Attribut wird zur Angabe von Ersatztext verwendet. Die Sprache des Ersetzungstextes wird durch das lang-Attribut angegeben. Quelle: So geben Sie Alternativtext an.

Das Alt-Attribut (beachten Sie, dass es sich um ein „Attribut“ und nicht um eine „Beschriftung“ handelt) 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:

Die Verwendung des Alt-Attributs dient dazu, zusätzliche Informationen für Betrachter bereitzustellen, die die Bilder nicht sehen können Ihr Dokument. 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.

Denken Sie sorgfältig nach, bevor Sie Alternativtext schreiben, um sicherzustellen, dass der Text tatsächlich Informationen für diejenigen liefert, 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.

Bezüglich der Länge des Alternativtextes schauen Sie sich an, was WCAG 2.0 (Website Content Availability Guidelines 2.0) sagt:

Die Länge des Alt-Attributwerts muss weniger als 100 Englisch betragen Zeichen oder der Benutzer muss für die Ersetzung sorgen. Halten Sie den Text so kurz wie möglich.

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.

Wenn Browser Alternativtext als Tooltip anzeigen, wird die falsche Verwendung des Alt-Attributs gefördert. 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 erläuternde Informationen und nicht wesentliche Informationen verwenden Sie bitte das Titelattribut.

Titelattribut

Das Titelattribut bietet vorgeschlagene Informationen für das Element, für das es festgelegt ist.
Quelle: Das Titelattribut.

Das Titelattribut kann in allen 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.

Das Titelattribut eignet sich gut zum Hinzufügen von beschreibendem Text zum Link, insbesondere wenn der Link selbst den Zweck des Links nicht klar zum Ausdruck bringt. 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.

Überlegen Sie vor der Verwendung

Mein Rat ist, den Alt-Text 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 liefern sie denjenigen, die sie betrachten, mit welchen Worten sollten Sie sie beschreiben oder welche Informationen sollten Sie Personen bereitstellen, die die Bilder nicht sehen können? Wird es jemandem, der das Bild nicht sehen kann, wirklich helfen, 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, strenge Nutzungsanweisungen 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 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 erklärt Andy Clarke sehr gut, wie man es anwendet.

Beschreibungslinks (D-Links) können als Ergänzung zu 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-Techniken für 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.

Weitere Einführungen und Analysen zur Verwendung von Alt-Attributen und Titelattributen von HTMLimg-Tags finden Sie auf der chinesischen PHP-Website!