Hiding purely decorative links for screen readers (such as product listing images)

user_1197807 0
Viewed 28

Is it accessible to hide image links using tabindex="-1" aria-hidden="true" on the anchor tag if the image as alt="", provides no real content value, and is purely decorative?

My example below is of a "product listing" style of content. This is really a follow-up question to What is best practice (and legal) for product listing image alt text for accessibility? regarding best practices for product listings, but could be relevant in other scenarios. While ideally you may just have one anchor tag wrapping both the image and product name elements, this might not be possible based on other content within the list block or if you don't have enough control of the actual markup to move this around depending on the project you are working on.

In these cases, I still need the image clickable for users, but don't want to force screen reader users to have to tab through redundant links and listen to duplicate/unnecessary content. I've tested this on VoiceOver and NVDA and it appears to work well.

Is this a valid method or are there drawbacks that would cause issues for some users?

.product-list {
  list-style-type: none;
  margin: 1rem 0;
  padding: 0;
}

.product-list li  {
  display: inline-block;
  margin: 0;
  padding: 0;
  text-align: center;
  vertical-align: top;
}

.label, .name {
  display: block;
}

.sr-only:not(:focus):not(:active) {
  clip: rect(0 0 0 0); 
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap; 
  width: 1px;
}
<h1>Image Anchor Link with Tabindex -1</h1>

<ul class="product-list">
  <li>
    <a href="/#first-link.html" tabindex="-1" aria-hidden="true">
      <img src="https://place-puppy.com/200x200" alt="">
    </a>
    <span class="label"><span class="sr-only">Label: </span> Featured</span>
    <a class="name" href="/#first-link.html">Sparky</a>
  </li>
  <li>
    <a href="/#second-link.html" tabindex="-1" aria-hidden="true">
      <img src="https://place-puppy.com/200x200" alt="">
    </a>
    <span class="label"><span class="sr-only">Label: </span> New</span>
    <a class="name" href="/#second-link.html">Fletcher</a>
  </li>
  <li>
    <a href="/#third-link.html" tabindex="-1" aria-hidden="true">
      <img src="https://place-puppy.com/200x200" alt="">
    </a>
    <a class="name" href="/#third-link.html">Tallulah</a>
  </li>
</ul>

wai-aria tabindex accessibility anchor
1 Answers

This looks acceptable, but you must be careful.

Since the image link is totally unreachable with the keyboard (because of tabindex=-1) or for a screen reader user (because of aria-hidden=true), you must make sure that the text link that follows points to the same page, otherwise you will create pages that those users won't be able to reach at all. But as long as this condition is satisfied, it looks fine.

However, note that it would probably be better, if you can, to put everything in the same link, like this:

<li>
<a href="productXYZ">
<img src=productXYZ.png" alt="" />
Product XYZ
</a>
</li>

IN this example, since the image has an empty alt but has another text, everything is fine, only the text of the link will be read.

The problem comes from image only links without alt text. They are a problem because screen readers have to find some text to speak even though there is none. Several screen readers take the file name in that case, which most of the time doesn't mean anything to the user. You are working around the problem with your solution, but the best would be to not have this problem at all, isn't it?

user_19712160
Related