Don't Rely on the Title Attribute for Accessibility
What is the Title Attribute?
The title attribute is often used to give additional information about an element. Content editors will find a field for it when they add a link or an image to the WYSIWYG. The CKEditor WYSIWYG calls it the “Advisory Title” under the Advanced tab of the Link and Image Properties modals:
The resulting HTML puts an attribute on the element called title with the value set to whatever was entered into the text field. The HTML will look like this for links:
<a href=”somepage.html” title=”Additional info”>Some text</a>
Or like this on an image:
<img src=”my-favorite-puppy.jpg” title=”Photo by the cat” alt=”CJ, the Pomeranian puppy, sleeping in an awkward position”>
In most browsers, the “Additional info” text and “Photo by the cat” text will pop up as a tooltip when hovering over the element with a mouse.
These are valid uses of the title attribute from a technical standpoint. The title attribute is, after all, a global attribute and can be used on any HTML element. And we are providing complementary information. And, you might say, the tooltip might be helpful. So why not use it? There are a few issues around accessibility that should be taken into account.
Why not use the title attribute?
- Someone who uses a keyboard to navigate websites, such as a person who lacks the fine motor control required by a mouse, will never see your title attributes because they have no way to hover over elements.
- A person who uses a screen reader because they are blind or have low vision will likely never have the title attribute read to them. Some screen readers don’t support the title attribute and those that do, don’t read the title attribute by default. It requires changing a setting for the title to be read, which not all users do.
Touchscreen devices such as phones and tablets don’t support title attributes which creates an accessibility issue for everyone and not just those with a disability.
What not to do?
First of all, don’t rely on the title attribute to convey important information. For instance, if you need to alert a user to something that will happen when clicking on a link, that information should go in the link text, not a title attribute.
Next, don’t use it to duplicate text from elsewhere. If an image’s alt attribute already describes what needs to be described, don’t put it in the title attribute too. For those people that do have the title enabled in their assistive technology, it’s an annoyance to have to listen to the same thing twice.
What to do?
In general, use of the title attribute is discouraged...with one exception. You should ALWAYS provide a title attribute for frame elements. This is supported in screen readers.
If you find yourself in a situation where you do need to provide complementary text, because of design constraints for instance, it’s better to either revise your link text when possible or use CSS to hide a portion of the link text.
<a href=”road-less-traveled.html”>Read more <span class=”element-invisible”> about The Road Not Taken, a poem by Robert Frost</span></a>
And if you really, really, really [insert temper tantrum here] need the title attribute for some reason, consider putting the text in a data-* attribute instead (i.e. data-title).
Wait. Isn’t the Title Attribute Good for SEO?
By every account I’ve read, no. Not on the actual page where it resides, anyway. Since the title attribute can be used on every html element, it would be a great way to do some serious keyword stuffing so it would make sense that the search engines would ignore it. You’re much better off putting your keywords in the link text than the title attribute. (Disclaimer: I am not an SEO expert. If you have evidence to the contrary, please add a comment!)
The title attribute provides little if any benefit at best and can be annoying or confusing to some users at worst. Avoid using it unless absolutely necessary...except for frame elements where it’s required.