0

I have a list of articles, where each tile links to an article through heading and CTA button. They are getting flagged as duplicate links in my accessibility checker. Most of the CTAs have 'Learn more' text, with occasional 'Download PDF' or 'Access hub' etc.

  • Considering the number of articles I'm working with, it will not be possible to provide a unique CTA for each one of them.
  • I don't want to hide the CTAs from screen readers, as occasionally they convey important information.

Is there an accessible way to have:

  1. links on the same page with the same text alternative, but pointing to different URLs; and
  2. links on the same page with different text alternatives, but pointing to the same URL?

Here is an example of how the code looks for each tile on my website. There are multiple tiles on a page.

<div>
<a href="xyz"><h3>XYZ tile heading</h3></a>
<p>Summary text</p>
<a href="xyz"><span>Learn more button</span></a>
</div>
janwys
  • 21
  • 1

1 Answers1

0

Add an ID to the heading text and the "learn more" link. In your example code, the link ID could be on the link itself or on the <span>. I put it on the link in my example below.

Use aria-labelledby on the "learn more" link and point it to the two new IDs.

<div>
  <a href="xyz">
    <h3 id="newID1">XYZ tile heading</h3>
  </a>
  <p>Summary text</p>
  <a id="newID2" aria-labelledby="newID2 newID1" href="xyz">
    <span>Learn more button</span>
  </a>
</div>
slugolicious
  • 15,824
  • 2
  • 29
  • 43
  • Why is the anchor labelled by itself? Feel free to [edit] your answer to include the clarification. – Heretic Monkey Jun 24 '23 at 01:47
  • It’s labeled by two elements so that it will say “learn more, XYZ tile“. – slugolicious Jun 24 '23 at 13:35
  • Won't it create a situation where the screen reader announces almost the same description for two adjacent elements? It would read the heading first and then after tabbing forward to the button it would read the whole heading again, plus 'Learn more'. It seems redundant to repeat the same text twice on adjacent elements. – janwys Jul 20 '23 at 10:47
  • That depends how you navigate with the screen reader. There are dozens of ways to navigate and some ways might seem redundant. If you TAB through the page, you can't get to the heading so you won't hear it repeated. If you navigate by DOM elements, such as headings (using the H key), then you won't get to the link so it won't be repeated. If you walk the DOM sequentially, listening to every single element on the page, then yes, you might hear repeated info. But that's far less of a problem than the link not having context. – slugolicious Jul 20 '23 at 20:15