Code Rush is a regular podcast about front-end design & development challenges in a fast-moving industry,
In my solution I’m not creating an actual “block link” but instead I make various items within the card links. In this article I'll explain how I think we can do this is an accessible manor with a good user experience for everyone.
Let’s say we have a design like this:
We could use the various solutions I’ve written about above and make the whole card clickable, but this I don’t want.
Instead, we’re going to make each individual item a link. This has the added benefit that we can link to different things from within the card:
The tags can link to an index page that shows all posts with that tag.
The title, image and read more text link to the actual article.
The author optionally links to an author bio page.
This creates an issue however. It would mean that we have duplicate links on the card, which has the following side effects:
When tabbing through the card with a keyboard, each duplicate link gets focus and this creates unnecessary tabs.
When using a screen reader it will announce all those links multiple times.
The solution I came up with isn’t all that complicated, but I hadn’t seen it any article on this subject. This could of course mean that my solution has downsides that I’m not aware of. I didn’t come across issues when testing this with Voice Over, but please let me know if there’s side-effects that I didn’t think of.
What I did is the following:
Make all links except the read more button
sr-onlyheading element to replace the
aria-hiddentitle for screen readers.
If the card has an image that is a link which has
aria-hidden, add an
sr-onlytext element with
role="image"containing the alt text of the image.
tabindex="-1"to all non button links (titles and images) so they can’t get focus.
Add an aria label containing the title to the link.
This way we:
Don’t have block links with all its issues.
Don’t get screen reader over announcements.
Can add links within the blocks to tags or authors, without it being confusing.
Users can tab/arrow through the card with proper voice over.
Responsive images with Statamic, Tailwind and Glide