🏠 Overview › 🎯 Features ›🎯 Screen Reader Support

Screen Reader Support

Feature Detail

high complexity extracted Accessibility & Universal Design Confidence: 100%
6
Components
198
Shared
14
User Stories
Yes
Analyzed

Description

Full compatibility with platform screen readers (VoiceOver on iOS, TalkBack on Android) across all app screens and interactive elements. Every button, form field, list item, and navigation element must carry semantic labels, roles, and state announcements so blind and low-vision users can operate the app without visual reference. This is a hard requirement for Norges Blindeforbund whose peer mentors and contacts include blind users, and it underpins the WCAG 2.2 AA conformance target. Implementation must include custom semantics for complex widgets (activity wizard steps, bottom navigation, modal sheets), live-region announcements for async state changes, and a warning mechanism when sensitive personal data fields are read aloud in public settings.

Analysis

Business Value

Blindeforbundet cannot deploy the app without screen reader support — it is a non-negotiable prerequisite for onboarding their organisation. It also satisfies legal obligations under Norwegian universell utforming regulations and broadens the addressable user base across all four partner organisations.

Implementation Notes

Use Flutter Semantics widget and SemanticsService throughout. Audit with both VoiceOver and TalkBack on real devices. Add a configurable 'sensitive field' flag to form fields that triggers an OS-level alert before the screen reader vocalises the content. Test every navigation transition and bottom-sheet open/close for correct focus placement.

Components (204)

User Interface (2)

ui Accessible Bottom Navigation high ui Activity Wizard Step Semantics medium

Service Layer (1)

service Accessibility Audit Service high

Data Layer (1)

data Accessibility Settings Repository low

Infrastructure (2)

infrastructure Accessibility Test Harness medium infrastructure WCAG 2.2 AA Compliance Checker medium

Shared Components

These components are reused across multiple features

User Interface (59)

ui Role Switch Widget medium Shared ui Role-Aware Bottom Navigation medium Shared ui Activity Type Selection Screen low Shared ui Speech-to-Text Field Overlay medium Shared ui Receipt Capture Widget medium Shared ui Peer Mentor Single Selector low Shared ui Proxy Audit Badge Widget low Shared ui Export Period Picker low Shared ui Contact Card Widget low Shared ui Contact Search Bar low Shared ui Peer Mentor Card Widget low Shared ui Activity History List low Shared ui Multi-Chapter Affiliation Chip Widget medium Shared ui Certification Status Badge low Shared ui Duplicate Activity Warning Dialog medium Shared ui Mentor Multi-Select Widget medium Shared ui Map Filter Panel medium Shared ui Claim Status Badge low Shared ui Export Date Range Picker low Shared ui Custom Date Range Picker low Shared ui Duplicate Activity Warning Dialog low Shared ui Proxy Activity Form medium Shared ui Proxy Peer Mentor Selector medium Shared ui Expected Return Date Picker low Shared ui Pause Activation Screen low Shared ui Pause Status Indicator low Shared ui Admin KPI Stat Widget low Shared ui Organisation Hierarchy Navigator high Shared ui Bufdir Period Selector Widget low Shared ui Export History List medium Shared ui Activity Type Donut Chart medium Shared ui Monthly Activity Bar Chart medium Shared ui Statistics Period Filter Bar low Shared ui Statistics Summary Cards low Shared ui Notification Badge Widget low Shared ui Certificate Expiry Status Indicator low Shared ui Animated Stat Card Widget medium Shared ui In-App Notification Banner low Shared ui Accessible Modal Sheet Widget high Shared ui Live Region Announcer medium Shared ui Semantics Wrapper Widget medium Shared ui Sensitive Field Warning Dialog high Shared ui Confirm Before Submit Screen medium Shared ui Inline Contextual Help Widget low Shared ui Labelled Navigation Bar low Shared ui Plain Language Error Display low Shared ui Single-Action Screen Layout medium Shared ui Wizard Progress Indicator low Shared ui Accessible Text Style System medium Shared ui Accessible Touch Target Wrapper low Shared ui Contrast-Safe Color Palette Widget medium Shared ui Accessible Bottom Navigation Bar medium Shared ui Modal Close Button low Shared ui Persistent Back Button low Shared ui Vertical Scroll Container low Shared ui Organization Card Widget low Shared ui Terminology-Aware Text Widget low Shared ui FeatureGate Widget low Shared ui Chapter Switcher medium Shared

Service Layer (52)

service Authentication Service medium Shared service Authentication Session Manager medium Shared service Biometric Authentication Service medium Shared service Biometric Authentication Service medium Shared service Biometric Authentication Service medium Shared service Permission Checker Service medium Shared service Role State Manager medium Shared service No-Access Route Guard low Shared service Activity Type Metadata Resolver low Shared service Chapter Scope Resolver medium Shared service Organisation Hierarchy Resolver medium Shared service Coordinator Notification Service medium Shared service Duplicate Activity Detection Service high Shared service Mentor Filter Service low Shared service Receipt Threshold Validator low Shared service Approval Status Notification Service medium Shared service Threshold Evaluation Service medium Shared service Declaration Encryption Service high Shared service Organization Feature Flag Service low Shared service Participant Deduplication Service high Shared service Reporting Period Service medium Shared service Activity Attribution Service low Shared service Proxy Duplicate Detection Service medium Shared service Pause Management Service medium Shared service Pause Notification Service medium Shared service Admin Export Service medium Shared service Admin Row-Level Security Guard high Shared service Organisation Hierarchy Service high Shared service User Management Service high Shared service Role Access Validator low Shared service Peer Mentor Stats Aggregator medium Shared service Push Notification Dispatcher medium Shared service Notification Preference Service low Shared service Scenario Deep-Link Router medium Shared service Scenario Notification Content Builder medium Shared service Badge Criteria Integration medium Shared service Activity Summary Aggregator low Shared service Focus Management Service medium Shared service Screen Reader Detection Service medium Shared service Sensitive Field Privacy Guard high Shared service Plain Language Content Service medium Shared service Wizard State Manager medium Shared service Tab State Manager medium Shared service Organization Route Guard medium Shared service Tenant Context Service high Shared service Label Key Resolver Service low Shared service Organization Labels Notifier medium Shared service FeatureFlagProvider (Riverpod) medium Shared service Access Scope Service high Shared service Hierarchy Aggregation Service high Shared service Hierarchy Service high Shared service Unit Assignment Service medium Shared

Data Layer (33)

data Authentication Repository low Shared data Auth Token Store low Shared data Secure Session Storage low Shared data Activity Type Cache Provider medium Shared data Receipt Storage Adapter medium Shared data Proxy Contact List Provider low Shared data Contact Repository medium Shared data Contact Detail Repository medium Shared data Peer Mentor Repository low Shared data Mentor Status Repository low Shared data Contact Chapter Repository medium Shared data Contact Cache Sync Repository low Shared data Organisation Rate Configuration Repository low Shared data Multi-Organization Data Isolator medium Shared data Bufdir Aggregation Repository low Shared data Report File Storage Client low Shared data Certification Status Repository low Shared data Peer Mentor Status Repository medium Shared data Statistics Cache Manager low Shared data In-App Notification Repository low Shared data Pause Status Record Repository low Shared data Activity Aggregation Repository medium Shared data Notification Preferences Repository low Shared data Scenario Notification Repository medium Shared data Sensitive Field Configuration low Shared data Error Message Registry low Shared data Help Content Registry low Shared data Wizard Draft Repository low Shared data Design Token Provider medium Shared data Organization Repository medium Shared data Terminology Local Cache Adapter low Shared data Organization Unit Repository high Shared data Unit Assignment Repository medium Shared

Infrastructure (54)

infrastructure Keyboard-Aware Layout Utility low Shared infrastructure Supabase Auth Client low Shared infrastructure Deep Link / OAuth Redirect Handler medium Shared infrastructure Secure Storage Adapter low Shared infrastructure Supabase Session Manager medium Shared infrastructure URL Launcher Utility low Shared infrastructure Local Storage Adapter low Shared infrastructure Supabase Activity Client low Shared infrastructure Organization Labels Provider low Shared infrastructure Supabase Client low Shared infrastructure Organisation Field Config Loader medium Shared infrastructure Speech-to-Text Adapter medium Shared infrastructure File Download Handler low Shared infrastructure Duplicate Reviewed Flag Middleware low Shared infrastructure Contact RLS Query Builder low Shared infrastructure Contact Form Validator low Shared infrastructure Design Token Theme low Shared infrastructure Organization Labels Provider low Shared infrastructure Supabase Client Provider low Shared infrastructure Search Debounce Utility low Shared infrastructure Expense Type Analytics Tracker low Shared infrastructure Receipt Image Picker Integration low Shared infrastructure CSV / JSON File Generator medium Shared infrastructure Coordinator Role Guard low Shared infrastructure Nightly Job Scheduler medium Shared infrastructure Supabase RLS Policy Configuration high Shared infrastructure Export File Storage Adapter low Shared infrastructure Supabase Storage Adapter low Shared infrastructure Peer Mentor Pause Management Service medium Shared infrastructure Push Notification Service medium Shared infrastructure fl_chart Adapter medium Shared infrastructure Push Notification Service low Shared infrastructure FCM Push Notification Sender medium Shared infrastructure FCM Notification Dispatcher medium Shared infrastructure Push Notification Dispatcher medium Shared infrastructure Supabase Realtime Subscription Service medium Shared infrastructure Organisation Data Isolation Guard low Shared infrastructure Push Notification Dispatcher medium Shared infrastructure Deep Link Handler medium Shared infrastructure QR Code Generator low Shared infrastructure Share Sheet Bridge low Shared infrastructure Semantics Service Facade medium Shared infrastructure Accessibility Design Token Enforcer medium Shared infrastructure Accessible Theme Builder medium Shared infrastructure Navigation Route Configuration medium Shared infrastructure Accessibility Live Region Announcer low Shared infrastructure Feature Flag Provider low Shared infrastructure Secure Storage Adapter low Shared infrastructure Supabase RLS Tenant Scope Configurator medium Shared infrastructure Label Key Registry low Shared infrastructure Terminology Riverpod Providers low Shared infrastructure WCAG Semantics Label Resolver low Shared infrastructure Feature Flag Key Constants low Shared infrastructure RLS Policy Manager high Shared

User Stories (14)

Access Notifications and Notification Settings With a Screen Reader
high 5 pts

As a As a Peer Mentor (Likeperson)

I want to read, filter, and manage my notifications, and to configure notification preferences, using only a screen reader

So that I stay informed about assignment updates, certification reminders, and coordinator messages without being dependent on a sighted person to interpret notification content

Acceptance Criteria
  • Given the peer mentor opens the notification centre with VoiceOver, when they navigate the list, then each item is announced as '[type]: [title], [body], [time ago], [read/unread]'
  • Given the notification tab badge shows 3 unread notifications, when the screen reader is on the bottom nav, then it announces 'Notifications, 3 unread, tab, 5 of 5'
  • Given the notification filter bar has 'Assignments' selected, when the screen reader focuses on it, then it announces 'Filter: Assignments, active'
  • +3 more
View Full Story →
Receive Real-Time Spoken Announcements for Dynamic Content Changes
high 8 pts

As a As a Peer Mentor (Likeperson)

I want to hear spoken announcements when dynamic content changes on screen — such as new notifications, loading states, confirmation messages, or error alerts — without having to manually navigate to find the updated content

So that I am always aware of what is happening in the app without needing to visually scan the screen, enabling efficient and confident use of the app

Acceptance Criteria
  • Given an activity is submitted, when the success confirmation appears, then a polite live region announces 'Activity registered successfully' within 500ms of the UI update
  • Given a network error occurs during submission, when the error banner appears, then an assertive live region immediately announces the error message text
  • Given the peer mentor is on the search screen and results load, when results appear, then a polite announcement reads 'X results found' where X is the count
  • +3 more
View Full Story →
Use the Post-Session Report Form With Full Screen Reader Access
high 8 pts

As a As a Peer Mentor (Likeperson)

I want to fill in the post-session report form — including dynamic fields, the way-forward section, and any organisation-specific fields — entirely using a screen reader

So that I can document session outcomes, follow-up actions, and referrals for my contacts independently, fulfilling my formal reporting obligations without sighted assistance

Acceptance Criteria
  • Given a peer mentor opens the post-session report with VoiceOver active, when the form loads, then all fields are announced with their label and input type (e.g., 'Health status, text field, required')
  • Given a dynamic field is injected by the org-field-config-loader, when it appears, then a live region announces 'New field added: [field name]' and focus moves to it
  • Given the way-forward section is expanded, when the peer mentor navigates into it, then task input fields and the date picker are all reachable and labelled
  • +3 more
View Full Story →
Verify App Meets WCAG 2.2 AA Accessibility Standards Through Automated Audit
high 8 pts

As a As a Peer Mentor (Likeperson)

I want to be confident that the app consistently meets WCAG 2.2 AA standards across all screens, so that the screen reader experience is predictable and reliable

So that I can trust the app to work correctly with my screen reader every time I use it, without encountering unexpected unlabelled elements, broken focus order, or missing announcements

Acceptance Criteria
  • Given the accessibility-audit-service runs on a screen, when the audit completes, then it reports any elements missing labels, incorrect roles, or inadequate contrast as structured warnings
  • Given the CI pipeline runs on a pull request, when the flutter-accessibility-lint-config rules are applied, then violations are reported as build failures for WCAG 2.2 AA criteria
  • Given the accessibility-test-harness is used in an integration test, when simulating VoiceOver navigation through the activity registration wizard, then the test asserts that all 5 steps have correct step labels and focus management
  • +3 more
View Full Story →
Access Notifications and Notification Settings With a Screen Reader
high 5 pts

As a As a Coordinator

I want to read, filter, and manage my notifications, and to configure notification preferences, using only a screen reader

So that I stay informed about assignment updates, certification reminders, and coordinator messages without being dependent on a sighted person to interpret notification content

Acceptance Criteria
  • Given the peer mentor opens the notification centre with VoiceOver, when they navigate the list, then each item is announced as '[type]: [title], [body], [time ago], [read/unread]'
  • Given the notification tab badge shows 3 unread notifications, when the screen reader is on the bottom nav, then it announces 'Notifications, 3 unread, tab, 5 of 5'
  • Given the notification filter bar has 'Assignments' selected, when the screen reader focuses on it, then it announces 'Filter: Assignments, active'
  • +3 more
View Full Story →
Receive Real-Time Spoken Announcements for Dynamic Content Changes
high 8 pts

As a As a Coordinator

I want to hear spoken announcements when dynamic content changes on screen — such as new notifications, loading states, confirmation messages, or error alerts — without having to manually navigate to find the updated content

So that I am always aware of what is happening in the app without needing to visually scan the screen, enabling efficient and confident use of the app

Acceptance Criteria
  • Given an activity is submitted, when the success confirmation appears, then a polite live region announces 'Activity registered successfully' within 500ms of the UI update
  • Given a network error occurs during submission, when the error banner appears, then an assertive live region immediately announces the error message text
  • Given the peer mentor is on the search screen and results load, when results appear, then a polite announcement reads 'X results found' where X is the count
  • +3 more
View Full Story →
Use the Post-Session Report Form With Full Screen Reader Access
high 8 pts

As a As a Coordinator

I want to fill in the post-session report form — including dynamic fields, the way-forward section, and any organisation-specific fields — entirely using a screen reader

So that I can document session outcomes, follow-up actions, and referrals for my contacts independently, fulfilling my formal reporting obligations without sighted assistance

Acceptance Criteria
  • Given a peer mentor opens the post-session report with VoiceOver active, when the form loads, then all fields are announced with their label and input type (e.g., 'Health status, text field, required')
  • Given a dynamic field is injected by the org-field-config-loader, when it appears, then a live region announces 'New field added: [field name]' and focus moves to it
  • Given the way-forward section is expanded, when the peer mentor navigates into it, then task input fields and the date picker are all reachable and labelled
  • +3 more
View Full Story →
Verify App Meets WCAG 2.2 AA Accessibility Standards Through Automated Audit
high 8 pts

As a As a Coordinator

I want to be confident that the app consistently meets WCAG 2.2 AA standards across all screens, so that the screen reader experience is predictable and reliable

So that I can trust the app to work correctly with my screen reader every time I use it, without encountering unexpected unlabelled elements, broken focus order, or missing announcements

Acceptance Criteria
  • Given the accessibility-audit-service runs on a screen, when the audit completes, then it reports any elements missing labels, incorrect roles, or inadequate contrast as structured warnings
  • Given the CI pipeline runs on a pull request, when the flutter-accessibility-lint-config rules are applied, then violations are reported as build failures for WCAG 2.2 AA criteria
  • Given the accessibility-test-harness is used in an integration test, when simulating VoiceOver navigation through the activity registration wizard, then the test asserts that all 5 steps have correct step labels and focus management
  • +3 more
View Full Story →
Receive Spoken Warnings Before Sensitive Fields Are Read Aloud
critical 8 pts

As a As a Peer Mentor (Likeperson)

I want to hear a spoken warning before the screen reader reads out sensitive personal data such as names, addresses, or medical details

So that I can prevent unintended disclosure of confidential contact information in public environments, maintaining privacy and trust with my contacts

Acceptance Criteria
  • Given a contact detail screen with a phone number field, when the screen reader moves focus to it, then a live region announces 'Sensitive information: confirm to read' before the number is read
  • Given the peer mentor confirms the sensitive field warning (e.g., double-tap), when the field content is read, then the full value is announced without the warning repeating
  • Given the sensitive-field-configuration has 'email' marked as sensitive, when a screen reader focuses on an email field, then the warning is triggered for that field
  • +3 more
View Full Story →
Navigate the App Fully Using a Screen Reader
critical 13 pts

As a As a Peer Mentor (Likeperson)

I want to navigate all screens in the app using VoiceOver or TalkBack without relying on visual cues

So that I can use the app independently despite being visually impaired, fulfilling my peer support responsibilities without assistance

Acceptance Criteria
  • Given a peer mentor with VoiceOver enabled, when they open the app, then the focus is placed on the first meaningful element on the screen with a correct label read aloud
  • Given any screen in the app, when navigating with swipe-right (next element), then every interactive control has a descriptive accessibility label and a role (button, heading, link, etc.)
  • Given a bottom navigation bar, when a peer mentor selects a tab with VoiceOver, then the selected state and tab name are announced (e.g., 'Home, tab, selected, 1 of 5')
  • +3 more
View Full Story →
Register an Activity Using Only a Screen Reader
critical 13 pts

As a As a Peer Mentor (Likeperson)

I want to complete the full activity registration wizard from start to finish using only VoiceOver or TalkBack without needing sighted assistance

So that I can independently log my peer support sessions, ensuring my work is recorded accurately and counts toward organisational reporting

Acceptance Criteria
  • Given a peer mentor opens the activity registration bottom sheet with VoiceOver active, when the first step loads, then VoiceOver announces 'Activity Registration, Step 1 of 5: Select activity type'
  • Given the peer mentor is on the date step, when they interact with the date picker, then the current selected date and available navigation controls are announced with their values
  • Given the peer mentor advances to the next step, when the new step loads, then focus automatically moves to the step heading and the step number is announced
  • +3 more
View Full Story →
Receive Spoken Warnings Before Sensitive Fields Are Read Aloud
critical 8 pts

As a As a Coordinator

I want to hear a spoken warning before the screen reader reads out sensitive personal data such as names, addresses, or medical details

So that I can prevent unintended disclosure of confidential contact information in public environments, maintaining privacy and trust with my contacts

Acceptance Criteria
  • Given a contact detail screen with a phone number field, when the screen reader moves focus to it, then a live region announces 'Sensitive information: confirm to read' before the number is read
  • Given the peer mentor confirms the sensitive field warning (e.g., double-tap), when the field content is read, then the full value is announced without the warning repeating
  • Given the sensitive-field-configuration has 'email' marked as sensitive, when a screen reader focuses on an email field, then the warning is triggered for that field
  • +3 more
View Full Story →
Navigate the App Fully Using a Screen Reader
critical 13 pts

As a As a Coordinator

I want to navigate all screens in the app using VoiceOver or TalkBack without relying on visual cues

So that I can use the app independently despite being visually impaired, fulfilling my peer support responsibilities without assistance

Acceptance Criteria
  • Given a peer mentor with VoiceOver enabled, when they open the app, then the focus is placed on the first meaningful element on the screen with a correct label read aloud
  • Given any screen in the app, when navigating with swipe-right (next element), then every interactive control has a descriptive accessibility label and a role (button, heading, link, etc.)
  • Given a bottom navigation bar, when a peer mentor selects a tab with VoiceOver, then the selected state and tab name are announced (e.g., 'Home, tab, selected, 1 of 5')
  • +3 more
View Full Story →
Register an Activity Using Only a Screen Reader
critical 13 pts

As a As a Coordinator

I want to complete the full activity registration wizard from start to finish using only VoiceOver or TalkBack without needing sighted assistance

So that I can independently log my peer support sessions, ensuring my work is recorded accurately and counts toward organisational reporting

Acceptance Criteria
  • Given a peer mentor opens the activity registration bottom sheet with VoiceOver active, when the first step loads, then VoiceOver announces 'Activity Registration, Step 1 of 5: Select activity type'
  • Given the peer mentor is on the date step, when they interact with the date picker, then the current selected date and available navigation controls are announced with their values
  • Given the peer mentor advances to the next step, when the new step loads, then focus automatically moves to the step heading and the step number is announced
  • +3 more
View Full Story →