Einige Tipps zur richtigen Verwendung des HTML-Titelattributs
|
Wenn Sie Inhalte vor Benutzern von Telefonen, Tablets und unterstützenden Technologien verbergen und nur Tastaturbenutzern anzeigen möchten, verwenden Sie das Titelattribut. Detail Mit dem HTML-Titelattribut selbst stimmt etwas nicht. Das Problem besteht darin, dass die Lösung trotz ihrer mehr als 14-jährigen Erfahrung in einigen wichtigen Punkten Mängel aufweist. Mit der Verbreitung von Touch-Geräten hat sich der Nutzen dieser Eigenschaft weiter verringert. Die Zugänglichkeit des Titelattributs ist aufgrund fehlender Browser- und Screenreader-Unterstützung sowie mangelnder Aufmerksamkeit seitens der Entwickler etwas enttäuschend geworden. Das Titelattribut wird aufgrund fehlender Unterstützung in den folgenden Fällen überflüssig: Für Personen, die über mobile Browser auf Webinhalte zugreifen. Normalerweise wird der Inhalt des Titelattributs als Tooltip in Desktop-Browsern angezeigt. Soweit mir bekannt ist, unterstützt kein mobiler Browser die Anzeige von Tooltips und es gibt keine andere visuelle Möglichkeit, auf den Inhalt des Titelattributs zuzugreifen. Bereitstellung von Informationen für diejenigen, die keine Maus verwenden können. Normalerweise wird der Inhalt des Titelattributs als Tooltip in Desktop-Browsern angezeigt. Obwohl es das Verhalten von Eingabeaufforderungsinformationen bereits seit mehr als 10 Jahren gibt, hat kein Browser eine Methode zur Anzeige des Titelattributs mithilfe der Tastatur implementiert. Zur Verwendung bei den meisten HTML-Elementen, um Personen, die verschiedene unterstützende Technologien verwenden, Informationen bereitzustellen. Soweit ich weiß, unterstützen Bildschirmleseprogramme den Zugriff auf Titelattributinformationen nicht. Das Titelattribut ist wie folgt nicht benutzerfreundlich Handynutzer Personen, die nur eine Tastatur verwenden Personen, die eine Bildschirmlupe verwenden Personen, die einen Screenreader verwenden Personen mit Beeinträchtigungen der Feinmotorik Personen mit kognitiven Beeinträchtigungen Beispiele für nützliche Titelattribute: So beschriften Sie ein Frame- oder Iframe-Element: <frame title="Navigation"> Stellen Sie Beschriftungen bereit, die nur unter besonderen Umständen angezeigt werden und Programmierung erfordern. Die direkte Verwendung sichtbarer Textbeschriftungen wäre überflüssig: <input type="text" title="Suche"> <input type="senden" value="Suche"> Ein Beschriftungssteuerelement in einem Datenraster. Beispiele, bei denen das Titelattribut nutzlos oder nur von begrenztem Nutzen ist: So fügen Sie einem Link oder umgebenden Inhalt zusätzliche Informationen hinzu, die nicht als Text verfügbar sind: <a href="newsletter.PDF" title="PDF-Datei, Größe 1 MB.">Newsletter</a> Stattdessen sollten solche Informationen als Teil des Linktextes oder neben dem Link enthalten sein. Geben Sie die gleichen Informationen wie im Linktext an: <a href="newsletter.PDF" title="newsletter">Newsletter</a> Es wird empfohlen, den Linkinhalt nicht als Titelattribut zu kopieren. Dies ist eigentlich gleichbedeutend damit, nichts zu tun. Zu verwendender Titel für das Bild: <img src="castle1858.jpeg" title="Ölfarbe auf Leinwand. Maria Towle, 1858." alt="Das Schloss hat jetzt zwei Türme und zwei Mauern."> Dies sind wahrscheinlich die wichtigsten Informationen und sie sollten standardmäßig für alle Benutzer zugänglich sein. Wenn ja, dann sollte dieser Inhalt direkt neben dem Bild platziert werden. Wird verwendet, um die Formularbeschriftung zu ersetzen und die sichtbare Textbeschriftung zu entfernen: <Eingabetyp="Text" Titel="Name"> Benutzer von Bildschirmleseprogrammen können auf die Beschriftung des Formularelements zugreifen, da das Titelattribut als Attributname in der Barrierefreiheits-API aufgeführt ist (dies wird nicht unterstützt, wenn das Beschriftungselement für Textbeschriftungen verwendet wird). Viele andere Benutzer tun dies nicht. Es wird empfohlen, wenn möglich eine sichtbare Textbeschriftung einzufügen. Geben Sie dieselben Informationen ein wie der sichtbare Beschriftungsinhalt für das Formularelement: <label für="n1">Name</label> <input Typ="Text" Titel="Name" ID="n1"> Die Wiederholung sichtbaren Beschriftungstextes kann nichts weiter bewirken, als den Grad der kognitiven Belästigung des Benutzers zu erhöhen. Tu es nicht. Die Wiederholung sichtbaren Beschriftungstextes scheint keinen anderen Zweck zu erfüllen, als eine störende Menge kognitiven Lärms hinzuzufügen. Verwenden Sie ihn daher nicht mehr. Bietet zusätzliche Anweisungen für Formularelemente: <label for="n1">Name</label> <input type="text" title="Bitte Großbuchstaben verwenden."id="n1"> Wenn die Anweisungen für die korrekte Verwendung eines Formularelements unbedingt erforderlich sind, fügen Sie um das Element herum Text ein, sodass jeder Benutzer ihn lesen kann. Als Erweiterung der Abkürzung: <abbr Titel="World Wide Web Consortium">W3C</abbr> Obwohl das Titelattribut des abbr-Elements von Screenreader-Software unterstützt wird, ist seine Verwendung dennoch problematisch, da es für andere Benutzergruppen nicht zugänglich ist. Es wird empfohlen, den vollständigen Namen einer Abkürzung beim ersten Auftreten im Dokument oder in einem Glossar im Textformat anzugeben. Dies bedeutet nicht, dass das Titelattribut nicht verwendet werden kann, es ist jedoch eingeschränkt und der vollständige Titel sollte in Textform angegeben werden. HTML 5.1 enthält eine allgemeine Empfehlung zur Verwendung des Titelattributs: Es wird derzeit davon abgeraten, sich auf das Titelattribut zu verlassen, da viele Benutzeragenten dieses Attribut nicht wie in der Spezifikation gefordert anzeigen (z. B. ist ein Mauszeigergerät erforderlich, damit Tooltips angezeigt werden, ausgenommen sind ausschließlich Tastatur- und Touchscreen-Benutzer). Die Verwendung des Titelattributs anstelle des Alt-Attributs des img-Elements oder als Titel des Bildes ist verboten Aufgrund der schwachen Unterstützung der Barrierefreiheit für dieses Attribut in vielen Benutzeragenten ist es derzeit nicht gestattet, sich auf das Titelattribut zu verlassen ... |
<<: Beispielcode zum Testen einer Technologieanwendung basierend auf Docker+Selenium Grid
>>: Verwenden Sie h1-, h2- und h3-Tags angemessen
Artikel empfehlen
Ein zeitaufwändiger Fehlerbehebungsprozess für einen Docker-Fehler
Inhaltsverzeichnis Herkunft Umweltinformationen F...
Lösen Sie das Problem der Ausführung von „Hello World“ nach der Docker-Installation
Docker V1.13.1 auf centos7.3 mit yum installiert ...
MySQL max_allowed_packet-Einstellung
max_allowed_packet ist ein Parameter in MySQL, de...
Detaillierte Erläuterung der grundlegenden Befehle des Docker-Ausführungsprozesses und des Images
Inhaltsverzeichnis 1. Workflow ausführen 2. Grund...
Avue-CRUD-Implementierungsbeispiel für einen komplexen dynamischen Header auf mehreren Ebenen
Inhaltsverzeichnis Vorwort Hintergrunddatenspleiß...
js und jquery, um einen Tab-Statusleisten-Umschalteffekt zu erzielen
Heute werden wir einen einfachen Fall durchgehen ...
So erlauben Sie allen Hosts den Zugriff auf MySQL
1. Ändern Sie den Host-Feldwert eines Datensatzes...
Einrichten der React-Native-Umgebung und grundlegende Einführung
Umgebungsvorbereitung 1. Umweltkonstruktion React...
So legen Sie die UTF-8-Kodierung in einer MySQL-Datenbank fest
Ändern Sie die Datei /etc/my.cnf oder /etc/mysql/...
Eine kurze Erläuterung zu schreibgeschützten und deaktivierten Attributen in Formularen
Schreibgeschützte und deaktivierte Attribute in F...
Eine Zusammenfassung der Gründe, warum MySQL keinen Datumsfeldindex verwendet
Inhaltsverzeichnis Hintergrund erkunden Zusammenf...
Vue implementiert Countdown-Funktion
In diesem Artikelbeispiel wird der spezifische Co...
So installieren Sie Nginx in Docker und konfigurieren den Zugriff über https
1. Laden Sie das neueste Nginx-Docker-Image herun...
So ändern Sie die Server-UUID in MySQL
Quelle des Problems: Wenn der Slave-Server der ge...
Drei Möglichkeiten, das längste Wort in einem String in JavaScript zu finden (empfohlen)
Dieser Artikel basiert auf dem Free Code Camp Bas...