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.
5 Simples Ways to Make Your Site More Accessible | Blog Post
Building Accessibility into a Website from the Start | Blog Post