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
Webentwickler sind besorgt über die Koexistenz von IE7 und IE8
Ich habe heute IE8 installiert. Als ich auf die M...
Informationen zur Layoutmethode für Inhaltsüberlauf in Tabellen
Was ist Inhaltsüberlauf? Wenn tatsächlich viel Te...
Analyse und Lösung des a.getAttribute(href,2)-Problems in IE6/7
Kurzbeschreibung <br />In IE6 und 7 wird in...
Ausführliche Erläuterung der Konzepte und Verwendung von MySQL-Transaktionen
Inhaltsverzeichnis Der Begriff der Affären Der St...
Beispiel für die Einstellung des HTML-Hyperlink-Stils (vier verschiedene Zustände)
Code kopieren Der Code lautet wie folgt: <styl...
So lösen Sie das Problem, dass die Scroll-Ansicht des WeChat-Applets nicht nach links und rechts verschoben werden kann
Ich arbeite derzeit an einem eigenen kleinen Prog...
Docker realisiert die Verbindung mit demselben IP-Netzwerksegment
Vor Kurzem habe ich das Problem gelöst, dass Dock...
Der Inhalt der Tabelle in HTML wird horizontal und vertikal in der Mitte angezeigt
In CSS-Style-Datei angeben #class td /*Legen Sie ...
React-Methode zum Anzeigen von Daten auf Seiten
Inhaltsverzeichnis Übergeordnete Komponente „list...
Detaillierte Erklärung der schmerzlosen Token-Aktualisierungsmethode von Uniapp
Wenn das Front-End die Schnittstelle anfordert, w...
Detaillierte Erklärung zur Verwendung von Filtereigenschaften in CSS
Das Filterattribut definiert die visuelle Wirkung...
Detaillierte Erläuterung der grundlegenden Docker-Netzwerkkonfiguration
Externer Zugriff Ports nach dem Zufallsprinzip zu...
Eine kurze Diskussion über die Farbabstimmungsfähigkeiten von Webseiten (ein Muss für Front-End-Entwickler)
Im Allgemeinen sollte die Hintergrundfarbe einer W...
Schritte zum Einrichten des Windows Server 2016 AD-Servers (Bild und Text)
Einführung: AD ist die Abkürzung für Active Direc...
Grafisches Tutorial zur Installation des MySQL 5.7.21 Installers unter Windows 10
Installieren Sie MySQL und machen Sie sich Notize...