Usage
Tab bars use bar items to navigate between mutually exclusive panes of content in the same view.
Tab bar
How to test a tab bar
Given that I am on a screen with a tab bar
1 Keyboard
-
WHEN I use the arrow keys or ctrl + tab to move focus to a tab I SEE focus is strongly visually indicated
-
Then when I use the spacebar to activate the tab I SEE the action occurs
2
VoiceOver
screenreader
-
WHEN I use a screenreader AND I swipe to focus on a button input
- I HEAR its purpose is clear and matches any visible label
- I HEAR the tab identifies itself as a tab
- I HEAR the tab identifies its index (ex: 2 of 5)
- I HEAR the tab expresses its state (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 |
|---|---|
| Arrow keys or ctrl + tab | Focus visibly moves to the first tab |
| Spacebar | Activates the tab |
2 Mobile screenreader gestures
| When I use | I hear |
|---|---|
| Swipe | Focus moves to the tab, expresses its name, role, state |
| Doubletap | Activates the tab |
3 Screenreader output
| Reads | I hear |
|---|---|
| Name | Its purpose is clear and matches any visible label |
| Role | The tab identifies itself as a tab |
| Group | The tab identifies its index (ex: 2 of 5) |
| State | The tab expresses its state (selected) |
4 Device settings
| When I use | I see |
|---|---|
| Text resize | Text can resize up to 200% without losing information |