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.
HTML and XHTML documents that contain links, (<a href> elements)
This technique relates to:
The objective of this technique is to describe the purpose of a link by providing
descriptive text as the content of the a element. The description lets a
user distinguish this link from other links in the Web page and helps the user determine
whether to follow the link. The URI of the destination is generally not sufficiently
descriptive.
When an image is the only content of a link, the text alternative for the image describes the unique function of the link.
When the content of a link contains both text and one or more images, if the text is sufficient to describe the purpose of the link, the images may have an empty text alternative. (See Using null alt text and no title attribute on img elements for images that assistive technology should ignore.) When the images convey information beyond the purpose of the link, they must also have appropriate alt text.
Describing the purpose of a link in HTML in the text content of the a
element.
Example Code:
<a href="routes.html">
Current routes at Boulders Climbing Gym
</a>Using the alt attribute for the img element to describe
the purpose of a graphical link.
Example Code:
<a href="routes.html">
<img src="topo.gif" alt="Current routes at Boulders Climbing Gym" />
</a> Using an empty alt attribute when the anchor (a) element contains text
that describes the purpose of the link in addition to the img element.
Note that the link text will appear on the page next to the image.
Example Code:
<a href="routes.html">
<img src="topo.gif" alt="" />
Current routes at Boulders Climbing Gym
</a>A site allows users to provide feedback on products, when the user is logged in, by clicking on the "Feedback" link in a product detail page. Other users or the product manufacturer are able to provide a response to any feedback. The feedback link displays an icon before the "Feedback" text when a response to the user's feedback is available. The help information describes this icon as a talking bubble containing quotation marks and includes the icon itself as an example. The icon's text alternative in the help text is "Response received icon". The same text alternative is used in the product detail pages (when a response is available) to allow identification of this icon through multiple modalities.
Example Code:
<a href="prod_123_feedback.htm">Feedback
<img src="response.gif" width="15" height="15" alt="Response received icon" /></a>A link contains text and an icon, and the icon provides additional information about the target.
Example Code:
<a href="WMFP.pdf">
Woodend Music Festival Program
<img src="pdficon.gif" alt="PDF format"/>
</a>The “MyCorp” company’s annual report is made available on the corporate website as a PDF file, and the annual corporate budget is made available as an Excel file on the web site.
Note: Many users prefer to know the file type when opening a file that results in opening a new application to view the file, so it is often regarded as useful to include this additional information. However, this is not required for compliance with this success criterion.
Example Code:
<p>
<a href=”2009mycorp_report.pdf”>MyCorp 2009 Annual Report (pdf)</a><br />
<a href=”2009mycorp_budget.xls”>MyCorp 2009 Annual Budget (Excel)</a>
</p>Using a link to wrap block level elements in HTML5.
Example Code:
<article>
<a href="news.html">
<h3>Budget Debate Continues in Parliament</h3>
<p class="subhead"><img class="alertimg" src="alerticon.png" alt="Breaking News" height="30" width="30">Members of Parliament continued vigorous debate on three challenging issues surrounding the upcoming year's budget.</p>
<p>Read more</p>
</a>
</article>This is shown in the working example of using a link to wrap block level elements.
Resources are for information purposes only, no endorsement implied.
For each link in the content that uses this technique:
Check that text or a text alternative for non-text content is included in the
a element
If an img element is the only content of the a element,
check that its text alternative describes the purpose of the link
If the a element contains one or more img element(s)
and the text alternative of the img element(s) is empty, check that
the text of the link describes the purpose of the link
If the a element only contains text, check that the text describes
the purpose of the link
The above checks 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.