SVG Title vs. HTML Title Attribut

Sie kennen das title-Attribut? Ich kann das machen

<div title="The Title">
  I'm a div with a `title`
</div>

Und wenn ich mich jetzt auf einem Gerät mit einem Mauszeiger befinde und den Cursor über dieses Element bewege, sehe ich…

Was, äh, ich schätze, etwas ist. Ich verwende es manchmal für Dinge wie das Hinzufügen eines erweiterten Datums oder einer erweiterten Zeit zu einem Element, das dafür eine Kurzform verwendet. Es ist ein winziger Hauch von UX-Hilfsbereitschaft, der ausschließlich für sehende Mausanwender reserviert ist.

Aber es ist nicht besonders nützlich, soweit ich weiß. Ire Aderinokun hat untersucht, wie es für das Element <abbr> verwendet wird (ein häufig zitiertes Beispiel) und festgestellt, dass es allein nicht besonders gut funktioniert. Sie schlägt ein JavaScript-gestütztes Muster vor. Sie erwähnt auch, dass JAWS eine Einstellung zum Ansagen von Titeln hat, was interessant ist (obwohl es anscheinend standardmäßig deaktiviert ist).

Ich weiß ehrlich gesagt nicht, wie nützlich title für Screenreader ist, aber es wird sicherlich nuanciert sein.

Ich habe gerade etwas über Titel gelernt – das funktioniert nicht

<!-- Incorrect usage -->
<svg title="Checkout">
</svg>

Wenn Sie mit der Maus über dieses Element fahren, wird kein Titel angezeigt. Sie müssen es so machen:

<!-- Correct usage -->
<svg>
  <title id="unique-id">Checkout</title>
  
  <!-- More detail -->
  <desc>A shopping cart icon with baguettes and broccoli in the cart.</desc>
</svg>

Was interessanterweise Firefox 79 gerade unterstützt.

Wenn Sie title auf diese Weise verwenden, ist der Hover-Bereich zur Anzeige des Titel-Popups das gesamte Rechteck des <svg>.

Ich habe mir das alles angesehen, weil ich eine interessante E-Mail von jemandem erhalten habe, der in einer Situation war, in der das Titel-Popup nur beim Hovern über die „ausgefüllten“ Pixel eines SVG angezeigt wurde, aber nicht über transparente Pixel. *Seltsam*, dachte ich. Ich konnte es in meinen Tests auch nicht reproduzieren.

Es stellt sich heraus, dass es eine solche Situation gibt. Sie können ein <title> innerhalb eines <use>-Elements anwenden, dann gilt der Titel nur für die Pixel, die über <use> hereinkommen.

Wenn Sie den Titel für den „weißen Teil“ entfernen, werden Sie sehen, dass der „schwarze Teil“ nur über den schwarzen Pixeln angezeigt wird. Das scheint browserübergreifend konsistent zu sein. Achten Sie einfach darauf, wenn Sie Titel auf diese Weise anwenden.