Floating action button

How to test a floating action button

Gherkin Condensed

Given that I am on a screen with a floating action 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
- 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
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

Floating action buttons (FABs) help people take primary actions.

Use a FAB for the most common or important action on a screen
Make sure the icon in a FAB is clear and understandable
FABs persist on the screen when content is scrolling

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 button with a decorative paper airplane and the text “Send message”, 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.