WCAG AA Compliance and Card Patterns

Question

Question on product cards and WCAG AA compliance.

We are specifically questioning the link styles of this clickable cards—which take you to a new page.

Each card you see has a focus + hover state for the title to underline.

Callout A: Is the arrow next to the title required in order to be AA compliant, or is the context of this element as a clickable card clear enough?

Callout B: Here, a similar card treatment. Is the context of being surrounded by other cards enough to indicate that they are clickable, or is a visual indication required for the title text?

Again, this is all assuming proper focus states. This is a responsive page.

Thanks in advance for any insight! I've found some best practice information in regards to cards and accessibility, but having a difficult time interpreting specific success criterion for card patterns.

Answer 1

In my experience making the link look like a link as explicitly as possible in content and UI is the best thing you can do, use an accessible colour to call it out more and maybe have it permanently underlined. And focus/hover and previously clicked state are advisable.

The arrow icon is an additional extra and shouldn’t be used as a core part of something to indicate it’s a link. But it will add that extra bit of clarity for users but the link should be doing most of the work.

Additional visual aid is needed to indicate that those cards are clickable, current UI trends have those cards a lot, some clickable and some not there isn’t a real set convention for this as it’s quite new. So I’d make it more obvious. Again make it obvious in the UI and the context of what the link says , a simple “read more >” isn’t accessible. The various states will also add to this.

I know everyone talks about gov.uk but it is a really good example of accessibility at its best and they have great examples of links. The BBC websites are also great examples and some use card interfaces. Maybe look at those for inspiration and just double check what you come up with if meet the accessibility guidelines.

Answer 2

To answer your question: No, the arrow isn't required per WACAG guidelines. However, in terms of usability, it's always better to be obvious rather than ambiguous.

Heydon Pickering wrote a very thorough article on accessibility for Card design if that helps: https://inclusive-components.design/cards/

Answer 3

I have done some research on this topic that I'll share with you to save you heaps of time. Consider the following styles.

default: The state with no user’s interaction.

hover: It is generally triggered when the user hovers over an element with the cursor (mouse pointer)

focus: It is generally triggered when the user clicks or taps on an element or selects it with the keyboard’s “tab” key.

active: When using a mouse, “activation” typically starts when the user presses down the primary mouse button.

I have researched more than 20 different card components from the real-products. Surprisingly, it was difficult to find websites having all/any of those three state styles. Only Google design website has all of the state styles. For example, when users click (active state) on the card components, they can see the ripple interaction effect. Though in my opinion, it is a little bit hard to notice on a light background or image.

Patterns: Grouped elements & Individual elements From the research on the state styles, I found there are two kinds of patterns in the card component. The first pattern has grouped elements and the other pattern has individual elements like the image below. The grouped elements pattern allows us to click on the entire card component whereas, in the individual elements pattern, we can only click on the elements inside the component.

Keeping these two patterns in mind helps me make my design decision for the card components. I have written a detailed article on this external link if you want to read more about it.