Heim Web-Frontend HTML-Tutorial Zusammenfassung zur korrekten Verwendung des HTML-Titelattributs

Zusammenfassung zur korrekten Verwendung des HTML-Titelattributs

Mar 06, 2017 pm 04:21 PM

Viele unerfahrene Freunde sind verwirrt über die beiden Attribute Titel und Alt. Sie verwenden das Titelattribut häufig als Ersatz für das Alt-Attribut des Bildes usw. Diese Verhaltensweisen sind verboten Wenn Sie es nicht verstehen, lesen Sie den nächsten Artikel Wenn Sie etwas vor Benutzern verbergen möchten, die Telefone, Tablets und unterstützende Technologien verwenden, es aber nur Tastaturbenutzern anzeigen möchten, verwenden Sie das Titelattribut.
Details

Es liegt ein Problem mit dem HTML-Titelattribut selbst vor. Das Problem ist, dass es in einigen wichtigen Punkten nicht gut genug funktioniert, obwohl es schon seit mehr als 14 Jahren bei uns ist. Mit dem Aufkommen von Touch-Geräten hat die Rolle dieses Attributs weiter abgenommen. Die Zugänglichkeit des Titelattributs ist aufgrund mangelnder Browserunterstützung, Unterstützung für Bildschirmleseprogramme und mangelnder Aufmerksamkeit des Autors zu einem Problem geworden.
Das Titelattribut wird aufgrund mangelnder Unterstützung in den folgenden Situationen überflüssig:

Für Personen, die in mobilen Browsern auf Webinhaltsinformationen zugreifen. Normalerweise wird der Inhalt des Titelattributs als Eingabeaufforderung in Desktop-Browsern angezeigt. Soweit ich weiß, unterstützt kein mobiler Browser die Anzeige von Tooltips und es gibt keine andere visuelle Methode, um auf den Inhalt des Titelattributs zuzugreifen.
Informativ für diejenigen, die keine Maus benutzen können. Normalerweise wird der Inhalt des Titelattributs als Eingabeaufforderung in Desktop-Browsern angezeigt. Obwohl das Verhalten von Eingabeaufforderungsinformationen eine mehr als zehnjährige Geschichte hat, hat kein Browser eine Methode zur Verwendung der Tastatur zum Anzeigen des Titelattributs implementiert.
Zur Verwendung in den meisten HTML-Elementen bietet es Informationen für Personen, die eine Vielzahl unterstützender Technologien verwenden. Soweit ich weiß, unterstützen Screenreader den Zugriff auf Titelattributinformationen nicht.

Das Titelattribut ist wie folgt nicht benutzerfreundlich

Mobiltelefonbenutzer
Nur-Tastatur-Benutzer
Benutzer, die Bildschirmlupen verwenden
Screenreader-Benutzer
Feinmotorik Beeinträchtigungen der Fähigkeiten Benutzer
Benutzer mit kognitiven Beeinträchtigungen

Beispiele für die Nützlichkeit des Titelattributs:

Beschriften eines Frames oder Iframe-Elements:

Beschriftungen bereitzustellen, die unter besonderen Umständen angezeigt werden, die Programme erfordern. Die direkte Verwendung sichtbarer Textbeschriftungen wäre überflüssig:
value="search">
Label-Steuerelement in der Datentabelle.

Beispiele, bei denen das Titelattribut nutzlos oder von geringem Nutzen ist:

Fügen Sie zusätzliche Informationen zu Links oder umgebenden Inhalten hinzu, die kein Text sein können:
newsletter Stattdessen sollten solche Informationen Teil des Linktextes oder neben dem Link sein.
Geben Sie die gleichen Informationen wie im Linktext an:
newsletter
Es wird empfohlen, den Linkinhalt nicht zu kopieren das Titelattribut. Das kommt eigentlich dem Nichtstun gleich.
Titel für Bild:
alt="Das Schloss hat jetzt zwei Türme und zwei Wände.">
Wahrscheinlich sind die Titelinformationen die wichtigsten Informationen und sollten standardmäßig für alle Benutzer zugänglich sein. Wenn ja, dann sollte sich dieser Inhalt direkt neben dem Bild befinden.
Wird anstelle von Formular-Tags verwendet und entfernt sichtbare Text-Tags:

Screenreader-Benutzer greifen auf Tags für Formularelemente zu, da das Titelattribut ist im Attributnamen innerhalb der Barrierefreiheits-API enthalten (was nicht unterstützt wird, wenn Textbeschriftungen das Label-Element verwenden). Bei vielen anderen Nutzern ist das nicht der Fall. Es wird empfohlen, nach Möglichkeit eine sichtbare Textbeschriftung einzufügen.
Versorgen Sie das Formularelement mit denselben Informationen wie der sichtbare Etiketteninhalt:
Tu es nicht. Das Wiederholen von sichtbarem Beschriftungstext scheint keinen anderen Zweck zu haben, als eine Menge lästiges kognitives Rauschen hinzuzufügen. Hören Sie mit dieser Verwendung auf.
Stellt zusätzliche Anweisungen für Formularelemente bereit:
;
Wenn diese Anweisung für die korrekte Verwendung eines Formularelements wichtig ist, geben Sie bitte Textinformationen rund um das Element an, damit jeder Benutzer sie lesen kann.
Als Erweiterung der Abkürzung:
W3C
Obwohl das Titelattribut des abbr-Elements von Screenreader-Software unterstützt wird, verwenden Es ist immer noch problematisch, da es für andere Benutzergruppen nicht verfügbar ist. Es wird empfohlen, den vollständigen Namen im Textformat anzugeben, wenn die Abkürzung zum ersten Mal im Dokument erscheint, oder ein Glossar des vollständigen Namens bereitzustellen. Dies bedeutet nicht, dass das Titelattribut nicht verwendet werden kann, da es Einschränkungen unterliegt und der vollständige Name in Textform angegeben werden sollte.

HTML 5.1 enthält allgemeine Hinweise zur Verwendung des Titelattributs:

Von der Verwendung des Titelattributs wird derzeit abgeraten, da viele Benutzerprogramme nicht in der Lage sind, dieses Attribut gemäß der Spezifikation anzuzeigen (z. B. wenn ein Mauszeigergerät erforderlich ist, um die Anzeige von Eingabeaufforderungsinformationen zu veranlassen, ausgenommen Benutzer, die nur über die Tastatur verfügen und Benutzer mit Touchscreen).

Die Verwendung des Titelattributs anstelle des Alt-Attributs eines IMG-Elements oder als Titel eines Bildes ist verboten.

Die Verwendung des Titelattributs ist derzeit aufgrund der schwachen Barrierefreiheitsunterstützung für dieses Attribut verboten in vielen Benutzeragenten ...

Weitere zusammenfassende Artikel zur korrekten Verwendung des HTML-Titelattributs finden Sie auf der chinesischen PHP-Website!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Beste grafische Einstellungen
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Was ist der Zweck des & lt; datalist & gt; Element? Was ist der Zweck des & lt; datalist & gt; Element? Mar 21, 2025 pm 12:33 PM

Der Artikel erörtert den HTML & lt; Datalist & gt; Element, das die Formulare verbessert, indem automatische Vorschläge bereitgestellt, die Benutzererfahrung verbessert und Fehler reduziert werden.Character Count: 159

Was ist der Zweck des & lt; Fortschritts & gt; Element? Was ist der Zweck des & lt; Fortschritts & gt; Element? Mar 21, 2025 pm 12:34 PM

Der Artikel erörtert den HTML & lt; Progress & gt; Element, Absicht, Styling und Unterschiede vom & lt; Meter & gt; Element. Das Hauptaugenmerk liegt auf der Verwendung & lt; Fortschritt & gt; Für Aufgabenabschluss und & lt; Meter & gt; für stati

Was ist der Zweck des & lt; Meter & gt; Element? Was ist der Zweck des & lt; Meter & gt; Element? Mar 21, 2025 pm 12:35 PM

Der Artikel erörtert das HTML & lt; Meter & gt; Element, verwendet zur Anzeige von Skalar- oder Bruchwerten innerhalb eines Bereichs und seine gemeinsamen Anwendungen in der Webentwicklung. Es differenziert & lt; Meter & gt; von & lt; Fortschritt & gt; und Ex

Was ist das Ansichtsfenster -Meta -Tag? Warum ist es wichtig für reaktionsschnelles Design? Was ist das Ansichtsfenster -Meta -Tag? Warum ist es wichtig für reaktionsschnelles Design? Mar 20, 2025 pm 05:56 PM

In dem Artikel wird das Ansichtsfenster -Meta -Tag erörtert, das für das reaktionsschnelle Webdesign auf mobilen Geräten unerlässlich ist. Es wird erläutert, wie die ordnungsgemäße Verwendung eine optimale Skalierung von Inhalten und Benutzerinteraktion gewährleistet, während Missbrauch zu Design- und Zugänglichkeitsproblemen führen kann.

Was ist der Zweck des & lt; iframe & gt; Etikett? Was sind die Sicherheitsüberlegungen bei der Verwendung? Was ist der Zweck des & lt; iframe & gt; Etikett? Was sind die Sicherheitsüberlegungen bei der Verwendung? Mar 20, 2025 pm 06:05 PM

Der Artikel erörtert das & lt; iframe & gt; Der Zweck von Tag, externe Inhalte in Webseiten, seine gemeinsamen Verwendungen, Sicherheitsrisiken und Alternativen wie Objekt -Tags und APIs einzubetten.

Wie benutze ich die HTML5 & lt; Zeit & gt; Element, um Daten und Zeiten semantisch darzustellen? Wie benutze ich die HTML5 & lt; Zeit & gt; Element, um Daten und Zeiten semantisch darzustellen? Mar 12, 2025 pm 04:05 PM

Dieser Artikel erklärt den HTML5 & lt; Time & gt; Element für semantische Datum/Uhrzeit. Es betont die Wichtigkeit des DateTime-Attributs für die Maschinenlesbarkeit (ISO 8601-Format) neben menschenlesbarem Text, das Zubehör steigert

Wie verwende ich HTML5 -Formularvalidierungsattribute, um die Benutzereingabe zu validieren? Wie verwende ich HTML5 -Formularvalidierungsattribute, um die Benutzereingabe zu validieren? Mar 17, 2025 pm 12:27 PM

In dem Artikel werden unter Verwendung von HTML5 -Formularvalidierungsattributen wie Erforderlich, Muster, Min, MAX und Längengrenzen erörtert, um die Benutzereingabe direkt im Browser zu validieren.

Was sind die besten Praktiken für die Kompatibilität des Cross-Browsers in HTML5? Was sind die besten Praktiken für die Kompatibilität des Cross-Browsers in HTML5? Mar 17, 2025 pm 12:20 PM

In Artikel werden Best Practices zur Gewährleistung der HTML5-Cross-Browser-Kompatibilität erörtert und sich auf die Erkennung von Merkmalen, die progressive Verbesserung und die Testmethoden konzentriert.

See all articles