Techniques for WCAG 2.0

On this page:

-

# H33: Supplementing link text with the title attribute

## Applicability

HTML and XHTML

This technique relates to:

- Success Criterion 2.4.4 (Link Purpose (In Context))
  - How to Meet 2.4.4 (Link Purpose (In Context))
  - Understanding Success Criterion 2.4.4 (Link Purpose (In Context))
- Success Criterion 2.4.9 (Link Purpose (Link Only))
  - How to Meet 2.4.9 (Link Purpose (Link Only))
  - Understanding Success Criterion 2.4.9 (Link Purpose (Link Only))

## User Agent and Assistive Technology Support Notes

- Current user agents and assistive technology provide no feedback to the user when links have `title` attribute content available.

- Some graphical user agents will display a tool tip when the mouse hovers above an anchor element containing a `title` attribute. However, current user agents do not provide access to `title` attribute content via the keyboard.

- The tool tip in some common user agents disappears after a short period of time (approximately 5 seconds). This can cause difficulty accessing `title` attribute content for those users who can use a mouse but have fine motor skill impairment, and may result in difficulties for users who need more time to read the tool tip.

- Current graphical user agents do not provide mechanisms to control the presentation of `title` attribute content. The user cannot resize the tool tip text or control the foreground and background colors. The placement and location of the tool tip cannot be controlled by users, causing some screen magnifier users to be unable to access meaningful portions of the `title` attribute content because the tool tip cannot be fully displayed within the viewport.

- Some user agents allow access to supplementary information through the context menu. For example, the keystroke combination Shift+F10 followed by P will display the `title` attribute content, along with other supplementary information in Mozilla/Firefox.

- The HTML 4.01 specification explains that the text of the `alt` attribute is to be displayed when the element cannot be rendered normally. Thus, visual User Agents will display the `alt` attribute text when images are not displayed. The `title` attribute is meant to provide additional information. User Agents generally will display the `title` attribute text when the mouse is placed over the element containing the `title` attribute. Internet Explorer will display the `alt` text on mouse-over if there is no `title` text. The Firefox and Opera browsers only display the `title` text on mouse-over and do not use the `alt` attribute text for this purpose. Thus, if you want the `alt` attribute text visible on mouse-over, also include the text using the `title` attribute.

- Assistive technologies provide different levels of support for speaking title attributes. Some do not include features that allow users to access information provided via the title attribute.

- JAWS 7.0 and above will speak the value of title attributes depending upon a JAWS setting. This setting can be changed temporarily or permanently within JAWS.

- WindowEyes 5.5 and above has a hot key, ins-E, that will speak additional information, including the title attribute, for the item with focus.

- Implementing this technique with the `title` attribute is only sufficient if the `title` attribute is accessibility supported. The content of the `title` attribute needs to be available to all keyboard users (not only those with text-to-speech software) for this attribute to be accessibility supported.

## Description

The objective of this technique is to demonstrate how to use a `title` attribute on an anchor element to provide additional text describing a link. The `title` attribute is used to provide additional information to help clarify or further describe the purpose of a link. If the supplementary information provided through the `title` attribute is something the user should know before following the link, such as a warning, then it should be provided in the link text rather than in the `title` attribute.

Because of the extensive user agent limitations in supporting access to the title attribute, authors should use caution in applying this technique. For this reason, it is preferred that the author use technique C7: Using CSS to hide a portion of the link text (CSS) or H30: Providing link text that describes the purpose of a link for anchor elements (HTML) .

## Examples

### Example 1: Clarifying the purpose of a link

Example Code:

    <a href="http://example.com/WORLD/africa/kenya.elephants.ap/index.html"
       title="Read more about failed elephant evacuation">
       Evacuation Crumbles Under Jumbo load
    </a>

### Example 2: A link that opens in a new window

In HTML 4.01 the `target="_blank"` attribute can be used on an anchor element to indicate that the URI specified by the href attribute will be opened in a new window. This example shows using the `title` attribute of the anchor element to provide information that the link will be opened in a new window.

Example Code:

    <a href="http://example.com/subscribe.html"
         target="_blank"
         title="link opens in new window">
         Subscribe to email notifications about breaking news
    </a>

## Resources

No resources available for this technique.

## Related Techniques

- C7: Using CSS to hide a portion of the link text
- H30: Providing link text that describes the purpose of a link for anchor elements

## Tests

### Procedure

Examine the source code for anchor elements.

1. For each anchor element that has a `title` attribute, check that the `title` attribute together with the link text describes the purpose of the link.

### Expected Results

- Check #1 is true.

- Top
- Contents
- Intro
- Previous: Technique H32
- Next: Technique H34