Einführung in die Verwendung des Alt -Attributs und des Titelattributs des HTMLIMG -Tags

Wenn Browserverkäufer Standards verzerren und Dinge selbst tun, können sie einige Probleme verursachen oder zumindest Verwirrung verursachen. Ein Beispiel ist die Art und Weise, wie einige Browser mit ALT -Attributen umgehen (normalerweise als Alt -Tags als falsch bezeichnet), z. B. den IE -Browser mit einer großen Anzahl von Benutzern in Windows.

ALT -Text wird nicht als Tool -Tipps verwendet, oder es enthält keine zusätzlichen Anweisungen für Bilder. Im Gegenteil, das Titelattribut sollte verwendet werden, um zusätzliche Erläuterungsinformationen für das Element bereitzustellen. Diese Informationen werden in den meisten Bildbrowsern als Tool -Tipp angezeigt, obwohl die Hersteller eine andere Möglichkeit verwenden können, den Text des Titelsattributs zu rendern.

Viele Menschen scheinen durch diese beiden Attribute verwirrt zu sein (die Frage ist in letzter Zeit in der Web -Standard -Gruppen -Mailingliste häufiger geworden), also habe ich meine Gedanken darüber aufgeschrieben, wie sie sie verwenden können.

Für den Benutzeragenten (UA), der keine Bilder, Formulare oder Applets anzeigen kann, wird das Alt -Attribut verwendet, um alternativen Text anzugeben. Die Sprache des Ersatztextes wird durch das Lang -Attribut angegeben. Quelle: So geben Sie alternativen Text an.

Das ALT -Attribut (beachten Sie, dass es sich eher um ein Attribut als um ein Etikett handelt) enthält Ersatzanweisungen, die für Bild- und Bild -Hotspots erforderlich sind. Es kann nur in IMG-, Bereichs- und Eingabelementen (einschließlich Applet -Elemente) verwendet werden. Für Eingabelemente soll das ALT -Attribut das Bild der Schaltfläche Senden ersetzen. Zum Beispiel: <Eingabe type = Bild src = Bild.gif Alt = subieren />.

Verwenden Sie das ALT -Attribut, um den Zuschauern, die die Bilder in Ihrem Dokument nicht sehen können, Textbeschreibungen bereitzustellen. Dies schließt ein, dass Benutzer, die Browser verwenden, die keine Bildanzeige oder Bildanzeige unterstützen, die Sehbehinderte sind, und Benutzer, die Bildschirmleser verwenden. Alternativer Text wird verwendet, um Bilder zu ersetzen, anstatt zusätzliche Bildunterschriften bereitzustellen.

Überlegen Sie sorgfältig, bevor Sie einen alternativen Text schreiben, um sicherzustellen, dass diese Text veranschaulichende Informationen für diejenigen enthalten, die das Bild nicht sehen und im Kontext Sinn machen. Für dekorative Bilder können Sie leere Werte (Alt =, keine Leerzeichen in den Zitaten) verwenden, anstatt irrelevante Substitute wie Blue Bullet oder Spacer.gif zu verwenden. Ignoriere es nicht. Wenn Sie es ignorieren, lesen einige Bildschirmleser den Dateinamen der Bilddatei direkt, und diese Textbrowser wie Lynx zeigen den Dateinamen der Bilddatei an, die für Ihren Browser wenig nützlich sind.

Es ist am einfachsten, den Ersatztext in einem Bild mit Text zu setzen. Der im Bild enthaltene Text kann im Allgemeinen als Alt -Attributwert verwendet werden.

In Bezug auf die Länge des Ersatztextes finden Sie in der WCAG 2.0 (Website -Inhalts -Usability -Handbuch 2.0):

Der Alt -Attributwert muss weniger als 100 englische Zeichen betragen, oder der Benutzer muss sicherstellen, dass der Ersatztext so kurz wie möglich ist.

Ich verstehe es so kurz wie möglich und so lange wie möglich.

Auch wenn Sie möchten, dass es als Werkzeug -Tipp angezeigt wird, verwenden Sie das ALT -Attribut nicht für das Textelement, das nicht seine Verwendung ist. Soweit ich weiß, funktioniert das nur in Windows IE Browser und der alten Netscape 4.* (Windows -Version). Kein Mac -Browser zeigt es als Werkzeug -Tipp an.

Wenn der Browser den Ersatztext als Werkzeugspitze anzeigt, wird auch das Verhalten der Verwendung des ALT -Attributs falsch gefördert. Einige Leute schreiben bedeutungslosen Substitutionstext, weil sie dazu neigen, dies zu glauben, dass es sich um eine zusätzliche Illusionsinformation und nicht um einen Ersatz handelt, der keine Bilder anzeigen kann. Andere möchten möglicherweise nicht, dass der Tool -Tipp angezeigt wird, und ignorieren dann das Schreiben des Alt -Attributwerts vollständig. Diese falschen Praktiken haben den Zuschauern, die das Bild nicht sehen können, Schwierigkeiten verursacht.

Weitere Anweisungen und nicht wesentliche Informationen verwenden Sie bitte das Titelattribut.

Das Titelattribut enthält suggestive Informationen für Elemente, die dieses Attribut festlegen.

Quelle: Das Titelattribut.

Das Titelattribut kann für alle Tags mit Ausnahme von Base, BaseFont, Head, HTML, Meta, Param, Skript und Titel verwendet werden. Aber es ist nicht notwendig. Vielleicht verstehen viele Leute deshalb nicht, wann sie es verwenden sollen.

Verwenden Sie das Titelattribut, um nicht wesentliche zusätzliche Informationen bereitzustellen. Die meisten visuellen Browser zeigen Titeltext als Werkzeug -Tipp an, wenn die Maus in einem bestimmten Element suspendiert wird. Dies liegt jedoch beim Hersteller, um zu entscheiden, wie der Titel Text rendert. Einige Browser zeigen den Titeltext in der Statusleiste an. Zum Beispiel die frühere Version des Safari -Browsers.

Das Titelattribut hat einen guten Zweck, der dem Link beschreibenden Text hinzufügen soll, insbesondere wenn der Link selbst den Zweck des Links nicht sehr deutlich ausdrückt. Auf diese Weise können Besucher wissen, wohin diese Links sie führen werden, und sie werden keine Seite geladen, die möglicherweise überhaupt nicht von Interesse ist. Eine andere potenzielle Anwendung besteht darin, zusätzliche veranschaulichende Informationen für Bilder wie Daten oder andere nicht wesentliche Informationen bereitzustellen.

Der Titel -Attributwert kann länger sein als der Alt -Attributwert. Es ist jedoch zu beachten, dass einige Browser zu lange Text (wie Tooltips oder andere) abschneiden. Zum Beispiel kann Mozillas Kernbrowser nur die ersten 60 Zeichen anzeigen. Dies wird als Mozilla -Fehler angesehen und ist etwas, auf das Sie achten müssen.

Mein Rat ist sicherzustellen, dass der Ersatztext unerlässlich ist. In den meisten Anwendungen sollte es leer bleiben, Alt = (Beachten Sie, dass in den beiden Anführungszeichen keine Leerzeichen enthalten sind). Denken Sie über diese Bilder nach, welche Art von Informationen bieten diese Ansichten, mit welchen Text sollten Sie sie beschreiben oder welche Informationen sollten Sie Personen bereitstellen, die die Bilder nicht sehen? Schreiben Sie den Ersatztext in ein Foto: Der CEO, der vor dem Gebäude steht, einen grauen Anzug und eine schwarze Krawatte trägt, den Himmel schaut, ist es sehr hilfreich für Leute, die das Bild nicht sehen können? Wenn Sie dies denken, können Sie es schreiben. In vielen Fällen denke ich, dass es besser ist, den Ersatztext leer zu lassen.

Für Titelattribute ist es schwierig, strenge Anweisungen zu geben. Der größte Teil meiner Verwendung besteht aus Links, die nicht selbsterklärend sein können, wie beispielsweise der gleiche Link-Text auf derselben Seite und verschiedene Linkseiten. Manchmal wird für einige Schaltflächen oder Formularelemente mehr Beschriftungstext bereitgestellt.

Wenn ein Bild eine längere Beschreibung erfordert und die Einschränkung des ALT -Attributs überschreitet, gibt es einige Optionen.

Die LongDesc -Eigenschaft kann verwendet werden, um Links zu einer separaten Seite mit der Textbeschreibung des Bildes bereitzustellen. Dies bedeutet, den Betrachter mit einer anderen Seite zu verknüpfen, was zu Verständnisschwierigkeiten führen kann. Darüber hinaus ist die Unterstützung des Browsers für das Longdesc -Attribut ebenfalls inkonsistent und nicht sehr gut.

Die Longdesc -Eigenschaft kann einen Link zu einem anderen Teil des aktuellen Dokuments (Ankerpunkt) enthalten, anstatt mit einer anderen Seite zu verknüpfen. In den Fußnoten der Zugänglichkeit erklärt Andy Clarke, wie man es sehr gut anwendet.

Beschreibung Links (D -Links) können verwendet werden, um Longdesc zu ergänzen. Ein Beschreibungslink ist ein regulärer Link, der eine Verbindung zu einer Seite mit alternativem Text enthält. Der Link wird neben dem Bild platziert und ist in allen Browsern in Ordnung. Die Menschen haben viele verschiedene Meinungen zu ihrer Effektivität, und ich mag diese Notiz meiner persönlichen Meinung nach nicht. WCAG ist ebenfalls, und in ihrem Arbeitsentwurf HTML -Techniken für WCAG 2.0 wird der Beschreibungsverbindungslink missbilligt.

Wenn eine lange Beschreibung des Bildes für jeden Betrachter nützlich ist, müssen Sie es einfach im selben Dokument anzeigen, anstatt mit anderen Seiten zu verknüpfen oder zu verbergen. Auf diese Weise kann jeder es lesen. Dies ist eine einfache und Tech-Methode.