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 context provided by use of the badge component, without having to read through all the related information.
- As a screen reader user, I want to be able to understand the status of my application, without having to read through all the related information.
Test steps
Use these steps to check that the badge component has been implemented correctly:
- Verify that the badge uses meaningful text to provide context or a status.
- Verify that information is not conveyed through the use of the colour of the badge alone, and that there is a text alternative provided for any information conveyed by colour.
- Verify that when announced, the badge follows the content that it relates, with the order ensuring that the meaning of the content makes sense.
If using a custom variant, complete the following checks:
- Using a colour contrast analyser, enter the text colour and badge's background colour.
- Verify that the colour have a colour contrast ratio of at least 4.5:1.
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 semantic colours for this component, with the colour conveying meaning, ensure that a text alternative is provided. For example, if there is an error with a user's account, don't rely on the red colour of the badge to convey that there's a problem. People who cannot perceive colour, or differences in colour, may be unaware that there is an error. Instead, to prevent any issues, ensure that the information conveyed by the use of colour is in the label. For example: "Success, Form submitted", "Error, information unavailable".
|
Accessibility checklist |
|
|---|---|
|
User stories |
✅ |
|
Avoiding accessibility barriers |
✅ |