CODEWITHSUNDEEP
htmlaccessibilitywai-ariascreen-readers
Paul T.
Paul T.

Reputation: 329

HTML accessibility, duplicate links but not exactly "adjacent"

I have be rewriting my website to be accessibility friendly and have a really good handle on good behavior, but I'm having a problem with the following pattern:

I have a list page of blog entries that I am trying to remove a duplicate link alert for (I know it's just an alert, but it's right to alert me).

<article>
<a href="destination">
   <img src="decorative picture.jpg" alt="">
   <h2>Blog entry title</h2>
</a>
<p>Summary of blog post and other meta info about the post</p>
<p>
   <a href="destination" class="btn btn-details" tabindex="-1"
      aria-label="Continue reading about Blog Entry Title">
      Continue reading
   </a>
</p>
</article>

The usual pattern discussed is when you have an image and title together (solved), but what should I do with the "continue reading" part? It is not, nor should it be, near the image/title, but it really is redundant. I thought about either making the link or the surrounding paragraph aria-hidden="true" because "Continue reading" is really stylistic, someone in a screen reader would know to click the link above, but I know we're not supposed to put links in a hidden context. I thought tabindex="-1" would solve that problem, but there is still a link there, it's just not focusable and is weird for visual navigators because they can't tab to it.

I found the following article, which makes me wonder if I should remove tabindex and use aria-labeledby to bring some semantic connection to the previous link?

<article>
<a id="md5-hash-of-destination" href="destination">
   <img src="decorative picture.jpg" alt="">
   <h2>Blog entry title</h2>
</a>
<p>Summary of blog post and other meta info about the post</p>
<p>
   <a aria-labeledby="md5-hash-of-destination" href="destination"
      class="btn btn-details">
      Continue reading
   </a>
</p>
</article>

What is the optimal way to "eliminate" the entire Continue reading link to give the best UX to people who use screen readers et al?

Upvotes: 1

Views: 487

Answers (1)

slugolicious
slugolicious

Reputation: 17435

I think the key to your question is at the very end where you're asking about the UX since the code you have is technically accessible according to WCAG.

Having two adjacent links go to the same destination isn't ideal but it's not a horrible UX either. Users with mobility issues will have two tab stops to navigate through for each article, which can be draining for some assistive technology such as a sip-and-puff device.

I'm not sure I see the need for the "continue reading" link at all. Hearing the blog title and that it's a link, then a summary afterwards seems sufficient. What benefit is the "continue reading" link? I suppose my question might be better asked on https://ux.stackexchange.com/.

If you have to keep the second link for whatever reason, you definitely don't want tabindex="-1" on the link. That would give you a link that mouse users can click on but keyboard users couldn't. Technically, that's not a failure of WCAG 2.1.1 since that guideline says that all functionality of the page must be available to keyboard users, and since your first link is available, having the second link unavailable doesn't fail.

But if you shouldn't have tabindex="-1" on the link, then you shouldn't have aria-hidden="true" either. As you said, interactive elements should not be aria-hidden.

If you really want to keep the second link, my first choice is just leave it as is. If you only want one link clickable, then perhaps make the entire <article> a link. That would cause the blog title and the blog summary/metadata and the "continue reading" to all be read as the link name. That makes for a pretty wordy link, which isn't a great UX either.

So I'm not sure you have a win-win situation. My first choice is to remove the second link completely. The "continue reading" doesn't seem to have any benefit.

Your second code example is not much different from your first. You changed the label of the second link so it ends up being less accessible than your original code. You'll hear "blog entry title" as the name of both links. The "continue reading" will not be announced because you're overriding the link text with the aria-labelledby.

Upvotes: 3

Related Questions