2

Question on product cards and WCAG AA compliance.

enter image description here

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.

3 Answers 3

2

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.

1
  • +1 for "current UI trends have those cards a lot, some clickable and some not" ... depending on the lengths of the snippets shown on cards like this, it isn't always obvious that you can click them to see more.
    – TripeHound
    Jun 11, 2018 at 9:50
1

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/

0

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

enter image description here

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.

enter image description here

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.