Button

How to test a button

Gherkin Condensed

Given that I am on a screen with a button

1 Keyboard

WHEN I use the tab key or arrow key to move focus to a button I SEE focus is visually indicated
Then when I use spacebar or enter to activate the button I SEE the action occurs

2 Android screenreader

WHEN I use a screenreader AND I swipe to focus on a button
- I HEAR Its purpose is clear and matches visible label
- I HEAR It identifies itself as a button
- I HEAR Any visible label is read with the button in a single swipe
- I HEAR It expresses its state (disabled, selected, etc)
Then when I doubletap with the button in focus I HEAR the action occurs

3 Device settings

When I use Text resize I SEE text can resize up to 200% without losing information

1 Keyboard actions

When I use	I see/hear
Tab or arrow keys	Focus visibly moves to the button
Spacebar or enter	Activates the button

2 Mobile screenreader gestures

When I use	I hear
Swipe	Focus moves to the element, expresses its name, role, state
Doubletap	Activates the button

3 Screenreader output

Reads	I hear
Name	Its purpose is clear and matches visible label
Role	It identifies itself as a button
Group	Any visible label is read with the button in a single swipe
State	It expresses its state (disabled, selected, etc)

4 Device settings

When I use	I see
Text resize	Text can resize up to 200% without losing information

Usage

A button initiates an instantaneous action.

Icons inside buttons

Decorative images inside a button also containing visible text are never read to the screen reader.

For example, when a screenreader encounters a “Send message” button with a decorative paper airplane, the icon must be ignored.

Pitfalls

Do not rely on an image’s alternative accessibility text label to name an icon button. Directly encode the name into the button component itself. The icon should be ignored by the screen reader.

Material guidance

Material accessibility overview