Button

What you need to check

Button text must clearly describe the action.

Avoid vague text such as “Click here”.

WCAG: 2.4.4 Link purpose (in context)

---

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.

WCAG: 2.5.3 Label in Name

---

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.

WCAG: 1.1.1 Non-text content

---

Icon-only button must have an accessible name that describes the action.

This applies when the button consists only of an icon.

WCAG: 4.1.2 Name, role, value

---

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.

WCAG: 4.1.3 Status messages

---

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, use aria-disabled instead of disabled.
  Remember to manually prevent callback functions (for example onClick) from running.

Loading and aria-disabled do not disable onClick

Note: Neither loading="true" nor aria-disabled="true" automatically prevents the button from triggering onClick. These attributes only affect appearance and accessibility, not functionality.

If the button should not be able to perform actions while it is loading or disabled, you must add logic yourself to prevent the callback function from running. For example:

Edit this page on github.com (opens in a new tab)