Ensure That Links With the Same Accessible Name Serve a Similar Purpose
Blind
Hearing
WCAG 2.1 Level AAA
Web accessibility guidelines state that links with the same accessible name should serve a similar purpose.
By following this rule, it helps users understand the purpose of each link in the content, so they can decide whether they want to follow it.
To prevent confusion among users, identical links must describe the same purpose.
This fix ensures users can decide whether they want to follow a link.
The following examples are preceded by a link to the technique reference page of origination:
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>
Copy
Describing the purpose of a link in HTML in the text content of the element:
Providing link text that describes the purpose of a link for anchor elements:
Example 1: Describing the purpose of a link in HTML in the text content of the a element.
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>
Copy
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>
Copy
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>
Copy
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>
Copy
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>
Copy
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>
Copy
For more examples, visit W3C’s GitHub’s ATC Rules library.