Components
Button
Button allows users to perform actions.
What you need to check
Button text must clearly describe the action.
Avoid vague text such as “Click here”.
The accessible name must match the visible text.
If you use aria-label or other techniques that override the accessible name, it must still match the visible text.
Icon in a button with text should be decorative and hidden from screen readers.
The icon should not be announced if the text already describes the action.
Icon-only button must have an accessible name that describes the action.
This applies when the button consists only of an icon.
Using a loader in button must provide understandable feedback to screen reader users.
If the button shows a loading indicator, remember to add aria-busy="true" to indicate that an action is in progress.
In addition, you must consider how status is communicated, for example by updating the text.
Avoid using disabled buttons
We avoid using disabled (disabled) buttons because they can be difficult to perceive. Some users will not understand what the button means or why it is not clickable. An active button that displays an error message when the user clicks it provides a better user experience in most cases. Nav has a good explanation of why disabled states are problematic (nav.no) and what alternatives exist.
If you still need to use a disabled button:
- Ensure that all users both notice and understand that the button exists, that it is disabled, and why.
- Consider using supporting text that is always visible when the button is disabled.
- If it makes sense that the button should still receive keyboard focus,
or if it is important for other reasons to preserve the tab order, usearia-disabledinstead ofdisabled.
Remember to manually prevent callback functions (for exampleonClick) from running.