WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Card UX: Wrapping cards in an unordered list and Nesting when using anchor elements

for

From: Steve Green
Date: Nov 19, 2020 7:02PM

We encounter these sort of cards or tiles a lot. If each card contains a heading, I don't usually recommend marking-up all the cards as a list. However, I am not aware of any reason why you shouldn't. The only advantage of the list mark-up is that screen reader users are informed how many cards there are. That could be important if there are a lot or if the number changes. Otherwise, there is no benefit and it just adds noise.

If the card only contains one link, we recommend making the entire area of the card clickable by putting a JavaScript event handler on the container. However, it should not usually receive focus.

I have seen the same behaviour that you describe insofar as Voiceover on iOS only announces either the heading or the link, depending on both the nesting and how you navigate to the element. User testing shows that people use a variety of navigation methods. However, my experience is that people with average proficiency or lower tend to stick to swiping. I would therefore nest the elements such that the links are announced when swiping. If you do it the other way round, so the headings are announced, some people will never find the links. Ideally, you should do your own user testing.

Steve Green
Managing Director
Test Partners Ltd