title HTML-Globalattribut

Probieren Sie es aus

<p>
  Use the <code>title</code> attribute on an <code>iframe</code> to clearly
  identify the content of the <code>iframe</code> to screen readers.
</p>

<iframe
  title="Wikipedia page for the HTML language"
  src="proxy.php?url=https%3A%2F%2Fen.m.wikipedia.org%2Fwiki%2FHTML"></iframe>
<iframe
  title="Wikipedia page for the CSS language"
  src="proxy.php?url=https%3A%2F%2Fen.m.wikipedia.org%2Fwiki%2FCSS"></iframe>

iframe {
  height: 200px;
  margin-bottom: 24px;
  width: 100%;
}

Der Hauptverwendungszweck des title-Attributs besteht darin, <iframe>-Elemente für unterstützende Technologien zu kennzeichnen.

Das title-Attribut kann auch verwendet werden, um Steuerelemente in Datentabellen zu kennzeichnen.

Das title-Attribut, wenn es zu <link rel="stylesheet"> hinzugefügt wird, erzeugt ein alternatives Stylesheet. Beim Definieren eines alternativen Stylesheets mit <link rel="alternate"> ist das Attribut erforderlich und muss auf einen nicht leeren Zeichenfolgenwert gesetzt werden.

Wenn es im öffnenden Tag von <abbr> enthalten ist, muss title eine vollständige Entfaltung der Abkürzung oder des Akronyms sein. Anstelle der Verwendung von title sollte, wenn möglich, eine Entfaltung der Abkürzung oder des Akronyms beim ersten Einsatz im Klartext geliefert und <abbr> zur Markierung der Abkürzung verwendet werden. Dies ermöglicht allen Nutzern zu wissen, welcher Name oder Begriff durch die Abkürzung oder das Akronym abgekürzt wird und gibt den Benutzeragenten einen Hinweis, wie der Inhalt auszusprechen ist.

Während title verwendet werden kann, um ein programmatisch zugeordnetes Label für ein <input>-Element bereitzustellen, ist dies keine gute Praxis. Verwenden Sie stattdessen ein <label>.

Mehrzeilige Titel

Das title-Attribut kann mehrere Zeilen enthalten. Jedes U+000A LINE FEED (LF)-Zeichen stellt einen Zeilenumbruch dar. Es ist Vorsicht geboten, da dies bedeutet, dass das Folgende über zwei Zeilen gerendert wird:

HTML

<p>
  Newlines in <code>title</code> should be taken into account. This
  <span
    title="This is a
multiline title">
    example span
  </span>
  has a title attribute with a newline.
</p>
<hr />
<pre id="output"></pre>

JavaScript

Wir können das title-Attribut abfragen und es im leeren <pre>-Element wie folgt anzeigen:

const span = document.querySelector("span");
const output = document.querySelector("#output");
output.textContent = span.title;

Ergebnis

Vererbung von Titelattributen

Wenn ein Element kein title-Attribut hat, erbt es dieses von seinem Elternelement, das es wiederum von seinem Elternelement erben kann, und so weiter.

Wenn dieses Attribut auf den leeren String gesetzt wird, bedeutet dies, dass die titles der Vorfahren irrelevant sind und nicht im Tooltip für dieses Element verwendet werden sollten.

HTML

<div title="CoolTip">
  <p>Hovering here will show "CoolTip".</p>
  <p title="">Hovering here will show nothing.</p>
</div>

Ergebnis

Barrierefreiheitsbedenken

Die Verwendung des title-Attributs ist hoch problematisch für:

• Personen, die nur mit Touch-Geräten arbeiten
• Personen, die mit Tastaturen navigieren
• Personen, die unterstützende Technologien wie Bildschirmlesegeräte oder Bildschirmlupe verwenden
• Personen mit Beeinträchtigungen bei der Feinmotorik
• Personen mit kognitiven Bedenken

Dies liegt an der inkonsistenten Browser-Unterstützung, die durch die zusätzliche Verarbeitung der von Browser gerenderten Seite durch unterstützende Technologien verschärft wird. Wenn ein Tooltip-Effekt gewünscht ist, ist es besser, eine zugänglichere Technik zu verwenden, die mit den oben genannten Navigationsmethoden zugänglich ist.

• 3.2.5.1. Das title-Attribut | W3C HTML 5.2: 3. Semantik, Struktur und APIs von HTML-Dokumenten
• Verwendung des HTML-title-Attributs – aktualisiert | Vispero
• Tooltips & Toggletips - Inclusive Components
• Die Prüfungen und Trübsale des title-Attributs - 24 Accessibility

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Alle globalen Attribute.
• HTMLElement.title, das dieses Attribut widerspiegelt.