🏠 Overview › 👥 User Roles ›📖 Accessible Bottom Navigation Bar with Screen Reade...

Accessible Bottom Navigation Bar with Screen Reader Announcements

The five-tab bottom navigation bar (Home, Contacts, Add, Work, Notifications) is the primary structural navigation element of the app. For users relying on VoiceOver or TalkBack, each tab must expose correct semantic role ('tab'), state ('selected' or 'not selected'), and position ('tab 1 of 5'). The active tab badge, notification count badge on Notifications, and the centre 'Add' action button must each be individually labelled. Tab switching must trigger a live region announcement confirming the new screen name so the user is never lost.

CRITICAL story-navigation-gesture-accessibility-peer-mentor-002 5 pts
5
Story Points
Critical
Priority
Navigation & Gesture Accessibility
Feature

User Story

As a Peer Mentor (Likeperson)
I want the bottom navigation bar to be fully operable with a screen reader, with each tab announced by name, current state, and position within the tab set
So that I can switch between the Home, Contacts, Add, Work, and Notifications sections of the app without needing to see the screen or rely on visual cues alone

Acceptance Criteria

  • Given I am using VoiceOver and focus on the bottom navigation bar, when I swipe through tabs, then each tab is announced with its label, selected state, and index (e.g., 'Home, tab, selected, 1 of 5')
  • Given the Notifications tab has unread notifications, when VoiceOver focuses on it, then it announces the unread count (e.g., 'Notifications, 3 unread, tab, 2 of 5')
  • Given I activate a tab using a screen reader double-tap, when the new screen loads, then a live region announces the screen name within 500 milliseconds
  • Given I switch tabs, when the screen transitions, then keyboard/switch-access focus moves to the primary heading or first actionable element of the new tab
  • Given the Add button in the centre of the bottom bar is focused by VoiceOver, when announced, then it is labelled 'Add activity or event, button' and is not confused with a navigation tab

Business Value

Blindeforbundet explicitly requires full screen reader support as a first-class accessibility requirement. The bottom navigation bar is the most frequently used interactive element in the entire app. If it is not accessible, blind and visually impaired peer mentors cannot use any section of the app. Correct ARIA semantics and live region announcements are the minimum viable requirement to comply with WCAG 2.2 AA success criteria 4.1.2 (Name, Role, Value) and 4.1.3 (Status Messages).

Components

Navigation & Gesture Accessibility
Related Feature
Peer Mentor (Likeperson)
User Role