How it works
The button component is used to trigger an action or event - this could be opening or closing a modal, navigating to the next page, or cancelling an action. Rather than adding
role=button to links, it’s always advisable to use the native HTML button element, as native HTML buttons provide keyboard and focus requirements by default and are best supported by assistive technologies.
This component strives to follow WCAG 2.1 (level AA) guidelines, and care must be taken to ensure this effort is maintained when the component is implemented across other projects. This section offers advice to that effect:
- A button, once focussed should be activated by using the
- The button should have an accurate description. This can be as text in the button, or by using
- If there is a description of the button, the button should have an
aria-describedbywhich matches the ID of the description.
- After the button is activated ensure the focus is set correctly based on the type of action the button performs. See W3C WAI-ARIA Authoring Practices Button Design Pattern for a list of examples.
- In some contexts, it may be necessary to indicate to the user that a button is in a pressed state, such as when a button opens a contextual menu. This can be done by adding
Note: It’s important to use button and link elements accurately. Controls with button-like behaviour (e.g. opening models, submitting forms) should be designed like buttons using the button element, and regular text links (e.g. going to an external page) should be designed like text links using the link element.