SVG Title vs. HTML Title Attribute

The title attribute: a familiar friend, but is it truly helpful? We can use it like this:

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

Hovering over this element reveals the title—useful for things like displaying expanded dates or times. However, its utility is limited to sighted mouse users.

Ire Aderinokun's research highlights its shortcomings, especially with the <abbr></abbr> element. She advocates for a JavaScript-enhanced approach. While JAWS can announce titles, this feature isn't enabled by default. The effectiveness of title for screen readers remains unclear and context-dependent.

Here's a surprising discovery: this doesn't work:

<svg title="Checkout"></svg>

No title popup appears on hover. Instead, you need this:

<svg><title>Checkout</title>
<desc>A shopping cart icon with baguettes and broccoli in the cart.</desc></svg>

Firefox 79 introduced support for this method. The hoverable area for the title popup encompasses the entire SVG rectangle.

This investigation stemmed from an email describing a peculiar issue: title popups only appeared over the "filled" pixels of an SVG, not the transparent ones. This proved reproducible when using a <title></title> within a <use></use> element. The title only applies to the pixels rendered by the <use></use> element. Removing the "white part" title reveals that the "black part" title only appears over the black pixels. This behavior appears consistent across browsers. A crucial detail to remember when using titles within <use></use> elements.

The above is the detailed content of SVG Title vs. HTML Title Attribute. For more information, please follow other related articles on the PHP Chinese website!