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.

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 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 '18 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/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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