Skip to main content

Button

Guidelines: Accessibility Label, Accessibility Role, Accessibility State

For any component that leads to an internal screen, the button accessibility role should be used.

Screen ReaderI hear
LabelPurpose is clear matches visible label
Rolebutton
State1
busybusy
expandedexpanded
disableddisabled
toggledchecked/ticked

Testing

Procedures

  1. Turn on a Screen Reader.
  2. Move focus to the button.
  3. Evaluate whether the label adequately and uniquely describes the component and clearly communicates its function.
  4. Verify whether the active state is announced appropriately.

Outcome

Ensure all the following checks are true:

  • The label is clear and understandable.
  • The component is announced as a "button" by the screen reader.
  • Any state of the component, such as ticked, disabled, etc., is announced by the screen reader.

Example

VoiceOverTalkback
Contact us, button, double tap to activateContact us, button, double tap to activateGood

  1. In some cases, Talkback announces the accessibility state before the label.