Keyboard interactions
Key
Interaction
Tab
Moves focus forward to the next card.
Arrow keys
Moves focus within the card to focusable items within the card. If a button is included on the cards, the button should receive focus first. If there are multiple buttons, the primary or CTA button should receive focus first.
Shift + Tab
Moves focus backward to the previous card.
Return or Enter
If the card itself is clickable, Return or Enter will open the card. If the card is not clickable but has buttons, and the buttons or another item within the card is focused, that action is performed.
Space
If the card is selectable, the space bar will toggle selection.
Ctrl / Command + Arrow keys
Non-contiguous selection of cards.
Cursor guidelines
Non-interactive cards
Cursor
Description
Default (Arrow)
Use the default cursor for non-interactive cards.
Cards with interactive elements
Cursor
Description
Default (Arrow)
Use the default cursor for the non-interactive portions of the card.
Pointer
Use the pointer cursor for the interactive elements.
Grab hand
Use the grab hand cursor when hovering over cards that are draggable. Cards that have other interactive elements that are also draggable should first enter a drag mode before showing the grab cursors and allowing a drag action.
Grab fist
Use the grab fist cursor when actively dragging a card.
Fully interactive cards
Cursor
Description
Pointer
Use the pointer cursor for the entire card surface when the card is interactive, for example, if clicking the card will navigate to a one-up view.
Grab hand
Use the grab hand cursor when hovering over cards that are draggable.
Grab fist
Use the grab fist cursor when actively dragging a card.
WCAG 2.2 compliance
Any criterion not mention in the below table are not applicable to this component or are resolved with underlying requirements, engineering, and styles of the entire system.
1 . Perceivable
Requirement
Criterion
Level
Compliance
Non-text content
A
Non‑text elements—such as icons or illustrations used in cards—must provide a text alternative that communicates the control’s purpose. All controls, especially icon‑only controls, need an accessible name (for example, via a title, aria‑label, or associated text) so screen readers can announce their function.
Info and relationships, Identify purpose
AA
Cards should be understandable by assistive technologies like screen readers. This means the proper semantic HTML or ARIA role should be utilized.
Use of color
A
Color is not used as a means to convey information or distinguish elements, indicate an action, or prompt a response. Color is always paired with text or icons, and is only used to enhance the meaning of the text.
Text contrast
AA
Large text has a contrast ratio of at least 3:1, and small text has a contrast ratio of at least 4.5:1. Incidental text such as disabled, hidden, or decorative text has no contrast requirement.
Visual presentation
AAA
The width of text blocks is no more than 80 characters (40 for CJK languages), and text is never justified.
Non-text contrast
AA
The visual presentation of illustrations, icons, and component states have a contrast ratio of at least 3:1.
2 . Operable
Requirement
Criterion
Level
Compliance
Keyboard
A, AAA
All functionality of the component is operable through a keyboard without specific timing for keystrokes.
Seizures and physical reactions
A, AAA, AAA
There is no flashing content or unnecessary motion or animation in this component.
Focus order
A
Navigation sequences receive focus in an order that preserves meaning and operability.