Accessible Bottom Navigation
Component Detail
Description
Custom semantics layer over the app's five-tab bottom navigation bar ensuring each tab exposes its label, selected state, and tab index to VoiceOver and TalkBack. Manages focus restoration when returning to a previously visited tab and announces tab switches via live region.
accessible-bottom-navigation
Summaries
Navigation is the most frequently used interface element in any mobile application, and for users relying on VoiceOver or TalkBack, a poorly labeled bottom navigation bar can make the entire app effectively unusable. The Accessible Bottom Navigation component ensures that every one of the app's five primary navigation tabs communicates its label, current selection state, and position within the tab set to assistive technology users — exactly the information a sighted user gets at a glance. This eliminates a critical accessibility barrier that would otherwise exclude users with visual impairments from the app's core navigation flow. Delivering this correctly supports regulatory compliance, improves accessibility audit scores, and demonstrates inclusive product design that builds user loyalty among disability communities and the organizations that serve them.
Accessible Bottom Navigation carries high complexity because it must handle focus restoration across tab switches — a stateful concern that interacts with each tab's individual navigation stack. It depends on both `live-region-announcer` and `semantics-wrapper-widget`, meaning both must be complete and stable before integration work begins. The component must be thoroughly tested across five distinct tabs, each with its own focus history, and across both iOS VoiceOver and Android TalkBack, which have different swipe gesture models and announcement formats. Allocate specific QA time for edge cases including rapid tab switching, app backgrounding and return, and deep-link navigation that bypasses the tab bar entirely.
Since this wraps the global navigation shell, any regression here affects all users, making it a high-visibility delivery risk. A phased rollout with feature flagging is recommended.
Accessible Bottom Navigation builds a custom semantics overlay on top of the existing `BottomNavigationBar` widget rather than replacing it, using `semantics-wrapper-widget` to annotate each tab with `SemanticsProperties` including `label`, `isSelected`, `hint`, and custom indexing data for positional announcements. `buildAccessibleTabBar(tabs)` iterates the tab definitions and wraps each with a `Semantics` node exposing `isSelected` tied to the current index state. `announcTabChange(tabLabel, index, total)` delegates to `live-region-announcer.announcePolite()` with a formatted string following the VoiceOver/TalkBack convention of 'Label, tab N of M'. Focus restoration is implemented via a `Map
Directional swipe hints are set via `setTabHint(index, hint)` which updates the `Semantics.hint` for gesture discovery. State management integrates with the app's existing router/tab controller via `onTabSelected` callbacks.
Responsibilities
- Expose tab labels, positions, and selected state to assistive technology
- Announce tab change with label and position (e.g., 'Contacts, tab 2 of 5')
- Restore focus to the last focused element when a tab is revisited
- Handle swipe gestures accessibly with directional hints
Interfaces
buildAccessibleTabBar(tabs)
onTabSelected(index, callback)
announcTabChange(tabLabel, index, total)
restoreFocus(tabIndex)
setTabHint(index, hint)
Relationships
Dependencies (2)
Components this component depends on