Skip to main content

Bottom Tab Navigator

Tab itemI seeI hear
SelectedYes: Is visually clear that the tab is activeYes: The Screen Reader reads the "selected" state
LabelPurpose is clear and matches visible label
RoleThe role: tab
Talkback1[tab index] of [total]

Testing

Procedures

  1. Turn on a Screen Reader.
  2. Move focus to the Tab navigator.
  3. Evaluate whether the label adequately and uniquely describes the component and clearly communicates its function.
  4. Verify whether the active state is announced appropriately.

Outcome

Ensure all the following checks are true:

  • The label is clear and understandable.
  • The component is announced as a "tab" by the screen reader.
  • The selected tab is announced as "Selected" by the screen reader.

Example

Voice OverTalkBack
selected, Home, tabselected, Home, tab 1 of 3
Video, tabVideo, tab 2 of 3, double-tap to select
User, tabUser, tab 2 of 3, double-tap to select

Footnotes

  1. This behaviour is inherent only to Android.