The attribute itself is meant to supply optional supplementary information. The most beneficial example is in conjunction with the abbr element, providing the knowing user with an expansion of an abbreviation. A second practical example is using it with forms to provide additional relevant information. (We also looked at using titles with form fields.)

But there are many examples of a title attribute being used to provide the same information that’s already available and accessible. The most common example is links, especially in navigation you see the following piece of markup:

<a href="/sitemap/" title="Visit our sitemap">Sitemap</a>

Here the title attribute is just a plain duplication of the link text. Sure, it may have two extra words of Visit our which don’t appear elsewhere, but this explains what a link does, and is just as redundant and irrelevant to site visitors. Most of them would need to have understood what a hypertext link is and what it does before even arriving at your site. Its just not necessary.

The extra text is a variant of the click here problem, it explains about how to activate a text link rather than succinctly describing the destination.

Some users have their screenreaders configured to read out both the link text and the title attribute. In this case, the above link would read out “Sitemap visit our sitemap”, and either prefix that with the word “Link”, or switch to a different voice to indicate the presence of a link. The duplication slows down the reading of the page, and is an unnecessary hiccup.

There is very little benefit to the title attribute in this code example. It is better, accessibility wise, to just drop the title attribute altogether in this instance.

Creating barriers for screen magnifiers

Screen magnifiers have the tendancy to make all title attributes appear when they have a titled element within the view of the magnifier. Any title, be it on a div, or a header, or a paragraph or a link, will appear in a tooltip like fashion. A significant use of titles may distract a screen magnifier user, even prevent them from seeing a particular piece of content because it has been obstructed by a tooltip.

There’s just no positive accessibility benefit to using a title attribute to duplicate existing content. The title attribute. when it offers no extra value, hinders more than it helps.

The difficulty comes when you need to add some supplementary information to an input field, or you need to provide a text equivalent to a non-text way of labelling a form field. Sometimes having one label per form field is a little messy, and can create accessibility problems when a visual requirement needs to be met.

The title attribute is mostly overlooked and underused. It is little known, but screenreaders read out the title attribute on form fields when in forms mode, even if titles are not read out by default. It’s an exception to the general configuration.

Multiple choice questions

Many surveys offer a list of multiple choice questions where the possible answers are the same for each question. This type of form is normally marked up in a tabular-looking fashion, where the question is a row header, and the possible answers are labeled by a column header.

Marking this up as a table may be the correct semantic way, but the implicit association is not available to a screenreader in forms mode. The only elements that are available in forms mode are form elements (and their attributes). Thus, a form with a tabular structure needs additional markup to make it accessible to screenreader users.

Multiple labels, one per form field

One downside of labels is that one label can only be associated with one input field, so it proves a challenge to markup such a form without resorting to duplicate labels which then need to be hidden from view (and creating a unique id to map each label to its corresponding input field).

Implying column and row headings

Hiding most of the form labels brings another problem to the fore. When column and row headers are used visually to label a field it is visually fairly obvious that a relationship applies horizontally or vertically. There’s a visual cue going on, and sighted people grok this cue almost immediately.

Unfortunately, this cue fails when the entire table cannot be seen in one go. People using screen magnifiers, or very large text sizes, only see a portion of this tabular form. They may not be able to make the visual connection because the column or row header may not be within the viewing region of the screen magnifier when the focus is on a particular form element. The further separated the form element is from its column and row headers, the more difficult it is for the screen magnifier user to figure out what information is being requested by the current form field. Scanning to find the column and row headers for a form field is prone to error, and makes the form more difficult to fill out.

Title attribute as a text equivalent

The overlooked title attribute provides a neat solution to this problem. Screenreaders will read out the title attribute on form elements in forms mode. Every form field with a title has a label that can explicitly identify a particular form field.

Screen magnifiers have the feature of displaying the title attribute when an element receives focus, so when a form field has focus, the title is presented as a tooltip adjacent to the form element. This alleviates the problem of the screen magnifier user scrolling around to determine the purpose of a form field.

Supplementary form field information

Another use of a form field title attribute is to provide supplementary information to a particular field. This can be, for example, a more descriptive variant of an existing label, a reminder that a field is mandatory, an example of a valid input (like the format of a date), or brief help text.

This supplementary information appears as a tooltip when that input field receives focus. This tooltip can be progressively enhanced, or stylistically improved, using JavaScript. The Content Management System Plone makes excellent use of the title attribute and JavaScript to present a visual cue for each for field on a form. This makes a form a little more usable, with very little cost, and that content is available to screenreader users too.

More accessible and usable forms

The title attribute offers an extra avenue for associating text to a form field. It should not be used as the first means of associating a label text with a corresponding form field. In situations where supplementary information is useful, the title attribute is helpful. In some situations where using labels results in masses of duplicated and redundant text that need to be hidden offscreen, it makes sense to use a title attribute instead. As with all accessibility problems, use the solution that best serves the needs of your visitors.