Techniques for WCAG 2.0

Skip to Content (Press Enter)

-

F89: Failure of Success Criteria 2.4.4, 2.4.9 and 4.1.2 due to using null alt on an image where the image is the only content in a link

Important Information about Techniques

See Understanding Techniques for WCAG Success Criteria for important information about the usage of these informative techniques and how they relate to the normative WCAG 2.0 success criteria. The Applicability section explains the scope of the technique, and the presence of techniques for a specific technology does not imply that the technology can be used in all situations to create content that meets WCAG 2.0.

Applicability

Content that contains links.

This failure relates to:

Description

This failure condition occurs when a link contains only non-text content, such as an image, and that link cannot be identified by an accessible name. The accessible name for a link is defined according to the Accessible Name Calculation.

This also applies when both text and images are used separately on a page to link to the same target. In this case success technique H2: Combining adjacent image and text links for the same resource (HTML) is the recommended approach to reduce the number of separate links and the undesirable redundancy.

Examples

Failure Example 1: HTML Search Results

A search site returns search results that include both a text link and an image link to the match site. The image has a null alt attribute, since the result already contains a link with a text description. However, the screen reader does not ignore the image link but uses heuristics to find some text that might describe the purpose of the link. For example, the screen reader might announce, "football dot gif Football Scorecard."

Example Code:

 <a href="scores.html">
   <img src="football.gif" alt="" />
 </a>
 <a href="scores.html">
   Football Scoreboard
 </a>
}

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure

  1. Check whether the link contains only non-text content.

  2. Check whether the non-text content has been implemented in a way that it can be ignored by assistive technologies, such as using role="presentation" or alt="" .

  3. Check that the link does not have an accessible name provided in another way such as aria-label or aria-labelledby.

Expected Results