Search code examples
htmlcssaccessibilitytabindexjaws-screen-reader

Accessibility: better place to place tabindex=-1 to avoid duplicate links?

This question is about Accessibility.

Here is my code:

<a href="https://example.com/url-to-details">
    <img src="https://example.com/item.png" alt="some description">
</a>
<a href="https://example.com/url-to-details">some description</a>

It's not perfect, as we know we should avoid Adjacent links go to the same URL (this is what the WAVE accessibility tool says for me on my webpage about this piece of code). With another words, the problem here is you use th Tab key consequently and still appear on the same link. This is not perfect.

My solution is to set tabindex="-1" for one of the links.

So, my questions are:

1. is it a good idea, or you have a better approach?

2. Which code is better from the Accessibility point of view:

<a href="https://example.com/url-to-details" tabindex="-1">
    <img src="https://example.com/item.png" alt="some description">
</a>
<a href="https://example.com/url-to-details">some description</a>

or

<a href="https://example.com/url-to-details">
    <img src="https://example.com/item.png" alt="some description">
</a>
<a href="https://example.com/url-to-details" tabindex="-1">some description</a>

P.S. There is a 3rd approach: to unite two <a></a><a></a> into one such as <a> picture + some description</a>, but I would avoid it for some reasons.

P.P.S. The description text "some description" is equal for both the image description and the text in the anchor tag.

Solution

  • I don't see a use case for having both an image link and an adjacent textual link that use the same URL. It should be a single link, so you have three options:

    1. get rid of the image link,
    2. get rid of the textual link,

    3. combine the image and the text into a single link, where the image has an empty alt attribute:

      <a href="https://example.com/url-to-details"><img src="https://example.com/item.png" alt=""> some description</a>

    In the third case, the alt attribute should be empty in order to avoid duplication of text (screen reader users don't want to hear the link text twice). This also results in simpler code that does not rely on tabindex="-1". See also WCAG Technique H2: Combining adjacent image and text links for the same resource.

    Note that using two adjacent links, both with the href attribute and one of them having tabindex=-1, as proposed in the question, will result in both links being listed in a screen reader's list of links. This duplication should be avoided.