For a long time I thought HTML’s “title” attribute was really useful (more on what that is very soon). However, it isn’t. It seems useful and it fails to solve the problems you want it to. At times, it can make things worse!
What Is the HTML Title Attribute?
One “HTML attribute” that you can find all over the web is the “title” attribute. It’s commonly found on links like this one: Google. If you hover your cursor over that link, you should see a “tooltip” that also says “Google.” Here’s the HTML code to output that link where you can see the title attribute that you should not use:
WordPress uses tooltips in its own interface.1 In some cases, it’s used to give instructions to users:
WordPress also makes it easy to add the titles attribute to links with the “Insert/Edit Link” tool, but don’t use that field. WordPress fills it in automatically, but you should delete its contents.
Why Not to Use the Title Attribute
I had a sinking feeling about the title attribute for a while, but hadn’t seen anything definitive until I came across the aptly named “I thought title text improved accessibility. I was wrong.”:
So if you’ve been adding descriptive text into the title attribute, don’t. Blind users won’t hear it. It’s next to useless. This common misconception could lead to important information being completely inaccessible by the people who it’s intended for.
An article with even nittier-grittier details, “Using the HTML title attribute”, comes from the Paciello Group blog, an excellent source for web accessibility information.
The HTML title attribute is problematic. It is problematic because it is not well supported in some crucial respects, even though it has been with us for over 14 years. With the rise of touch screen interfaces, the usefulness of this attribute has decreased. The accessibility of the title attribute has fallen victim to a unfortunate combination of poor browser support, poor screen reader support and poor authoring practices.
As that quote suggests, the title attribute isn’t shown or read to users with screen readers, touch devices, or even twitchy mouse hands. That means if a title tooltip is required to explain a feature or link, a significant percentage of users will have a hard time using your site.
At other times, when people use bad title attributes (such as my redundant “Google” example), the tooltip provides no additional information but is irritating to those who can see it.
The title attribute is a lose-lose.
What To Do Instead of the Title Attribute?
Most of the time, title attributes are a crutch for an unclear interface or piece of writing.
Particularly for links like the second screenshot from above, well-written link text will not need a title attribute because it’s descriptive on its own. Remember the five attributes of a well-written label from the Nielsen Norman Group:2
WordPress users wanting to go the extra mile should check out the WP Accessibility plugin that adds a lot of accessibility features to WordPress including removing the title attributes from many parts of a site.
For those that want a really technical solution, I recommend reading up on the WCAG’s technique C7 for hiding descriptive anchor text.
A Relic of Times Past
The web changes fast and that means old best practices live on long past their prime. Just last week, I came across a really good WordPress developer recommending the use of title attributes. He could school me in PHP but didn’t know the problems of the title. So just because you can add it doesn’t mean you should!
The title attribute never really worked, and its effectiveness is decreasing rapidly. Do yourself and your visitors a favor and drop it!