Redundant hyperlinks are a common accessibility issue. They’re also a potential violation of the Americans with Disabilities Act (ADA): In Robles v. Dominos Pizza, LLC, the plaintiff cited redundant links as one of the accessibility barriers he allegedly encountered on the pizza chain’s website. While we’re not aware of any ADA lawsuits in which redundant links were the only cited problem, they’re not great for the user experience.
A link is redundant if it’s next to another hyperlink that leads to the same address. This often occurs when websites use images that act as hyperlinks alongside text that also acts as hyperlink.
Fortunately, this is an easy issue to identify, and in most cases, it’s easy to fix. Here’s what you need to know.
Let’s say your website has a shopping cart icon that appears alongside this text: “Shop Here.” Both of those elements have hyperlinks that lead to your shopping portal — visually, you’re providing users with a single link. The code might look like this:
<a href="shop.html">
<img src="shoppingcart.gif" alt="shop here">
</a>
<a href="shop.html">
Shop Here
</a>
So, why is this a problem? People who navigate with a keyboard will need to navigate through both elements to move past the hyperlink. Screen reader users may hear the hyperlink announced twice (once for the icon hyperlink and a second time for the text).
We can fix this issue in HTML with two basic techniques:
Here’s how that would look in practice:
<a href="shop.html">
<img src="shoppingcart.gif" alt="">
Shop Here
</a>
You might also provide an image alt tag that quickly describes the icon, provided that the image description is different from the link text. Describing the image may be better for accessibility if the description would supplement the link text. For example:
<a href="shop.html">
<img src="shoppingcart.gif" alt="shopping cart icon">
Shop Here
</a>
One more important note: Many websites use HTML tables for layout, which can lead to redundant links and other usability issues. Wherever possible, it’s better to use CSS tables — this allows you to avoid redundant links while providing assistive technology users with a clear site structure.
Related: How To Build Accessible Tables
If users can understand the purpose of the link when it receives focus, you’ve fixed the problem. You don’t want to overload the user with unnecessary information.
In this example, the linked image and the hyperlink text are unnecessarily long. A screen reader will announce both of the link descriptions — which wouldn’t be a great experience for users.
<a href="shop.html">
<img src="shoppingcart.gif" alt="shopping cart icon that links to our estore">
To start shopping at our estore, click here and log in
</a>
Related: Quick Guide to Accessible Hyperlinks
The World Wide Web Consortium (W3C) publishes the Web Content Accessibility Guidelines (WCAG), the international standard for digital accessibility. While the W3C strongly recommends combining adjacent image and text links for the same resource, WCAG does not include a specific success criterion for redundant links.
However, all hyperlinks must have accurate text alternatives in order to meet WCAG 2.1 Success Criterion 2.4.4, “Link Purpose (In Context):”
The purpose of each link can be determined from the link text alone or from the link text together with its programmatically determined link context, except where the purpose of the link would be ambiguous to users in general.
If your website contains a hyperlinked image that doesn’t have meaningful alt text, you fail to pass this guideline — even if you include a text hyperlink adjacent to the image.
And since redundant links are frustrating for users, the best practice is to fix your content by combining both elements in the same hyperlink. Remember, the user experience is your most important priority.
To build a long-term plan for accessibility, start with a free WCAG 2.1 Level AA compliance summary of your website. For more guidance with hyperlinks, send us a direct message to connect with a web accessibility expert.