Accessible way to link blog post teasers to the full blog post page

Question

Which one is the best way to approach links on a blog listing to improve accessibility?

1. Only a link on the "Read More" button
2. An <a> tag surrounding the entire list item, to make every area clickable
3. Everything with its own <a> tag

I was been reading about this and the first option sounds like the best for screen readers, but isn't nice to not be able to click on the title or text to enter the post.

I think that the second options its the best, but that approach conflits with the share buttons, because link inside links isn't valid HTML.

And the third one looks bloated and mess with the screen reader.

Answer 1

For people using keyboard navigation, it's best to only have one link with good and short alternative text, like

<a href="#" aria-label="Read more about Original post title">Read more</a>

But this does not prevent you from using the onclick event on the outer div to make the full snippet clickable in order to improve mouse navigation.