Use the Navigation Shell with a Screen Reader
The Navigation Shell Widget and Bottom Navigation Bar are built using Flutter's Accessible Widget Library with semantic labels on all interactive elements. The active tab is announced with its name and 'selected' state. The hamburger menu icon is labeled 'Open navigation menu'. Drawer items include their name and 'link' role. Navigation transitions announce the destination screen name to the screen reader. Sensitive field regions emit audio warnings as required by the accessibility spec. All touch targets in the navigation shell meet the minimum 44x44pt accessible tap target size.
User Story
Acceptance Criteria
- Given VoiceOver is enabled on iOS, when the user focuses on the bottom navigation bar, then each tab is announced as '[Tab name], tab, [selected/not selected]'
- Given JAWS is active, when the user navigates to the hamburger menu button, then it is announced as 'Open navigation menu, button'
- Given a screen reader is active, when the user activates a tab or drawer item, then the newly displayed screen title is announced immediately upon navigation
- Given VoiceOver is enabled, when the user swipes through the bottom nav tabs, then all five tabs are reachable via swipe gesture and activation keys without requiring visual reference
- Given the system has reduced-motion accessibility settings enabled, when the navigation shell performs a screen transition, then animations are suppressed or minimized to a simple crossfade
- Given any navigation element in the shell, when rendered, then all touch targets are at least 44x44 logical pixels
Business Value
Screen reader compatibility is a MUST HAVE requirement identified by Blindeforbundet (VoiceOver/JAWS support) and relevant to all three organizations. Visually impaired peer mentors who cannot independently use the navigation shell are entirely excluded from the application. Accessible navigation is a legal obligation under WCAG 2.2 AA and directly affects the organizations' ability to comply with Bufdir grant requirements that mandate inclusive digital services.