Techniques/HTML/Combining adjacent image and text links for the same resource
- Updated in response to Responses to public comments 11th March 2014, Issue LC-2880
- Surveyed May 12, 2014, accepted as amended. Ready for publication.
HTML4, HTML5 and XHTML documents that contain links.
This technique relates to:
- Success Criterion 1.1.1 (Non-text Content)
- Success Criterion 2.4.4 (Link Purpose (In Context))
- Success Criterion 2.4.9 (Link Purpose (Link Only))
This objective of this technique is to provide both text and iconic representations of links without making the web page more confusing or difficult for keyboard users or assistive technology users. Since different users finding text and icons more usable, providing both can improve the accessibility of the link.
Many links have both a text and iconic representation adjacent to each other, but rendered in separate <a> elements. Visually they appear to be a single link, but many users encounter them as adjacent identical links. For a keyboard user, it is tedious to navigate through redundant links. For users of assistive technologies, it can be confusing to encounter successive identical links. When the text alternative for the icon is a duplicate of the link text, it is repetitive as screen readers read the description twice.
If the author omitted alternative text from the link image, it would fail Success Criterion 1.1.1 because the text alternative would not serve the same purpose as the graphical link.
This technique provides such links by putting the text and image together in one <a> element and providing null alternative text on the image to eliminate duplication of text. In this way, both representations of the link are provided, but keyboard users only encounter one link and assistive technology that provides users with link lists for a web page do not include duplicate links.
Sometimes such text and the icon link are rendered in separate, adjacent table cells to facilitate page layout. Although WCAG 2 does not prohibit the use of layout tables, CSS-based layouts are recommended in order to retain the defined semantic meaning of the HTML table elements and to conform to the coding practice of separating presentation from content. If CSS is used, this technique can be applied to combine the links.
The icon and text are contained in the same a element.
Example Code - HTML4 / HTML5:
<a href="products.html"> <img src="icon.gif" alt=""> Products page </a>
A link contains an icon and text, and the site help refers to the icon. The img has a text alternative which is the name used for the icon in the site help, which describes clicking the home page icon.
Example Code (HTML4 / HTML5):
<a href="foo.htm"> <img src="house.gif" alt="home page icon"> Go to the home page </a>
Resources are for information purposes only, no endorsement implied.
- G91: Providing link text that describes the purpose of a link
- G94: Providing short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content
- H30: Providing link text that describes the purpose of a link for anchor elements
- C9: Using CSS to include decorative images
- 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
For each <a> element applying this technique:
- Check that the <a> element contains text that describes the target of the link
- Check that the <a> element contains an img element that has a null alt attribute, that is alt="", or text that supplements the link text and describes the image
- All checks above are true.
If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.