Links with the same name have a similar purpose

This rule is important because the intention is to to help users understand the purpose of each link in the content, so they can decide whether they want to follow it. Best practice is that links with the same destination would have the same descriptions, but links with different purposes and destinations would have different descriptions (see also Success Criterion 3.2.4 which calls for consistency in identifying components that have the same functionality). Because the purpose of a link can be identified from its link text, links can be understood when they are out of context, such as when the user agent provides a list of all the links on a page.

Fixing the problem

Identical links must describe the same purpose in order to prevent user confusion. The description lets a user distinguish any one link from links in the Web page that lead to other destinations and helps the user determine whether to follow the link. The URI of the destination is generally not sufficiently descriptive.

The intent of this Success Criterion is to help users understand the purpose of each link in the content, so they can decide whether they want to follow it.

Markup Examples that work

The following examples are preceded by a link to the technique reference page of origination:

Using aria-label for link purpose

Example: Describing the purpose of a link in HTML using aria-label:

<h4>Neighborhood News</h4>
<p>Seminole tax hike:  Seminole city managers are proposing a 75% increase in  property taxes for the coming fiscal year.
<a href="taxhike.html" aria-label="Read more about Seminole tax hike">[Read more...]</a>
</p>
<p>Baby Mayor:  Seminole voters elect the city's youngest mayor ever by voting in 3 year  old Willy "Dusty" Williams in yesterday's mayoral election.
<a href="babymayor.html" aria-label="Read more about Seminole's new baby mayor">[Read more...]</a>
</p>

Providing link text that describes the purpose of a link

Describing the purpose of a link in HTML in the text content of the a element:

<a href="routes.html">Current routes at Boulders Climbing Gym</a>

Providing link text that describes the purpose of a link for anchor elements

Examples

Example 1: Describing the purpose of a link in HTML in the text content of the a element.

<a href="routes.html">  Current routes at Boulders Climbing Gym
</a>

Example 2: Using the alt attribute for the img element to describe the purpose of a graphical link.

<a href="routes.html">
<img src="topo.gif" alt="Current routes at Boulders Climbing Gym" />
</a>

Example 3: 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.

<a href="routes.html">
<img src="topo.gif" alt="" />  Current routes at Boulders Climbing Gym
</a>

Example 4: 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.

<a href="prod_123_feedback.htm">Feedback
<img src="response.gif" width="15" height="15" alt="Response received icon" /></a>

Example 5: A link contains text and an icon, and the icon provides additional information about the target.

<a href="WMFP.pdf">  Woodend Music Festival Program
<img src="pdficon.gif" alt="PDF format"/>
</a>

Example 6: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.

<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>

Example 7: Using a link to wrap block level elements in HTML5.

<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>