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.

Prada has three links for each product Prada has three links for each product

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.

Amazon has six links for each product Amazon has six links for each product

How To Fix Double Links

You have two simple ways you can choose:

  1. Disabling tabindex for adjacent image and text links
  2. 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 tabindex="-1".

<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 a elements.

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
>

References and Resources