Combined links optimized for screenreaders

We are working on improving the accessibility of our clients website. The site uses a lot of elements with combined links. For example we have teaser elements, which consist of an image, a title, a paragraph, and a CTA, all wrapped in one link:

<a>
   <img>
   <span>Title</span>
   <p>Description</span>
   <span>CTA</span>
</a>

According to the WCAG, this is the suggested way when dealing with multiple links to the same target, as opposed to linking all of these elements in their own link wrapper.

But when using a screenreader, this implementation seems very cumbersome to me. The screenreader starts by reading the whole link, including all elements:

Link - Image Alt Text - Title - Description - CTA

Then, when navigating further, the screenreader reads all of these elements again, one by one:

Link - Image Alt Text

Link - Title

Link - Description

Link - CTA

This does not seem like a good result for screenreader usage.

How can I improve this behaviour?

Solution

I'm a screen reader user myself. In practical usage, it isn't a real problem.

It isn't a so big problem, because it concerns two different ways of navigating the page.

IN focus mode (with tab), indeed the whole content of the link will be read at once
In browse mode, each element will be read separately

Experienced screen reader users often switch between browse and focus modes, but don't usually do it in the same section, once they have understood the structure of the page and chosen which one they feel best with. So yes there could be repetitions, but quickly they will choose one way and there won't be any obvious repetition anymore.

Beginners more tend to stay on focus mode only, so it could be useful to improve the way the link is read in focus mode (when the whole content is read in one go). You can, for example, add invisible commas so the screen reader will make pauses:

<a href="...">
<span>Title</span><span class="sr_only">, </span>
<img alt="..." src="..." /><span class="sr_only">, </span>
<span>Description</span>
<span>Movie duration</span>
<span>Watch now</span>
</a>

Be careful about spacing, as words may be glued together.

You can also decide to give a label to the link, with aria-label attribute:

<a href="..." aria-label="Watch now, Title, description, movie duration">
<span>Title</span>
<img ... />
<span>Description</span>
<span>Movie duration</span>
<span>Watch now</span>
</a>

Beware, though, that:

An aria-label replaces the whole accessible text, so you need to duplicate the whole text inside the label as shown in the example above. That's also a simple way to add confort punctuation and make sure they will never appear on screen.
Elements won't be readable separately any longer, even in browse mode.

No longer having the different elements separately accessible isn't necessarily always better. It means that one then always have to read everything in one go. It's harder to stop reading the description in the middle. It's harder (and maybe totally impossible) to copy-paste the title alone. The description has to be re-read entirely again to repeat an information coming after it (the movie duration in the above example). Where to put the CTA in this case is also another question: at the end, it's much less clear what the link does, and at the beginning, it can become quickly repeatitive and annoying. The longer the whole content, the more it can become problematic.

There is no clear standard saying which one is the best solution. The best is to test with real users. However, I would generally advice to don't overuse tricks like aria-label, as they can become detrimental. It's often better to keep it simple and natural. Don't be afraid, screen reader users are used to it.