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
StateSee table below
State1When state is true, I hearWhen state is false, I hear
busybusy
expandedexpandedcollapsed
disableddisabled
toggledchecked (iOS), ticked (Android)not checked (iOS), not ticked (Android)

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, buttonContact us, button, double tap to activateGood

Footnotes

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