July 30th, 2020
You know the
title attribute? I can do this:
<div title="The Title"> I'm a div with a `title` </div>
And now if I’m on a device with a mouse pointer and hover the cursor over that element, I get…
Which, uh, I guess is something. I sometimes use it for things like putting an expanded date or time on an element that uses a shorthand for it. It’s a tiny bit of UX helpfulness reserved exclusively for sighted mouse users.
But it’s not particularly useful, as I understand it. Ire Aderinokun dug into how it’s used for the
I honestly just don’t know how useful
title is for screen readers, but it’s certainly going to be nuanced.
I did just learn something about titles though… this doesn’t work:
<!-- Incorrect usage --> <svg title="Checkout"> </svg>
If you hover over that element, you won’t get a title display. You have to do it like this:
<!-- Correct usage --> <svg> <title>Checkout</title> <!-- More detail --> <desc>A shopping cart icon with baguettes and broccoli in the cart.</desc> </svg>
Which, interestingly, Firefox 79 just started supporting.
When you use a title like that, the hoverable area to reveal the title popup is the entire rectangle of the
I was looking at all this because I got an interesting email from someone who was in a situation where the title popup only seemed to come up when hovering over the “filled in” pixels of an SVG, and not where transparent pixels were. Weird, I thought. I couldn’t replicate in my testing either.
Turns out there is a situation like this. You can apply a
<title> within a
<use> element, then the title only applies to those pixels that come in via the
If you remove the “white part” title, you’ll see the “black part” only comes up over the black pixels. Seems to be consistent across browsers. Just something to watch out for if that’s how you apply titles.
The original post SVG Title vs. HTML Title Attribute.