Saturday April 7th, 2012 in Design Theory
The title attribute, according to the Somewhat Long Winded HTML 5 Specification, is an additive description or explanation that informs the user of more details regarding the element it's assigned to:
The title attribute represents advisory information for the element, such as would be appropriate for a tooltip. On a link, this could be the title or a description of the target resource; on an image, it could be the image credit or a description of the image; on a paragraph, it could be a footnote or commentary on the text; on a citation, it could be further information about the source; and so forth. The value is text.
This means the title attribute should be assigned to elements that might need some further explanation or details. Unfortunately there's a few flaws with the title attribute that make its use pointless and we're going to go into them.
Links and Accessability
It's very common to see a title attribute applied to a link in the following manner:
And this is the first problem with the title attribute. More often than not the title attribute repeats information already in the link text. The link text should be all the information a user needs to understand the purpose of that link being there. There should not be a need to expand on the contents of the link. If you put a screen reader over this link the title attribute wouldn't provide any additional information. If anything it will actually confuse the user.
Most screen readers let the user change which part of a link will be read; the link, the title, the longer of the two or both. In all cases either no additional information will be provided or it will actually confuse the user. Either the link, title attribute or longer of the two being read will produce the same results and in the final example the user will hear "About my Grape Vines Read about my Grape Vines".
From a user's point of view this is frustrating. The average user won't know what a title attribute is so they're unlikely to tell their screen reader to read them as the default. So in the case of screen readers the title attribute either does nothing or actually makes things hard to listen to.
Okay, so the title attribute is poorly used in our example but this is how the attribute is used on most websites.
If a user with poor sight visits your website they're likely to use a screen magnifier. In the event the user zooms in and hovers over an element with a title attribute assigned the title attribute will also be magnified. This will make the tooltip potentially cover a lot of the window, sometimes entirely. The tooltip won't disappear because the user struggles to find somewhere that isn't covered by the tooltip to make it vanish. Though extreme this example is still worth thinking about.
Links and Optimisation
There is no substantial evidence that any search engines use the title tag to determine the contents of a link. There's also no substantial evidence that search engines even take notice of it. You'd be right to say that's not a good enough reason to dismiss the title attribute altogether. However the contents of a link's text is well documented by all search engines as being the method of ranking and categorising pages. It'd be silly to focus on doing your optimisation in title attributes, with no evidence it makes any difference, over doing your optimisation with link text.
Sometimes people assume the title tag acts the same as link text:
In this example, which is quite common, the developer is presuming the title attribute will be read and acknowledged by search engines and used in a similar manner to link text to index their links. This is not the case - whilst there is no substantial evidence that search engines ignore title attributes there is plenty of evidence that proves search engines do use link text. Neglecting to use appropriate link text, even with an informative title attribute, will result in poorly indexed and ranked pages.
In the above example the correct approach would be to remove the title attribute altogether and put "Read about my Grape Vines" as the link text instead. Link texts such as 'Click Here' and 'Visit my Site' should be avoided altogether.
Keyword bloating is the practise of cramming keywords into pages to try and raise the ranking for those words. A lot of search engines, including powerhouses like Google and Bing, look down on this practise and have been known to penalise the ranking of pages because of it. By repeating keywords in title attributes that are already present in your link text you're running the risk of bloating your page with those keywords.
There really is no reason to repeat link text as a title attribute; for disabled users we've explained above and for search engines we've just covered. But what about regular users?
Users and Titles
Title attributes are pointless for regular users. Let's think for a moment what you do when you browse a webpage. Do you hover the mouse cursor over links or images to see if any title attributes appear? Even developers don't which means it's quite likely regular users won't either. So whilst the title attribute can be used to inform the user of additional information it's unlikely to do so because they're not going to keep their mouse cursor stationary long enough for them to display.
Sometimes the cursor may rest on a link or image with a title attribute on and, without clicking a button, some additional content has interactively displayed. Doesn't seem like a big deal, right? Wrong. Users hate this! The mental trend when browsing a page is things should only move or change when users press a button. By displaying information without clicking a button users will grow unhappy browsing your pages. It's the same concept behind hover menus being poor choices for navigation. Without knowing the menu is going to display when they hover the sudden arrival of the menu is distracting and irritating.
In our search for supreme optimisation we sometimes forget about users. It's important to make them happy as well as search engines because all search engines do is forward users to you!
Titles on Images
The title attribute should never be used on images. Search engines use the alt attribute to rank and categorise images and screen readers read the alt attributes. Using titles instead of alts will stop your pages being indexed in image searches and be ignored by screen readers.
The title attribute is superfluous and ultimately pointless, as its intention to provide additional information is content that, for search engines and users, should be displayed already. You should not be relying on the title attribute to keep your users informed of your site and its content and you definitely shouldn't be relying on title attributes to help your pages get indexed.
Comments and retorts are always welcome, you can leave your comments below.