Button - Apple iOS app accessibility testing checklist

How to test a button

Gherkin Condensed

Given that I am on a screen with a button

1 Keyboard only

WHEN I use the ctrl + tab key or arrow key to move focus to a button I SEE focus is visually indicated (strongly if high contrast enabled)
Then when I use the spacebar to activate the button I SEE the action occurs

2 VoiceOver 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 (dimmed, 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
When I use Increased contrast I SEE focus outline becomes high contrast

1 Keyboard actions

When I use	I see/hear
Cntrl+tab or arrow keys	Focus visibly moves to the button
Spacebar	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 (dimmed, selected, etc)

4 Device settings

When I use	I see
Text resize	Text can resize up to 200% without losing information
Increased contrast	Focus outline becomes high contrast

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.

Apple HIG

Apple HIG overview

iOS Button