WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: Dan Smith
Date: Nov 19, 2020 6:31PM

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