Using the title Attribute

Monday, 4th September 2006

Author: Gez Lemon

Contents

• Conditional Content
• The title Attribute
• Access to all Content
• Programmatic Access
• Firefox Access to Element Properties
• Conclusion

Conditional Content

Some elements and attributes of the HTML specification are intended as conditional content, where conditional content is content that is made available to the user under certain circumstances. Probably the best known example of conditional content is the alt attribute for the img, area, and input elements (mandatory for img and area, and optional for input). The HTML specification offers the following advice for rendering alternate text provided with the alt attribute for images:

The alt attribute specifies alternate text that is rendered when the image cannot be displayed (see below for information on how to specify alternate text). User agents must render alternate text when they cannot support images, they cannot support a certain image type or when they are configured not to display images.

Other conditional elements and attributes also have details on how they should be conditionally rendered, such as the rules for rendering the object element.

[Back to the contents]

The title Attribute

The title attribute is used for supplementary information, and doesn't have detailed advice about how it should be made available to the user.

Values of the title attribute may be rendered by user agents in a variety of ways. For instance, visual browsers frequently display the title as a "tool tip" (a short message that appears when the pointing device pauses over an object). Audio user agents may speak the title information in a similar context. For example, setting the attribute on a link allows user agents (visual and non-visual) to tell users about the nature of the linked resource.

The specification mentions that the title attribute is frequently displayed as a tool tip, but neglects to mention that this kind of implementation has obvious accessibility implications with the way the mechanism currently works in major browsers. For example, the tool tip is revealed using a pointing device, which means people who are dependent on a keyboard cannot get to the information. The tool tip is typically displayed for a timed period, which means people with reading difficulties might not have time to read the text before it disappears. Unlike text in the content, tool tips cannot easily be resized for people with visual impairments that do not use assistive technology.

[Back to the contents]

Access to all Content

Guideline 2 of the User Agent Accessibility Guidelines (UAAG) requires that user agents ensure user access to all content. In particular, checkpoint 2.3 requires user agents render conditional content [priority 1] (checkpoint 2.9 suggests all conditional content is rendered automatically, priority 3):

1. Allow configuration to provide access to each piece of unrendered conditional content "C".
2. When a specification does not explain how to provide access to this content, do so as follows:
   • If C is a summary, title, alternative, description, or expansion of another piece of content D, provide access through at least one of the following mechanisms:
     • (1a) render C in place of D;
     • (2a) render C in addition to D;
     • (3a) provide access to C by allowing the user to query D. In this case, the user agent must also alert the user, on a per-element basis, to the existence of C (so that the user knows to query D); and
     • (4a) allow the user to follow a link to C from the context of D.
   • Otherwise, provide access to C through at least one of the following mechanisms:
     • (1b) render a placeholder for C, and allow the user to view the original author-supplied content associated with each placeholder;
     • (2b) provide access to C by query (e.g., allow the user to query an element for its attributes). In this case, the user agent must also alert the user, on a per-element basis, to the existence of C; and
     • (3b) allow the user to follow a link in context to C.

Current user agents vary considerably in how well they provide access to conditional content such as the title attribute, and although an option might be available to adhere to the guidance above, it might not be desirable. For example, JAWS can be configured to speak the title attribute on some elements, either temporarily or permanently. Unfortunately, the title attribute is used for keyword stuffing by some unscrupulous search engine strategists, and is also heavily misused by well-meaning people, resulting in a level of verbosity that no one would willingly sign up for; hence, very few JAWS users actually configure their user agent to speak the title text by default, but it's quite reasonable that a power user might query the title attribute if there was insufficient context to determine the purpose of the link. Window-Eyes also allows access to additional information, including the title attribute, using the keystroke, Ins+E.

[Back to the contents]

Programmatic Access

Users with a CSS enabled browser could use a user-defined style sheet with something like the following to render the content unconditionally.

*[title]:after
{
  content: ' (' attr(title) ')';
}

That would work in relatively standards aware browsers, such as Mozilla/Firefox and Opera, but wouldn't work in Internet Explorer (including IE7). Alternatively, a bookmarklet could be used to expose the text to include Internet Explorer, and even provide access to the abbr element, which isn't properly supported in Internet Explorer 6 and less (but will be supported in IE7). It would even be quite simple to provide a Greasemonkey script that allowed the supplementary information to be exposed on an element by element basis, including an indication that title text is present for the user to query.

All of the above techniques are great for providing this information to some users (which is better than none), but they're not good for the majority of users. These features need to be built into user agents in a consistent and obvious manner so that they empower people to be able to get the most out of their user agent.

[Back to the contents]

Firefox Access to Element Properties

Some user agents are slightly better at providing access to supplementary information than others. Mozilla/Firefox offers supplementary information through the Properties menu item from the context menu of the element in question. For example, suppose you have a web page with the following link:

<a href="page.html"
   title="Supplementary information">
link phrase
</a>

Right-clicking on the above link in Firefox will produce a context menu, from which you can choose the Properties menu item to reveal a dialog box containing information for the link. That's great for people using a mouse, but what about people whose mode of operation means they can only use a keyboard? Context menus can be opened with the keystroke Shift+F10; therefore, Shift+F10, followed by P opens a dialog that contains supplementary information about the anchor element. The following information can be accessed using this method, depending on what attributes have been set on the element.

The title attribute information is available from the miscellaneous section.

Firefox also makes this type of information available for other elements, but unless the element can receive focus, the information is not accessible to keyboard users. There is also no cue that the title attribute is set on an element, so a user might not have reason to query the information, although the user could always use a user-defined style sheet to highlight elements where the title attribute has been set.

[Back to the contents]

Conclusion

The title attribute on links is great for supplementary information, but shouldn't be considered a sufficient technique for imparting important information. Providing extra context using the title attribute is good usage, but it should not be considered sufficient for warnings or information the user should know before following the link; important information should be included in the link phrase.

[Back to the contents]

Category: Accessibility.