Usage
Cards display content and actions about a single subject.
Functionality
Cards can be one, but not both of these varieties:
- Non-actionable card with buttons
- Directly actionable card with no buttons
Card
How to test a card
Given that I am on a screen with a card
1 Keyboard
-
WHEN I use the tab key or arrow key to move focus to any nested control I SEE focus is strongly visually indicated
-
Then when I use the spacebar or enter to activate the control I SEE the action occurs
2
Android
screenreader
-
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 if non-actionable, any nested control expresses its role
- I HEAR if directly actionable, it identifies as button or link
- 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
3 Device settings
-
When I use Text resize I SEE text content can resize up to 200% without losing information
1 Keyboard actions
| When I use | I see/hear |
|---|---|
| Tab or arrow keys | Focus visibly moves to any control inside the card box |
| Spacebar or enter | The control is selected |
2 Mobile screenreader gestures
| When I use | I hear |
|---|---|
| Swipe | Focus moves to any element inside the cardbox |
| Doubletap | Intended actions occur |
3 Screenreader output
| Reads | I hear |
|---|---|
| Name | Its purpose is clear and matches visible content |
| Role actionable | If non-actionable, any nested control expresses its role |
| Role non-actionable | If directly actionable, it identifies as button or link |
| State | Any nested control expresses its state |
4 Device settings
| When I use | I see |
|---|---|
| Text resize | Text content can resize up to 200% without losing information |