Button

A button triggers an action or event when activated. It can be a one-time action, such as submitting a form, or a persistent change in state, such as toggling a setting.

Buttons and links are often confused but serve different purposes. A button performs an action on the current page. A link navigates the user to a new location (See the Link page for more information).

Accessibility Features

  • The button's label must clearly describe the action the button performs.
  • Feedback from the action must be provided to screen readers.

Regular Button

A regular button triggers a one-time action when activated. Feedback from the action can be communicated, for example, in the following ways:

  1. A simple option is to change the button's label temporarily. aria-live="polite" announces the change to screen readers. Although marking an interactive control as a live region is generally not recommended, it is acceptable in this case, since screen readers may not announce changes to a label on their own.
  2. A more established option is to use a separate status message (See the Alert page for an example).

Example

Code Snippet

Toggle Button

A toggle button allows the user to switch between two distinct states. There are two ways to communicate the state to screen readers:

  1. A changing label reflects the current state or the action the button will perform next. aria-live="polite" announces the change to screen readers.
  2. aria-pressed announces the pressed or unpressed state while keeping the button label stable.

Note: a changing label and aria-pressed must not be used simultaneously as they provide conflicting information.

Example

Code Snippet