Card box

How to test a card box

Gherkin Condensed

Given that I am on a screen with a card box

WHEN I use the arrow keys or ctrl + tab to move focus to any nested control I SEE focus is strongly visually indicated
Then when I use the spacebar to activate the control I SEE the control can be accessed

WHEN I use a screenreader AND I swipe to move focus to any nested control
- I HEAR its purpose is clear and matches visible content
- I HEAR any nested control expresses its role (card has no role)
- I HEAR content and controls are individually readable
- I HEAR any nested control expresses its state
Then when I doubletap with the control in focus I HEAR the control can be accessed
Or when I when I swipe to move focus to any nested heading I HEAR the heading text and role of heading is announced

When I use Text resize I SEE text content can resize up to 200% without losing information

When I use	I see/hear
Arrow keys or ctrl + tab	Focus visibly moves to any control inside the card box
Spacebar	The control is selected

When I use	I hear
Swipe	Focus moves to any element inside the cardbox
Doubletap	Intended actions occur

Reads	I hear
Name	Its purpose is clear and matches visible content
Role	Any nested control expresses its role (card has no role)
Group	Content and controls are individually readable
State	Any nested control expresses its state

When I use	I see
Text resize	Text content can resize up to 200% without losing information

The card box itself has no name role or state. It simply creates a visually distinct group of logically related information and components.

It’s just a box.

A card pattern might contain an informative image, button and a link. Each must meet individual atomic acceptance criteria.