Einführung in die Verwendung von Alt- und Titelattributen von HTML-Img-Tags
|
Wenn Browser-Anbieter die Standards umgehen und eigenmächtig Dinge tun, die nicht den Regeln entsprechen, kann das zu Problemen oder zumindest zu Verwirrung führen. Ein Beispiel dafür ist die Art und Weise, wie manche Browser, etwa der Internet Explorer für Windows, mit dem Alt-Attribut (oft fälschlicherweise als Alt-Tag bezeichnet) umgehen, das über eine große Benutzerbasis verfügt. Alternativtext wird nicht als Tooltip verwendet, oder genauer gesagt, er wird nicht dazu verwendet, zusätzliche Informationen über das Bild bereitzustellen. Stattdessen sollte das Titelattribut verwendet werden, um zusätzliche beschreibende Informationen für ein Element bereitzustellen. Diese Information wird in den meisten Bildbrowsern als QuickInfo angezeigt, den Herstellern steht es jedoch frei, den Text des Titelattributs auch anders darzustellen. Viele Leute scheinen über diese beiden Eigenschaften verwirrt zu sein (diese Frage wurde in letzter Zeit häufig auf der Mailingliste der Web Standards Group gestellt), deshalb habe ich meine Gedanken zu ihrer Verwendung aufgeschrieben. alt-Attribut Das Alt-Attribut wird verwendet, um alternativen Text für Benutzeragenten (UAs) anzugeben, die keine Bilder, Formulare oder Applets anzeigen können. Die Sprache des Ersetzungstextes wird durch das Attribut „lang“ angegeben. Quelle: So geben Sie alternativen Text an. Alt-Attribute (beachten Sie das Wort „Attribut“ und nicht „Tag“) enthalten alternative Beschreibungen und sind für Bilder und Bild-Hotspots erforderlich. Es kann nur in Bild-, Bereichs- und Eingabeelementen (einschließlich Applet-Elementen) verwendet werden. Bei Eingabeelementen soll das Alt-Attribut verwendet werden, um das Bild der Senden-Schaltfläche zu ersetzen. Beispiel: <input type="image" src="image.gif" alt="Senden" />. Der Zweck der Verwendung des Alt-Attributs besteht darin, eine Textbeschreibung für Betrachter bereitzustellen, die die Bilder in Ihrem Dokument nicht sehen können. Dazu gehören Benutzer, deren Browser die Bildanzeige nicht nativ unterstützen oder bei denen die Bildanzeige deaktiviert ist, Benutzer mit Sehbehinderungen und Benutzer, die Bildschirmleseprogramme verwenden. Alternativtext wird verwendet, um Bilder zu ersetzen und nicht, um zusätzlichen Beschreibungstext bereitzustellen. Überlegen Sie sorgfältig, bevor Sie 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="" ohne Leerzeichen zwischen den Anführungszeichen) anstelle von irrelevantem Alternativtext wie „blauer Aufzählungspunkt“ oder „spacer.gif“. Lassen Sie es nicht weg, denn wenn Sie es tun, lesen einige Bildschirmleseprogramme den Bilddateinamen direkt vor und Textbrowser wie Lynx zeigen den Bilddateinamen an, was für Ihre Betrachter nicht nützlich ist. Am einfachsten ist es, Alternativtext für Bilder festzulegen, die Text enthalten. Der im Bild enthaltene Text kann im Allgemeinen als Alt-Attributwert verwendet werden. Was die Länge des Alternativtextes betrifft, sehen Sie sich an, was in den WCAG 2.0 (Web Content Accessibility Guidelines 2.0) steht: Der Alt-Attributwert muss weniger als 100 englische Zeichen umfassen, oder der Benutzer muss sicherstellen, dass der Ersetzungstext so kurz wie möglich ist. Ich verstehe es als „so kurz wie möglich, so lange wie nötig“. Verwenden Sie das Alt-Attribut nicht für Textelemente, auch nicht, wenn es als Tooltip erscheinen soll. Für diese Verwendung ist es nicht gedacht. Soweit ich weiß, funktioniert dies nur im IE unter Windows und im alten Netscape 4.* (Windows-Version). Kein Mac-Browser zeigt dies als Tooltip an. Wenn Browser alternativen Text als QuickInfo anzeigen, wird die falsche Verwendung des Alt-Attributs gefördert. Manche Leute beginnen, bedeutungslosen Alternativtext zu schreiben, weil sie diesen eher als zusätzliche beschreibende Information betrachten und nicht als Ersatz für das Bild, das nicht angezeigt wird. Andere möchten möglicherweise nicht, dass ein Tooltip angezeigt wird, und ignorieren den Alt-Attributwert einfach vollständig. Diese falschen Vorgehensweisen bereiten den Betrachtern, die die Bilder nicht sehen können, Schwierigkeiten. Bitte verwenden Sie das Titelattribut für zusätzliche beschreibende Angaben und nicht unbedingt erforderliche Informationen. Titelattribut Das Titelattribut bietet Hinweisinformationen für das Element, auf das es gesetzt ist. Quelle: Das Titelattribut. Das Titelattribut kann in allen Tags außer Base, Basefont, Head, HTML, Meta, Param, Script und Title verwendet werden. Aber das ist nicht nötig. Vielleicht wissen deshalb viele Leute nicht, wann sie es verwenden sollen. Verwenden Sie das Titelattribut, um nicht unbedingt erforderliche Zusatzinformationen bereitzustellen. Die meisten visuellen Browser zeigen den Titeltext als Tooltip an, wenn Sie mit der Maus über ein bestimmtes Element fahren. Wie der Titeltext dargestellt wird, bleibt jedoch dem Hersteller überlassen. Einige Browser zeigen den Titeltext in der Statusleiste an. Beispielsweise frühere Versionen des Safari-Browsers. Das Titelattribut lässt sich gut dazu verwenden, einem Link einen beschreibenden Text hinzuzufügen, insbesondere dann, wenn der Zweck des Links aus dem Link selbst nicht klar hervorgeht. Dadurch erfahren Besucher, wohin die Links sie führen, und laden keine Seite, die sie möglicherweise nicht interessiert. Eine weitere mögliche Anwendung besteht darin, zusätzliche Beschriftungen für Bilder bereitzustellen, beispielsweise Daten oder andere nicht unbedingt erforderliche Informationen. Der Wert des Titelattributs kann länger sein als der Wert des Alt-Attributs. Beachten Sie jedoch, dass einige Browser lange Texte (wie Tooltips usw.) abschneiden. Beispielsweise können Mozilla-basierte Browser nur die ersten 60 Zeichen anzeigen. Dies wird als ein Mozilla-Fehler angesehen und Sie sollten sich dessen bewusst sein. Vor dem Einsatz beachten Mein Rat ist, Ihren Alternativtext kurz zu halten. In den meisten Anwendungen sollte es leer gelassen werden, alt="" (beachten Sie, dass zwischen den beiden Anführungszeichen kein Leerzeichen steht). Denken Sie über diese Bilder nach: Welche Informationen liefern sie den Betrachtern, welche Worte sollten Sie zur Beschreibung verwenden oder welche Informationen sollten Sie denjenigen bereitstellen, die das Bild nicht sehen können? Wäre es für jemanden, der das Bild nicht sehen kann, wirklich hilfreich, wenn der Alternativtext „Foto eines CEOs, der in grauem Anzug und schwarzer Krawatte vor einem Gebäude steht und in den Himmel blickt“ lauten würde? Wenn Sie das meinen, dann schreiben Sie es. In vielen Fällen halte ich es für besser, den Ersetzungstext leer zu lassen. Es ist schwierig, strikte Anweisungen für das Titelattribut zu geben. Ich verwende es hauptsächlich für Links, die nicht selbsterklärend sind, wie etwa derselbe Linktext auf derselben Seite, aber unterschiedlichen Linkseiten. Manchmal werden für einige Schaltflächen oder Formularelemente auch ausführlichere Erläuterungstexte bereitgestellt. Längere Beschreibung Wenn ein Bild eine längere Beschreibung erfordert, als in das Alt-Attribut passt, gibt es einige Optionen. Mit dem Attribut „longdesc“ kann ein Link zu einer separaten Seite bereitgestellt werden, die eine Textbeschreibung des Bildes enthält. Dies bedeutet, dass der Besucher auf eine andere Seite weitergeleitet wird, was das Verständnis erschweren kann. Darüber hinaus ist die Browserunterstützung für das Longdesc-Attribut inkonsistent und nicht sehr gut. Das Attribut „longdesc“ kann statt einer Verlinkung auf eine andere Seite einen Link zu einem anderen Teil des aktuellen Dokuments (Anker) enthalten. Andy Clarke erklärt in den Fußnoten zur Barrierefreiheit sehr gut, wie man dies verwendet. Als Ergänzung zu longdesc können Beschreibungslinks (D-Links) verwendet werden. Ein Beschreibungslink ist ein normaler Link, der zu einer Seite mit alternativem Text führt. Der Link wird neben dem Bild platziert und ist in allen Browsern zugänglich. Über die Wirksamkeit dieser Maßnahme besteht große Uneinigkeit, und mir persönlich gefällt diese Idee nicht besonders. WCAG listet Beschreibungslinks auch in seinem Arbeitsentwurf „HTML-Techniken für WCAG 2.0“ als „veraltet“ auf. Wenn eine lange Beschreibung des Bildes für einen Betrachter nützlich wäre, sollten Sie erwägen, diese einfach im selben Dokument anzuzeigen, anstatt sie mit einer anderen Seite zu verknüpfen oder sie zu verbergen. Auf diese Weise kann es jeder lesen. Dies ist eine einfache Methode mit geringem technischen Aufwand. |
<<: Was ist ein MySQL-Index? Fragen Sie, wenn Sie es nicht verstehen
>>: So implementieren Sie die Kopierschutzfunktion für Webseiten (mit der Cracking-Methode)
Artikel empfehlen
Welche Nachteile hat die Bereitstellung der Datenbank in einem Docker-Container?
Vorwort Docker erfreut sich seit zwei Jahren groß...
Implementierung des Umschreibesprungs in Nginx
1. Neuer und alter Domain-Namenssprung Anwendungs...
Mysql gibt die Methode zur Datumsbereichsextraktion an
Bei der Datenbankoperation ist der Umgang mit Dat...
Die Popularität chinesischer Domainnamen in China hat eine neue Höhepunktrunde eingeleitet
<br />Seit das Außenministerium und andere z...
mysql5.7 Installations- und Konfigurationstutorial unter Centos7.3
In diesem Artikel finden Sie das Installations- u...
So legen Sie eine feste IP-Adresse in einer virtuellen CentOS7-Maschine fest
Da meine Entwicklungsumgebung darin besteht, Cent...
Lösung für das Problem einer großen Anzahl von php-cgi.exe-Prozessen auf dem Server, die dazu führen, dass die CPU 100 % belegt
Optimieren Sie die FastCGI-Konfigurationsdatei fc...
Details zum Schreiben von React in einem Vue-Projekt
Wir können jsx/tsx-Dateien direkt erstellen Die P...
So zeigen Sie den Startparameterbefehl „Docker Run“ an (empfohlen)
Verwenden Sie runlike, um die Docker Run-Startpar...
Detaillierter Vergleich von Ember.js und Vue.js
Inhaltsverzeichnis Überblick Warum ein Framework ...
Tutorial zur Bedienung und Wartung von Linux, grundlegende Swap-Partition und LVM-Verwaltung
Inhaltsverzeichnis 1. Swap-Partition SWAP 1.1 Aus...
So implementieren Sie die Docker-Volume-Montage
Die Erstellung des einfachsten „Hello World“-Ausg...
Verwenden von react-virtualized zum Implementieren einer langen Liste von Bildern mit dynamischer Höhe
Inhaltsverzeichnis Während der Entwicklung aufget...
Methode zur Realisierung einer automatisierten Bereitstellung basierend auf Docker + Jenkins
Verwenden Sie Code Cloud, um ein Git-Code-Speiche...
Einführung in gängige XHTML-Tags
<br />Ich habe festgestellt, dass viele Leut...