What’s a title text?
Here below is a link with a title text. Hold your mouse pointer over it for a while and a small text will pop up. That’s the title text. It’s added with the title-attribute in the link.
This is how it looks:
“Wait a minute” a lot of you will be thinking. “I’m on my phone, I don’t have a mouse pointer.” Great observation! It brings us perfectly onto our next topic…
The problem with title texts
1. Title texts don’t work on touch screens
Title texts only show up on hover, and you can’t hover on 99.9% of all touch screens. I think most people would agree that a design pattern that doesn’t work on touchscreens kind of sucks.
2. Title texts cause problems for screen magnifiers
For users with screen magnification, title texts will often be somewhat of a bully. The title text can be cut off the screen because the user is zoomed in so far. When the user moves the mouse pointer to be able to see it, the title text will often disappear. More on this in our article How to make your site accessible to screen magnifiers.
Another problem for users with screen magnification is that the title text can cover essential parts of the content. In the example below the title text for the image covers the link below it.
You might be thinking: “Well, just move the mouse cursor.” Sadly it’s often not possible for users who are zoomed in very far and need to have the cursor where they are reading.
As icing on top of the cake for this group of users, title texts will not be enlarged when you use browser zoom (control +). So yeah, title texts really suck for people with visual impairments.
3. Title texts don’t work with keyboard navigation
Apart from not working on touch screens, title texts don’t show up for users who navigate with the keyboard or with the many assistive technologies for users with motor impairments. There are ways to make the title text show on keyboard focus, but it’s not there by default and almost no developers will add that feature.
4. Title texts require users to guess
There is no way to tell if a link, icon, form field, button or other element has a title text before hovering over it. Most users will not bother to waste energy hovering over something to possibly get help. In the words of usability guru Jakob Nielsen: the interaction cost is too high.
5. Title texts require users to wait
Not only does the user have to guess if there’s a title text, they also have to wait a second before it possibly shows. Users are usually in a hurry when navigating the web, so most won’t stop and dwell.
6. Screen readers read title texts inconsistently
Many users with visual impairments use screen readers to navigate the web. Some screen readers will read title texts. Some will not the read title texts. Some will pause before reading them. Some have a setting that the user can enable to read them, but most will not know of that setting or bother activating it.
The point is, title texts are handled differently and you can’t rely on how it’s conveyed to the user.
Don’t trust me?
David Ball of @silktide wrote this nicely researched piece on the same subject a few years ago:
I thought title text improved accessibility. I was wrong.
He asked html-expert Jeffrey Zeldman on his thoughts on title-texts.
@silktide No! Do not use.
— zeldman (@zeldman) December 12, 2012
Web accessibility guru Bruce Lawson isn’t a fan of the title-text either:
@silktide kill it with fire. Or, as Bim, a blind screenreader user with RNIB would say: http://t.co/y6tN6UZU
— Bruce Lawson (@brucel) December 12, 2012
Also, here’s another nice article on title texts: Don’t rely on the title attribute for accessibility.
What should I use instead of title texts?
Well, just make sure your link and button names clearly describe where they take your user and you’ll be fine. Also, write text labels for your icons, then you’ll not need to worry about title texts.
Don’t confuse title texts with alt-texts. Alt-texts are very important and don’t suck at all:
What about iframes?
Some accessibility experts say there’s one exception where they recommend using the title text: iframes. First off: don’t use iframes unless you really have to. They can really confuse screen reader users.
But if you use them anyway, just add an aria-label that describes the iframe’s content instead of the title attribute and this conundrum is solved.
Other things that suck
This was our third article on the topic of things that suck. You should check out our other two master pieces:
Hope you enjoyed!