Tackling Duplicate Content Links - html

Question

What's the best practise for accessibility when you have redundant links on a page. For example, a page containing blog listings often has a clickable title and a read more link:
<article>
<h2><a>My awesome blog post title</a></h2>
<p>This is the excerpt...</p>
<a>Read More</a>
</article>
<!-- more blog listings... -->
My first approach would be to add an aria label to the read more link to give it some context.
<article>
<h2><a>My awesome blog post title</a></h2>
<p>This is the excerpt...</p>
<a aria-label="My awesome blog post title">Read More</a>
</article>
<!-- more blog listings... -->
However now there are two identical links and I can see how this would be irritating for people using screen readers - especially if the page contains a large number of articles.
Would this be a good use case for hiding the extraneous link from screen readers and/or people navigating using the keyboard. Something like this?
<article>
<h2><a>My awesome blog post title</a></h2>
<p>This is the excerpt...</p>
<a role="presentation" tabindex="-1">Read More</a>
</article>
<!-- more blog listings... -->
Not sure whether this is one of those situations where trying to help may actually make things worse. Would appreciate any advice!
Thanks, Adam

Answer 1

Some baseline:
Generally you want links that point to the same URL on a site to use the same text. This is part of the reason "read more" is so confusing for many screen reader users.
You also want to avoid being overly-verbose, in deference to screen reader users.
You also want to avoid linking an entire block of content, as that can also be incredibly verbose.
This mostly affects screen reader users; visual non-screen reader users can generally parse "read more" links easily.
You may have found from Google searches that are lots of different approaches and many of them depend on the context.
That is the catch — context matters. Knowing the audience, considering the material, and understanding the impact are all crucial. I might code it differently for a tech blog targeted at younger users than I would for a food blog targeted at a generation ahead of mine. In both cases I would include screen reader testing.
That being said, since "it depends" is generally a crap answer. Here are a some approaches you can test. Since screen reader users are our target, I am leaning on ARIA instead of CSS or scripting trickery.
This approach has issues in NVDA when a user tabs to a link (but is still my preferred method):
<article>
<h2>My awesome blog post title</h2>
<p>This is the excerpt...</p>
Read More
</article>
This approach will be more clear and gives context, but is a bit verbose and means you have to update / insert the content twice (which can be problematic if your post titles of have double quotes in the title that are not escaped):
<article>
<h2>My awesome blog post title</h2>
<p>This is the excerpt...</p>
Read More
</article>
This approach leans on the existing heading, as the first one does, but removes the "read more" text instruction completely:
<article>
<h2 id="Foo">My awesome blog post title</h2>
<p>This is the excerpt...</p>
Read More
</article>
This approach gives context first (id="Bar") and then the name of the post (id="Foo") thanks to a space separated list of IDs in the aria-labelledby. A skilled screen reader user (or someone who understands the page) can skip right past it after the first couple words:
<article>
<h2 id="Foo">My awesome blog post title</h2>
<p>This is the excerpt...</p>
Read More
</article>
I hope that gives you at least a starting point to test and/or decide which is the best fit for your audience and content.

Answer 2

<article>
<h2><a href>My awesome blog post title</a></h2>
<p>This is the excerpt...</p>
<a href>Read More</a>
</article>
First solution : let screen readers users ignore the "read more" link
Here the easiest thing is to set the aria-hidden attribute on the "Read more" link.
Problem : like it was stated for tabindex=-1, sighted screen reader users will see a link they can't go on.
Second solution : consider all as a link
In HTML5, you can perfectly enclose the whole article snippet in a link
<article>
<a href><h2>My awesome blog post title</h2>
<p>This is the excerpt...</p>
Read More
</a>
</article>
Problem : the alternative text will be awfully long.
3rd solution : Playing with a bit of javascript
Combining the aria-labelledby approach (see #aardrian excellent answer) and some javascript magic, you can have the best of two worlds by playing with the onclick event on the article tag (or the h2)
<article onclick>
<h2 id="Foo">My awesome blog post title</h2>
<p>This is the excerpt...</p>
<a aria-labelledby="Foo" href>Read More</a>
</article>
This way, the only visible link is the "read more" link, keyboard and screenreaders users can focus it. The alternative text is very explicit. Mouse users are still able to click on the heading or the excerpt.
I would add that having a link inside an heading (or vice versa) is often a bad design choice (too long to discuss here).

Answer 3

In my personal recommendation, I would combine it to one link... Anytime you can combine redundant links that's a great win.
<article>
<h2>My awesome blog post title</h2>
<p>This is the excerpt...</p>
Read More
</article>
<!-- more blog listings... -->
If you really need both links you can use an onclick function and remove the href.
<article>
<h2 id="Foo">My awesome blog post title</h2>
<p>This is the excerpt...</p>
<a onclick="examplefunction()"id="Bar" aria-labelledby="Bar Foo">Read More</a>
</article>
This removes that redundant link error and removes the second link from achieving focus. The link can still work if someone clicks on it, but it removes it from the tab order. This is perfectly valid.
Though it's always best to have HTML handle links instead of using javascript to do it.
Good Luck,
Giovani