Button / Link

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 using the component, I want to be able to easily understand the purpose of the control.
• As someone with a motor disability, I want to be able to easily select the correct control.
• As a screen reader user, I want to be able to understand the purpose of the control and whether it will complete an action on the same page, or navigate me elsewhere.
• As a keyboard-only user, I want to be able to navigate to the control.

For a Button:

• As a keyboard-only user, I want to be able to activate the button using the Space key.

For a Button link:

• As a keyboard-only user, I want to be able to activate the link using the Enter key.

Test steps

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

For a Button:

1. Turn on a screen reader.
2. Navigate to the button using the Tab key.
3. Verify that the screen reader announces a role of "button".
4. Verify that the visible label for the button is included in the name announced by the screen reader.
5. Verify that the button can be activated using the Space key.

For a link:

1. Turn on a screen reader.
2. Navigate to the link using the Tab key.
3. Verify that the screen reader announces a role of "link".
4. Verify that the visible label for the link is included in the name announced by the screen reader.
5. Verify that the link can be activated using the Enter key.

---

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:

• When using the link, ensure that an href attribute is always provided, so that people can navigate to the control using only a keyboard, and so that an appropriate role is communicated to screen reader users. Without this, people may be unable to use the link.

---