Skip to content

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

About this Technique

This technique relates to 1.1.1: Non-text Content (Sufficient).

This technique applies to any technology where a grouping of non-text content is used to present information or functionality.

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.

<p>Rating: 
  <img src="star-filled" alt="3 out of 5 stars">
  <img src="star-filled" alt="">
  <img src="star-filled" alt="">
  <img src="star-empty" alt="">
  <img src="star-empty" alt="">
</p>

Example 2: Buttons created with groups of images in HTML

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.

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

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.
Back to Top