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


-----Original Message-----
From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of Dan Smith
Sent: 20 November 2020 01:31
To: <EMAIL REMOVED>
Subject: [WebAIM] Card UX: Wrapping cards in an unordered list and Nesting when using anchor elements

Hi everyone,

I'm updating a card-based User Interface and would like your opinions (and associated justifications) on the following:

1. Wrapping cards in an unordered list - When a grid of cards is
displayed on the page (as the listed results of a filter search), are there
known issues with making each card a list item (within an unordered list)?
2. Nesting when using anchor elements - When a card title is linked,
should the anchor/link element wrap the heading element, or should the
link/anchor element wrap the heading element?

If you're unfamiliar with what the card pattern is and what a card can contain, please refer to the Rules on the BBC's GEL (Global Experience
Language) page about the Card pattern (
https://www.bbc.co.uk/gel/guidelines/cards#rules).


1. Wrapping cards in an unordered list

This was raised in a partial accessibility audit done by a 3rd party. I think the implication was that a wrapping list interferes with the semantics or exposing of child elements.

I haven't experienced any issues in my testing, so I wondered if this only affects specific screen reader / browser combinations, or user interaction patterns.

Have you experienced any side-effects from wrapping an unordered list around card child elements like headings and images?


2. Nesting when using anchor elements

Historically, I would nest the anchor element inside the heading, as in
HTML4.01 the heading is a block element and the anchor was an inline element.

However in HTML5 it's also valid for the link to wrap the heading, and WCAG
2.1 agrees (Example 7 on
https://www.w3.org/WAI/WCAG21/Techniques/html/H30.html).

My main concern here is that a colleague has raised the issue that the link may not be discoverable with some user interaction patterns.

For example, in "Accessibility and Testing with VoiceOver OS (Mac)" ( https://bbc.github.io/accessibility-news-and-you/accessibility-and-testing-with-voiceover-os.html),
the BBC suggest developers to "use ‘VO + Right arrow' to read through each element in the feature" (in VoiceOver).

When this interaction pattern is used, only the direct children of the "feature" under test are exposed (without further exploration). In my example, the user would be aware that the card contained a heading, but not that the heading contained a link.

However if the link wrapped the heading, the user would be aware that the card contained a link, but not that the link contained a heading.

From what I have learned about screen reader usage over the years, I would tend to navigate by the following methods instead: headings quick keys, heading menus, link menus, or the TAB key.

However I appreciate that I am not dependent on a screen reader for daily web navigation and users with disabilities may well have other established patterns which serve them better.

Perhaps the BBC's approach is based on insights from user testing, whereas mine is based on tutorials aimed at either developers, or new users of screen readers (such as EyeT's tutorial https://www.youtube.com/watch?v=U5XzBiPwDks).

Do you have a preference for nesting elements within links, or vice versa?


Many thanks,
Dan