Card

User stories

The following user stories can be used to understand when this component should be used, and how to know when it's been implemented correctly.

• As someone with a cognitive disability, I want to be able to scan a page and quickly understand the important sections of content present.
• As a keyboard-only user, I want to be able to navigate to and activate any interactive content within the card.
• As someone with a motor disability, I want to be able to easily select interactive content within the card.

Test steps

Use these steps to check that the card component has been implemented correctly:

1. Turn on a screen reader.
2. Navigate to the card components and verify that if a heading is present, that an appropriate heading level (maintaining the page's hierarchy) has been provided.
3. If a heading is present, verify that this is meaningful and provides sufficient context to the content within the card.
4. Navigate to any interactive components and verify that an appropriate role (based on the purpose of the control) and a name (providing the purpose of the control) is announced.5. Open the browser's developer tools.
5. Verify that interactive elements have a target size of at least 24 pixels by 24 pixels. If smaller, check there are no other interactive elements within a 24 pixel range from the centre of the interactive element.

---

Avoiding accessibility barriers

We're aware of the following barriers that can be introduced when using this component. Ensure that you are not adding barriers, by considering the following:

• While the whole card should be clickable when there's only a single interactive element in it, this should be implemented in a way that does not impact the semantic meaning of the content. Rather than wrapping all the card's content in a link, or a button, which would affect the meaning of content, it should only be the clickable area of the existing interactive element that should change in size. This can be achieved with additional styling or scripting.

---