Card box

How to design a card box

WCAG Disabilities

A card box must meet WCAG principles:

1 Perceivable

Text can resize up to 200% with no loss of information - 1.4.4 AA
Text has a 4.5:1 minimum contrast ratio 1.4.3 AA

2 Operable

The click/tap target area for individual components is defined and is no smaller than 24x24px - 2.5.8 AA
The click/tap target area for individual components is defined and is no smaller than 44x44px - 2.5.5 AAA
The focus indication for individual components is defined and visible (in some way) 2.4.7 AA
The focus indication for individual components is defined and has a 3:1 minimum contrast ratio against default and adjacent elements - 2.4.13 AAA
The focus indication has a minimum area equal to the width of the element and 2px in height - 2.4.13 AAA

4 Robust

Name and role of individual components is documented 4.1.2 A
Meets criteria across platforms, devices and viewports 4.0.0 AA

A card box must work for people with disabilities:

Low vision

Text can resize up to 200% with no loss of information - 1.4.4 AA
Text has a 4.5:1 minimum contrast ratio 1.4.3 AA

Motor

The click/tap target area for individual components is defined and is no smaller than 24x24px - 2.5.8 AA
The click/tap target area for individual components is defined and is no smaller than 44x44px - 2.5.5 AAA
The focus indication for individual components is defined and visible (in some way) 2.4.7 AA
The focus indication for individual components is defined and has a 3:1 minimum contrast ratio against default and adjacent elements - 2.4.13 AAA
The focus indication has a minimum area equal to the width of the element and 2px in height - 2.4.13 AAA

Blindess

Name and role of individual components is documented 4.1.2 A
Meets criteria across platforms, devices and viewports 4.0.0 AA

Cards are just a visual box of content

The card box itself has no particular semantic meaning
Do not focus the entire card, just the interactive portions.
- If focus lands on the entire card, it will be difficult for people using a screen reader to understand the content inside.

Card testing criteria

Design

Card box design criteria

Base your design on WCAG's POUR principles or design experiences by disability

Web

Web card box criteria

Based on WCAG success criteria, you can define your accessibility criteria for cards on the Web

iOS

iOS card box criteria

Based on Apple's Human Interface Guidelines, you can define your accessibility criteria for cards on iOS apps

Android

Android card box criteria

Based on Google's Material design, you can define your accessibility criteria for cards on Android devices