Techniques for WCAG 2.0

On this page:

-

# G196: Using a text alternative on one item within a group of images that describes all items in the group

## Applicability

Any technology where a grouping of non-text content is used to present information or functionality.

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)

## Description

The objective of this technique is to avoid unnecessary duplication that occurs when a grouping of adjacent non-text content is used to present information or functionality.

In some cases, pages will present a group of images to convey information. When presented together or in a specific combination these groupings can convey different types of information. For example, two images of a star where one is presented in black and white and the other is colored can be used in combination to represent a user rating. For example, three filled stars followed by two unfilled stars might represent a rating of three out of five stars.

To use this technique, an author provides a text alternative that serves the equivalent purpose for the entire group and associates it with one item in the group. The other items in the group are then marked in a way that can be ignored by assistive technologies. In this way, the user is able to more efficiently identify the purpose of the group and can avoid duplication or confusion that may result had a text alternative been provided for each item in the group.

## Examples

### Example 1: A rating system in HTML

In the following example, a rating is shown as three filled stars and two empty stars. While a text alternative could have been provided for each of the five images, the author has instead provided the rating in the form "3 out of 5 stars" for the first image and has marked the others using null alt text.

Example Code:

    <p>Rating:
       <img src="star1" alt="3 out of 5 stars">
       <img src="star1" alt="">
       <img src="star1" alt="">
       <img src="star2" alt="">
       <img src="star2" alt="">
      </p>

### Example 2: A button created from a group of images in XHTML

In this example, each button has a set of images to indicate the level of conformance to WCAG being claimed. This approach makes it possible for assistive technologies to avoid announcing things like, "Image A, Image A, Image A" etc.

Example Code:

    <p>Conformance Level:</p>
     <button name="A"><img src="a.png" alt="A" /></button> <br />
     <button name="AA"><img src="a.png" alt="AA" /><img src="a.png" alt="" /></button> <br />
     <button name="AAA"><img src="a.png" alt="AAA" /><img src="a.png" alt="" /><img src="a.png" alt="" /></button>

## Related Techniques

- G94: Providing short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content
- H2: Combining adjacent image and text links for the same resource
- H67: Using null alt text and no title attribute on img elements for images that AT should ignore

## Tests

### Procedure

1. Check that one item in the group includes a text alternative that serves the equivalent purpose for the entire group.

2. Check that the other items in the group are marked in a way that can be ignored by assistive technologies.

3. Check that the items marked in a way that can be ignored by assistive technologies are adjacent to the item that contains the text alternative for the group.

### Expected Results

- All of the above checks are true.

- Top
- Contents
- Intro
- Previous: Technique G195
- Next: Technique G197