accessibility – WCAG AA Compliance and Card Patterns


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.