The TITLE attribute is just one of the issues on which website owners do not seem to see eye to eye. Are there valid reasons for using the TITLE attribute or should we simply ignore it?
What The Experts Say
Let’s start the discussion off with a look at what WebAim has to say about the issue:
The title attribute, by definition, can be used to provide advisory information. It should:
- NOT provide vital information or information necessary for accessibility.
- NOT provide the same information as is available in text or alternative text.
- NOT present the obvious. If the advisory title does not provide additional, useful information, it can be removed.
- BE used carefully on small links and navigation items because the title tooltip may cover the underlying item.
- NOT be used as a replacement for alternative text, form labels, table headers, etc.
- ALWAYS be used on the frame element (e.g.,)
The title attribute is not read for most elements by default in most screen readers. Exceptions are the frame element and form elements that do not have a label. When a form element does not have a label but does have a title, the title will typically be read. This approach, however, is often a misuse of title – if the title attribute is necessary to ensure accessibility of the form element, then it certainly contains more than simply advisory information. A better approach is to insert an associated form label, and if necessary, that label can be hidden with CSS. WebAim
If you read this lot it is obvious that the TITLE attribute does not have much going for it. If you add the accessibility-ready tag to your WordPress theme one of the recommended accessibility requirements reads:
While the title attribute is occasionally of value, it is never of value if the attribute’s text is the same as the visible text. This is a common issue with post titles and permalinks. Remove extraneous title attributes.
It looks as if the woes of the TITLE attribute continues.
Another item that we need to note is that the Accessibility Guru, Joe Dolson, strips all title attributes from images inserted into content in his well-known plugin WP Accessibility.
Just what are these experts telling us?
Why We Should Be Wary Of Using The Title Attribute
- Someone (like me) who uses the keyboard to navigate websites will never get to see anything added to the TITLE attributes as one cannot hover with the keyboard.
- Mobile devices (albeit tablets or phones) do not support TITLE attributes at all.
- Not all screen readers support TITLE attributes. Those that do offer this feature do not have the feature turned on by default. Most screen reader users do not even know that they can turn this feature on.
- In the screen reader JAWS there is an option that allows the reader to read the TITLE attribute instead of the normal anchor text, but as mentioned earlier it’s not enabled by default. JAWS will read the TITLE attribute if there is no link anchor text but this should never happen. If you have an image link the reader will read the alt attribute of the image and not the TITLE attribute.
What Not To Do With The Title Attribute
- Do not convey important information via the TITLE attribute. There might be times you need to add a bit of information to a link but then you should add this information to the link text, not the TITLE attribute.
- Never use the TITLE attribute to duplicate text that already appears elsewhere, e.g. do not repeat the information in the alt attribute in the TITLE attribute. If a screen reader user has turned on support for TITLE attributes he/she will hear the same thing twice.
- Do not use the TITLE attribute to stuff keywords all over the content. I am sure the search engines ignore this type of behaviour anyway.
- Do not use the TITLE attribute to solve the problem of weak link text like “read more” and “click here”. There are other ways of solving the problem like adding extended information to the link text and then either showing the information or hiding it via CSS.
What We Should Do With The Title Attribute
- A TITLE attribute is absolutely required for frame elements. Screen readers do support this.
WebAxe commented on this article and left a reference to a post by Steve Faulkner (My thanks for the heads-up). According to this article there are two further instances in which we could consider using the TITLE attribute. For the sake of completeness I am showing these two instances here:
- Providing a programmatically associated label for a control in situations where a visible text label would be redundant e.g. in a search form, and also labelling controls in data tables.
- The title on the abbr element is well supported by screen reader software, but its use is still problematic, as other user groups cannot access the expansion. It is recommended that the expanded form of an abbreviation is provided in plain text when it is first used in a document, and/or a glossary of terms that provides the expanded form is provided. This is not to suggest that that the expansion should not be provided using the title attribute, only that due to its limitations, an expansion in plain text should also be provided.
Sorry Mr. TITLE attribute, in the future we will think twice before we use you.
Thanks for visiting, you are welcome to continue the discussion in the comments.