Icon button

How to test an icon button

Gherkin Condensed

Given that I am on a screen with an icon button

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

WHEN I use a screenreader AND I swipe to focus on a button
- I HEAR Its purpose is clear
- I HEAR It identifies itself as a button
- I HEAR When applicable, a tooltip is available to help describe the icon button's purpose
- I HEAR It expresses its state (disabled, selected, etc)
Then when I doubletap with the button in focus I HEAR the action occurs

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

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

Reads	I hear
Name	Its purpose is clear
Role	It identifies itself as a button
Group	When applicable, a tooltip is available to help describe the icon button's purpose
State	It expresses its state (disabled, selected, etc)

Usage

Icon buttons help people take minor actions with one tap.

People should be able to:

Understand meaning of the icon
Navigate to and activate an icon button with assistive technology
When applicable, a tooltip is available to help describe the icon button’s purpose

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.