Ensure that links with the same accessible name serve a similar purpose

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.

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