The title attribute is intended to provide supplementary information about an element; for example, it might be used to provide extra information about the target of a link. Although the User Agent Accessibility Guidelines (UAAG) requires access to all content, current user agents provide very poor access to title text information, and what access they do provide is typically inaccessible for people with disabilities.

Author: Gez Lemon


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.

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.

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.

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.

  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.

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

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.

Anchor Element Properties
Property Attribute Description
Address href The URI of the target provided by the href attribute.
Will open in target The target attribute is deprecated from the HTML 4.01 Transitional Doctype, and deleted in the Strict Doctype. If the attribute value is _blank, the value is New window. If no target attribute is specified, or if the window is opened using client-side scripting, the value of this property will be, Same window.
Target type type The content type of the target. For example, text/html, image/gif, etc.
Target language hreflang The language of the target.
Relation rel The relationship the target document has in relation to the source document. For example, Contents, Index, Glossary, or other link types.
Reversed relation rev The relationship the source document has in relation to the target document. For example, Contents, Index, Glossary, or other link types.

The title attribute information is available from the miscellaneous section.

Miscellaneous Anchor Element Properties
Property Attribute Description
Text language lang The language specified with the lang attribute, or the language inherited from the nearest ancestor where the language has been set.
Title title The value specified for the title attribute.

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.


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.

Category: Accessibility.


  1. [using-title-attribute.php#comment1]

    It seems the title attribute is the complaint of the month. There is a big hoo-rah going on in one forum over Moz's six year old bug related to the title text not being allowed to be long enough to publish one's disertation. Another complains that it is displayed in a single line, while quoting W3 that cdata should render entities such as &#10; and conveniently forgetting the same rule states that carriage returns should be ignored and line-feeds collapsed to a space (or it it vice versa?).

    I believe I'll take your suggestion to heart and go with helpful and supplemental, but not necessary for functionality, though I might get on the bandwagon for extending the time the tooltip shows 'til I move the cursor.



    Posted by gary turner on

  2. [using-title-attribute.php#comment2]

    Lousy implementation of a feature that's been legal forever is no reason not to use the feature. Make Jaws [written in lower case by the author, autoconverted to upper case by the comment system] clean up its act, not authors. The ghost of Steve Faulkner (another Pacielloist) haunts us still.

    Posted by Joe Clark on

  3. [using-title-attribute.php#comment3]

    Lousy implementation of a feature that's been legal forever is no reason not to use the feature.

    I'm not suggesting the title attribute shouldn't be used - in fact, I'm suggesting the opposite. I'm encouraging its use for supplemental information rather than important information the user should be aware of. Regardless of how well the attribute is implemented, it could never be implemented well enough for it to be sufficient for important information without it becoming invasive for people that didn't want it; if everyone wants the information, then it should be in the content, should it not?

    The ghost of Steve Faulkner (another Pacielloist) haunts us still

    As fascinating as your little tiff with Steve might be to you, it's of absolutely no interest to me. The message presented in this post isn't the same message you quibbled over with Steve.

    Posted by Gez on

  4. [using-title-attribute.php#comment5]

    Another excellent article, Gez. I like your approach on your site quite a bit wherein instead of using and relying on the title attribute to deliver conditional content, which as you noted has significant flaws, you instead place the relevant content in the link text itself. Smart, and it's also the most accessible method. Often there is a lot of title attribute abuse and even worse, exaggerated styling which I personally dislike. I recently published an article which addresses this called, "Site Features Overload".

    As an aside, when checking the link properties in this article (with FireFox), I noticed one I didn't see mentioned: The links within your table also provide the user with the table summary.


    Posted by Mike Cherim on

  5. [using-title-attribute.php#comment6]

    As an aside, when checking the link properties in this article (with FireFox), I noticed one I didn't see mentioned: The links within your table also provide the user with the table summary.

    Good catch, Mike. Firefox is particularly good at providing contextual information, and the list I provided is literally just from the anchor element itself. The container of the link will also provide supplementary information where it can.

    Posted by Gez on

  6. [using-title-attribute.php#comment7]

    Oh, Gez, really. Where *is* that effervescent British wit we know and love? I was of course being *ironical* about our friend Steve Faulkner, who is the only one who had a "tiff." I'm a JPEG man all the way, as I think will be widely known.

    Posted by Joe Clark on

  7. [using-title-attribute.php#comment8]

    I was of course being *ironical* about our friend Steve Faulkner

    Ah, sorry - it was lost on me. I apologise for the grumpy response.

    Posted by Gez on

Comments are closed for this entry.