The Problem With Double Links
Screen-reader users will use the links of a page as their main points of navigation. Providing concise links without double or triple links to the same page will help your users navigate the website.
A normal product listing page will show 50 products. For each product, imagine you have three links going to the product page: one on the title of the product, one on the price, and one on the comments.
If we multiply these three links for 50 products, we get around 150 links our user will have to loop through trying to find the right product. They’ll be constantly bombarded with the same name three times in a row.
This behavior is developed across many e-commerce websites. As shown here on top with the Prada website, each number is a link you’ll encounter with your screen reader.
The same thing will happen on bigger websites like Amazon, where merging or disabling a few links pointing to the same section of a product page will decrease six identical links.
How To Fix Double Links
You have two simple ways you can choose:
tabindexfor adjacent image and text links
- Combining the adjacent image and text links
Disabling tabindex for Adjacent Image and Text Links
To remove a link from an element’s selectable elements with the tab key, you’ll have to add the code
<a href="http://foo.bar" tabindex="-1">inaccessible by tab link</a>
If the value of
tabindex is a negative integer, the user agent must set the element’s
tabindex focus flag but shouldn’t allow the element to be reached using sequential focus navigation, written in the HTML5 spec.
Combining Adjacent Image and Text Links
Many links have both a text and iconic representation adjacent to each other — just rendered in separate
Visually they appear to be a single link, but many users encounter them as adjacent identical links. For a keyboard user, it is tedious to navigate through redundant links.
For users of assistive technologies, it can be confusing to encounter successive identical links. When the text alternative for the icon is a duplicate of the link text, it is repetitive as screen readers read the description twice.
You can transform your code from this:
<a href="http://dope.dope">DOPE Shoe Red</a><a href="http://dope.dope"><img src="dope.png" alt="shoe red"/></a><a href="http://dope.dope">Learn more about Dope Shoe Red</a>
To this more accessible version with just a single link:
<a href="http://dope.dope"> <span>DOPE Shoe Red</span> <img src="dope.png" alt=""/> <p>Learn more about Dope Shoe Red</p></a>
Test your website for accessibility issues!
There are many custom product to do so like Husable that will provide you a real human test valuation of your website to discover real problems that automatic tools won’t find or discover cause you simply need a human!