You understand the title attribute? I can do that:
< div title=”The Title”>
I am just a div with a `title`
And now if I’m on the device with a mouse pointer plus hover the cursor over that will element, I get…
Which, uh, I guess is something. I occasionally use it for things like putting a good expanded date or time with an element that uses shorthand for this. It’s a tiny bit of UX helpfulness appropriated exclusively for sighted mouse customers.
I actually honestly just don’t know how helpful title is for screen readers, yet it’s certainly going to be refined.
I did just learn something regarding titles though… this doesn’t function:
<! — Incorrect usage –>
< svg title=”Checkout”>
If you hover over that component, you won’t get a title screen. You have to do it like this:
<! — Correct usage –>
< title> Checkout< /title>
<! — More detail –>
< desc> A shopping cart icon along with baguettes and broccoli in the trolley. < /desc>
Which usually, interestingly, Firefox 79 just began supporting.
When you use title like that, the particular hoverable area to reveal the particular title popup is the entire rectangular shape of the < svg>.
I was taking a look at all this because I got an interesting e-mail from someone who was in a situation in which the title popup only seemed to appear when hovering over the “filled in” pixels of an SVG, and not exactly where transparent pixels were. Weird, I think. I couldn’t replicate in my screening either.
Turns out there is a situation such as this. You can apply a < title> within a < use> element, then your title only applies to those -pixels that come in via the < use>.
If you remove the “white part” name, you’ll see the “black part” just comes up over the black pixels. Appears to be consistent across browsers. Just some thing to watch out for if that’s how you use titles.