Accessible cards

There are multiple ways to handle cards or “block links” in an accessible way. I recently had to implement such cards and I didn't like the various solutions out there, because they take away the ability for users to select text within those cards. To combat this you can add Javascript, but this can lead to usability issues like clicks not working properly. You can read more about those options here.

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.

The card

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.

The problem

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:

1. The tags can link to an index page that shows all posts with that tag.

2. The title, image and read more text link to the actual article.

3. 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:

1. When tabbing through the card with a keyboard, each duplicate link gets focus and this creates unnecessary tabs.

2. When using a screen reader it will announce all those links multiple times.

The solution

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:

1. Make all links except the read more button aria-hidden.

2. Add a sr-only heading element to replace the aria-hidden title for screen readers.

3. If the card has an image that is a link which has aria-hidden, add an sr-only text element with role="image" containing the alt text of the image.

4. Add tabindex="-1" to all non button links (titles and images) so they can’t get focus.

5. Add an aria label containing the title to the link.

This way we:

1. Don’t have block links with all its issues. 

2. Can select all text and don't need wonky Javascript for that.

3. Don’t get screen reader over announcements. 

4. Can add links within the blocks to tags or authors, without it being confusing. 

5. Users can tab/arrow through the card with proper voice over.

Photo by Klim Musalimov on Unsplash