Techniques for WCAG 2.0

On this page:

-

# H24: Providing text alternatives for the `area` elements of image maps

## Applicability

HTML and XHTML Documents that contain `area` elements.

This technique relates to:

- Success Criterion 1.1.1 (Non-text Content)
  - How to Meet 1.1.1 (Non-text Content)
  - Understanding Success Criterion 1.1.1 (Non-text Content)
- 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

The HTML 4.01 specification explains that the text of the `alt` attribute is to be displayed when the element cannot be rendered normally. User Agents will display the `alt` attribute text when images are not displayed. However, currently, visual User Agents do not display the alt attribute text for area elements of image maps when accessed by keyboard or when images are not displayed, and may clip the area elements if the intrinsic size of the image is not used. In addition, the display of alt attribute text in response to mouse-hover does not display in the font size or color combination set in the User Agent.

The `title` attribute is meant to provide additional information. However, current implementation in User Agents is access to either the title or alt attribute, but not both. User Agents generally will display the `title` attribute text when the mouse is placed over the element containing the `title` attribute. For example, Internet Explorer will display the `alt` text on mouse-over if there is no `title` text, Firefox and Opera only display the `title` text on mouse-over and do not use the `alt` attribute text for this purpose. Thus, to ensure the alt attribute text is visible on mouse-over, the same text should be used on the title attribute.

Therefore, when using image maps, successful implementation of this technique would require either:

- Ensuring the area element alt attribute value is displayed in response to attaining focus (including keyboard focus), and that this applies both to situations where images are loaded and not loaded. OR

- A redundant mechanism serving the same purpose as the area elements is present in the Web Page.

## Description

The objective of this technique is to provide text alternatives that serve the same purpose as the selectable regions of an image map. An image map is an image divided into selectable regions defined by `area` elements. Each area is a link to another Web page or another part of the current Web page. The `alt` attribute of each `area` element serves the same purpose as the selectable area of the image.

## Examples

### Example 1

This example uses the `alt` attribute of the `area` element to provide text that describes the purpose of the image map areas.

Example Code:

    <img src="welcome.gif" usemap="#map1"
        alt="Areas in the library. Select an area for
    more information on that area." />
    <map id="map1" name="map1">
      <area shape="rect" coords="0,0,30,30"
        href="reference.html" alt="Reference" />
      <area shape="rect" coords="34,34,100,100"
        href="media.html" alt="Audio visual lab" />
    </map>

## Resources

Resources are for information purposes only, no endorsement implied.

- HTML 4.01 client-side image maps

- HTML 4.01 - how to specify alt text

## Related Techniques

- G91: Providing link text that describes the purpose of a link
- H30: Providing link text that describes the purpose of a link for anchor elements

## Tests

### Procedure

For each `area` element in an image map:

1. Check that the `area` element has an `alt` attribute.

2. Check that the text alternative specified by the alt attribute serves the same purpose as the part of image map image referenced by the `area` element of the imagemap.

### Expected Results

- The above checks are true.

- Top
- Contents
- Intro
- Previous: Technique H4
- Next: Technique H25