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 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 id="unique-id">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 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.
Here’s a great article on why you should basically never use the
tldr: Don’t use it unless you’re describing the contents of an
I have to say I disagree with the conclusion of that article. The mentality of not using things that aren’t widely supported sounds like something from the days of the browser wars.
But anyway, I like using title on script tags, instead of comments:
<script title="Facebook pixel code">
Absolutely amazing that you can read through the thorough and considerate and painstaking work of specialized accessibility professionals dealing and be like, “Nah, I’m good.”
This advice specifically stems from assistive technology still having many legacy support concerns.
Some webcomics use title for extra content (xkcd for example). On android chrome, you can see the title text if you “long touch” the image.