Tabs

How to test a tabs

Gherkin Condensed

Given that I am on a screen with a tabs

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 any 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)
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 tab group buttons
Spacebar or enter	Activates the button

2 Mobile screenreader gestures

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

3 Screenreader output

Reads	I hear
Name	Its purpose is clear and matches any 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)

4 Device settings

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

Usage

Tabs organize content across different screens and views

People should be able to:

Undertake actions or invoke navigation to a new destination with assistive tech
Select an action or destination from an off screen tab with assistive tech
main-contenttain access of primary actions when the content is in a scrolled state

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