I’ve been having a lot of discussions lately on when title attributes should and shouldn’t be used.
There has been a lot of misuse and misapplications of this attribute, which creates confusion amongst developers and project teams.
In order to provide some clarity, I’ll outline the purpose of the title attribute and discuss when it is appropriate to use the attribute and when it shouldn’t be used.
What is a title attribute?
Title attribute provides additional information about an element within a web page. It often appears as a tooltip text over an element such as texts or fields.
Usage
Title attributes can be great to allow developers the flexibility to be practical and accessible at the same time. However, If used incorrectly, it can create frustration for all users.
Here is a quick list of how attributes can be used:
1. Hyperlinks
This is one of the most misunderstood usages of the title attribute.
I’ve seen title attributes on hyperlinks in two forms:
- Title attribute repeats the same words as the link itself.
- When words in a link is not sufficiently descriptive it provides additional information.
In regards to the first scenario, the title attribute is providing redundant information as it is only repeating the same text as the link itself. There is no reason why in this case the attribute should be used and therefore should be avoided at all cost.
As for the second scenario, WCAG (Web Content Accessibility Guidelines) states that hyperlinks should be descriptive in order to give users an idea of the destination of the link.
This is even more pertinent for users with visual impairments, who use screen readers to navigate through a site. The screen reader would relay the information presented on the screen (including links) to users. In most cases visually impaired users (such as users who are blind) tab through web pages. If any links are not descriptive this would create confusion for the user.
WCAG 2.0 also refers to the context of the link being sufficient for users with visual impairments. Therefore, even if a link is not descriptive then the context can be used to associate the purpose and destination to that link.
Checkpoint 2.44 of WCAG 2.0 guidelines states:
“The purpose of each link can be determined from the link text alone or from the link text together with its programmatically determined link context…”
Taking in to account the above information, links should in most cases not require a title attribute.
2. Images
All images should have alt attribute (whether null or descriptive), which is quite different to a title attribute. There is some confusion between the two as they both provide a tooltip display.
The general principle is that alt attributes are required on images. Alt attribute provides alternative text (as the name suggests) whilst the title attribute provides additional information.
It is possible to have both an alt attribute and a title attribute on an image however title attribute should never replace an alt attribute. The reason for this is that some screen readers often don’t read title attribute unless the setting are changed. If the settings were changed then the screen reader would read the title attribute at the expense of the alt attribute. As the alt attribute is required, and the title attribute is optional, few users would choose to hear the title rather than the alt.
3. Fields
Another area where title attributes are used a lot is on form fields. Often, form fields are presented with the same title attribute as the field label. In many cases this is not required as form fields if associated correctly with label tags should be sufficient for screen readers to associate labels to fields.
There are however instances where the use of title attributes are useful. For example, in cases where labels cannot be associated to an input due to space constraints or design. In these instances field elements such as checkboxes, and fields can and should have a title attribute, which specifies the missing label. In this case the title attribute provides essential information, which is a requirement for users with disabilities in order to understand the purpose of a form elements.
4. Acronyms and abbreviations
A valid and useful use of the title attribute is to use it with the abbr and the acronym tags. The user is provided additional information to an abbreviation that may not be obvious from reading the copy on the page.
I’ve personally used this on CO2 (Carbon Dioxide) in the context of CO2 emissions – It is a really useful way of proving additional information without taking much space.
Conclusion
The title attribute is like a jar of spice mix: It doesn’t go well with everything and should be used sparingly!
However when it is used properly, it is a very useful and a powerful tool in providing additional information, which provides guidance and context to users.
Nural Ali 