Screen Reader Support
Feature Detail
Description
Screen Reader Support consolidates VoiceOver (iOS), JAWS (desktop/web), and sensitive field audio warnings into a unified accessibility layer for the application. The feature ensures that all interactive elements, form fields, navigation items, and dynamic content are properly labeled with semantic ARIA attributes and Flutter accessibility semantics. Special handling is implemented for sensitive personal information fields, triggering configurable audio warnings before reading private data aloud to prevent unintended disclosure in public settings.
Analysis
Screen reader support is non-negotiable for Norges Blindeforbund, whose peer mentors and contacts are visually impaired users who rely entirely on VoiceOver or JAWS for device interaction. Without this feature, the application is unusable for a significant portion of the target user base, creating legal and ethical exposure under Norwegian universal design law (likestillings- og diskrimineringsloven) and WCAG 2.2 AA requirements. The audio warning system for sensitive fields directly addresses privacy concerns raised in workshops, ensuring that names, addresses, and medical information are not inadvertently broadcast in shared or public environments. This feature also differentiates the product from generic volunteer management tools.
Implementation requires Flutter's Semantics widget tree to be configured throughout the entire widget library, including custom widgets such as AppButton, AppTextField, and navigation components. Each widget must expose meaningful labels, hints, and values via the Semantics API. Sensitive fields (epikrise content, encrypted assignment details, personal identification numbers) require a SensitiveSemantics wrapper that triggers a platform TTS warning before delegating to the system screen reader. Integration testing must include automated accessibility audits using Flutter's AccessibilityGuideline tests plus manual verification with VoiceOver on iOS and TalkBack on Android. JAWS compatibility is validated via web fallback views only.
Dependencies
Definition of Done
Components (4)
User Stories (11)
As a As a Coordinator
I want I want to use JAWS screen reader when accessing web fallback views of the application from a desktop or laptop browser, with full keyboard navigation and proper ARIA landmark regions
So that So that coordinators who rely on desktop screen readers can perform administrative tasks — such as reviewing approval queues, generating Bufdir reports, and managing bulk registrations — without being excluded from the application
- Given JAWS is active and a coordinator opens the report generation web view, when navigating via Tab key, then focus moves through all interactive controls in a logical order without skipping or trapping
- Given JAWS is active on the approval queue web view, when a new approval item is loaded dynamically, then JAWS announces the update via an ARIA-live region
- Given JAWS is active and a modal dialog opens, when focus enters the modal, then JAWS announces the dialog title and all interactive elements within it are reachable before the dialog closes
- +3 more
As a As a user
I want I want to configure my screen reader accessibility preferences — including sensitive field warning mode, custom warning text, and any organization-level accessibility overrides — and have these settings automatically applied every time I open the app, even without a network connection
So that So that I do not need to reconfigure my accessibility setup on every session and my preferences are reliably honored in offline scenarios during field visits
- Given a user has configured a custom sensitive field warning message, when the app is closed and reopened, then the custom warning message is active without requiring re-entry
- Given a user is in airplane mode, when the app launches, then accessibility preferences from the local cache are applied within 200ms of startup
- Given a user changes their warning delivery mode from audio to haptic while offline, when connectivity is restored, then the preference change is synced to the server without data loss
- +3 more
As a As a user
I want I want multi-step wizards (activity registration, event creation, expense registration) to announce the current step number, total step count, and step title when I navigate to each step, and to announce progress and completion states clearly
So that So that I maintain orientation within complex multi-step flows without needing vision to read visual step indicators, reducing the risk of abandoning a registration midway due to confusion about progress
- Given a user with VoiceOver enabled enters the activity registration wizard, when the first step loads, then VoiceOver announces 'Step 1 of 5: Select Contact'
- Given a user taps 'Next' to advance a wizard step, when the next step loads, then VoiceOver announces the new step number, total, and title within 300ms
- Given a user taps 'Next' on an incomplete wizard step, when validation fails, then focus moves automatically to the first field with an error and the error message is announced
- +3 more
As a As a user
I want I want my screen reader to automatically announce dynamic content changes — such as form validation errors, loading completion states, success or failure confirmations, and updated list content — without requiring me to manually navigate to discover them
So that So that I can complete tasks efficiently without losing my place in the interface when the app responds to my actions, and so that error states do not go unnoticed causing silent failures
- Given a user submits an activity registration form with a missing required field, when the validation error appears inline, then VoiceOver announces the specific error message within 500ms without focus shifting away from the current field
- Given a user triggers a Bufdir report generation, when the loading spinner appears and then completes, then VoiceOver announces 'Report generation started' and subsequently 'Report ready for preview' without requiring navigation
- Given the contact list refreshes after a pull-to-refresh gesture, when new items are loaded, then TalkBack announces the updated item count
- +3 more
As a As a user
I want I want to configure my screen reader accessibility preferences — including sensitive field warning mode, custom warning text, and any organization-level accessibility overrides — and have these settings automatically applied every time I open the app, even without a network connection
So that So that I do not need to reconfigure my accessibility setup on every session and my preferences are reliably honored in offline scenarios during field visits
- Given a user has configured a custom sensitive field warning message, when the app is closed and reopened, then the custom warning message is active without requiring re-entry
- Given a user is in airplane mode, when the app launches, then accessibility preferences from the local cache are applied within 200ms of startup
- Given a user changes their warning delivery mode from audio to haptic while offline, when connectivity is restored, then the preference change is synced to the server without data loss
- +3 more
As a As a user
I want I want multi-step wizards (activity registration, event creation, expense registration) to announce the current step number, total step count, and step title when I navigate to each step, and to announce progress and completion states clearly
So that So that I maintain orientation within complex multi-step flows without needing vision to read visual step indicators, reducing the risk of abandoning a registration midway due to confusion about progress
- Given a user with VoiceOver enabled enters the activity registration wizard, when the first step loads, then VoiceOver announces 'Step 1 of 5: Select Contact'
- Given a user taps 'Next' to advance a wizard step, when the next step loads, then VoiceOver announces the new step number, total, and title within 300ms
- Given a user taps 'Next' on an incomplete wizard step, when validation fails, then focus moves automatically to the first field with an error and the error message is announced
- +3 more
As a As a user
I want I want my screen reader to automatically announce dynamic content changes — such as form validation errors, loading completion states, success or failure confirmations, and updated list content — without requiring me to manually navigate to discover them
So that So that I can complete tasks efficiently without losing my place in the interface when the app responds to my actions, and so that error states do not go unnoticed causing silent failures
- Given a user submits an activity registration form with a missing required field, when the validation error appears inline, then VoiceOver announces the specific error message within 500ms without focus shifting away from the current field
- Given a user triggers a Bufdir report generation, when the loading spinner appears and then completes, then VoiceOver announces 'Report generation started' and subsequently 'Report ready for preview' without requiring navigation
- Given the contact list refreshes after a pull-to-refresh gesture, when new items are loaded, then TalkBack announces the updated item count
- +3 more
As a As a user
I want I want my screen reader to play a configurable audio warning before reading aloud any sensitive personal information field (such as names, addresses, personal identification numbers, epikrise content, or encrypted assignment details)
So that So that I am not at risk of inadvertently broadcasting private data about my contacts in public or shared environments, protecting both the contact's privacy and my own professional conduct
- Given VoiceOver is enabled and an assignment detail screen is open, when focus moves to an encrypted personal data field, then a TTS warning plays before the field content is read aloud
- Given a user has configured a custom warning message in accessibility settings, when a sensitive field is focused, then the custom warning text is used instead of the default
- Given a coordinator views a contact's personal identification number, when VoiceOver focuses that field, then the audio warning precedes the value announcement every time focus lands on it
- +3 more
As a As a user
I want I want to navigate all screens, interactive controls, form fields, and content in the app using VoiceOver (iOS), TalkBack (Android), or JAWS (web fallback) without any visual cues
So that So that visually impaired users can independently and fully operate the application, meeting their legal right to accessible digital services under Norwegian universal design law
- Given VoiceOver is enabled on iOS, when a user navigates to any screen, then all interactive elements are announced with a meaningful label and action hint (e.g., 'Register Activity, button, double-tap to activate')
- Given TalkBack is enabled on Android, when a user swipes through the activity registration wizard, then each step's fields and controls are read in logical top-to-bottom order with no skipped elements
- Given JAWS is active on a web fallback view, when a user focuses a form field, then the field label, current value, and any validation error are announced correctly
- +4 more
As a As a user
I want I want my screen reader to play a configurable audio warning before reading aloud any sensitive personal information field (such as names, addresses, personal identification numbers, epikrise content, or encrypted assignment details)
So that So that I am not at risk of inadvertently broadcasting private data about my contacts in public or shared environments, protecting both the contact's privacy and my own professional conduct
- Given VoiceOver is enabled and an assignment detail screen is open, when focus moves to an encrypted personal data field, then a TTS warning plays before the field content is read aloud
- Given a user has configured a custom warning message in accessibility settings, when a sensitive field is focused, then the custom warning text is used instead of the default
- Given a coordinator views a contact's personal identification number, when VoiceOver focuses that field, then the audio warning precedes the value announcement every time focus lands on it
- +3 more
As a As a user
I want I want to navigate all screens, interactive controls, form fields, and content in the app using VoiceOver (iOS), TalkBack (Android), or JAWS (web fallback) without any visual cues
So that So that visually impaired users can independently and fully operate the application, meeting their legal right to accessible digital services under Norwegian universal design law
- Given VoiceOver is enabled on iOS, when a user navigates to any screen, then all interactive elements are announced with a meaningful label and action hint (e.g., 'Register Activity, button, double-tap to activate')
- Given TalkBack is enabled on Android, when a user swipes through the activity registration wizard, then each step's fields and controls are read in logical top-to-bottom order with no skipped elements
- Given JAWS is active on a web fallback view, when a user focuses a form field, then the field label, current value, and any validation error are announced correctly
- +4 more