Navigation bar

How to test a navigation bar

Gherkin Condensed

Given that I am on a screen with a navigation bar

1 Keyboard

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

2 Android screenreader

WHEN I use a screenreader AND I swipe to focus on a navigation item
- I HEAR Its purpose is clear and matches any visible label
- I HEAR Any visible label is read with the navigation item in a single swipe
- I HEAR It expresses its state (disabled, selected, etc)
Then when I doubletap with the navigation item 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 navigation item
Spacebar or enter	Activates the navigation item

2 Mobile screenreader gestures

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

3 Screenreader output

Reads	I hear
Name	Its purpose is clear and matches any visible label
Group	Any visible label is read with the navigation item 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

Navigation bars let people switch between UI views on smaller devices.

Icons inside buttons

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

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

Pitfalls

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

Material guidance

Material accessibility overview