Does your website have a card layout in it? If so, you’re in good company. Card components are a really popular way of showing a selection of articles or products. At Intopia we like them because it makes the link’s hit target larger for people with low dexterity or using eye-movement tools. Plus, people using touch-screen devices can click the links more easily too.
Unfortunately, the HTML for the cards can get complex quickly if there’s a lot of information that needs to be in each card. Screen reader users can end up hearing really long link announcements. Also, if they have more than one link in their content, then keyboard users can have trouble reaching all of them.
For a while now when we’ve had clients with inaccessible card layouts, we’ve been recommending they follow Heydon Pickering’s excellent tutorial for making clickable cards. We tell them they can keep their good-looking card layout using the pseudo-content trick. Like Pickering, we thought it was unlikely that people would want to select the text inside the card since they could click it to go to the entire page or article with all the content available.
But it turns out that two potential user groups do rely on selectable text. In some recent usability testing, Andrew Arch had two users who tried to select text on a card component. The first has dyslexia, the second has low vision. Both of them find it tiring to read paragraphs of text, especially when they’re looking for detailed information about a topic. It’s a shame to find the content you want but be too tired to read it because it took so much effort to reach it. Instead, they used Speak on the iPhone and SpeakIt in ZoomText respectively to read sections of text for them. And (you guessed it!) for that to work they must be able to select the text they want to be read aloud.
“It just reinforces the intersectionality of disability and that we shouldn’t put people into disability boxes, for example ‘people with low vision just need to increase the text size’” – Andrew
My heart sank as I watched Andrew’s video of the people trying to select the text in the cards. They were frustrated and disappointed, and I can’t blame them – who would have guessed you could be blocked from selecting a bit of text! I went back to Pickering’s article to see what fixes might be needed. Luckily, he’d already solved our problem! Right after the pseudo-content trick he gives another fix he calls the “redundant click” method. We were just so happy with the first option that we hadn’t looked at the second one in detail. I’ve now made a demo on CodePen based on the one on his site, and it’s now the method we recommend to everybody.
“It also reinforced the need for all designers, developers and accessibility auditors to be involved in usability sessions to understand the real world of people with disability using digital products and the different ways they access information and interact with the web and apps” – Andrew
We still think the pseudo-content method is useful for cards which have large images and a small amount of text – just a few words. But for cards which have text introducing the topic of the link, the redundant click method is much better for people with dyslexia or low vision. If you’ve got a card layout, check out both methods at Pickering’s site to find which one will be best for you.
Andrew Arch also contributed to this article.
