Cognitive Accessibility
Feature Detail
Description
Cognitive Accessibility merges simplified navigation design, stroke patient UX considerations, and low cognitive load principles into a coherent set of UX patterns applied across the entire application. The feature governs interaction design decisions such as step-by-step wizard flows, explicit back buttons (no swipe-only navigation), vertical scroll-first layouts, minimal simultaneous choices, and progressive disclosure of complexity. A dedicated cognitive mode setting can further reduce UI density for users identified as needing maximum simplicity.
Analysis
NHF explicitly identified stroke survivors and people with cognitive impairments as a primary user group, making cognitive accessibility a first-class product requirement rather than an enhancement. Poor cognitive accessibility leads directly to the under-reporting problem all three organizations identified as their core pain point: if the interface is confusing, peer mentors simply do not register their activities. By embedding low cognitive load as a design principle, the application reduces friction at the most critical user journey step. Coordinator and admin users also benefit from reduced error rates and support requests. Compliance with WCAG 2.2 AA success criteria 2.4 (Navigable) and 3.3 (Input Assistance) is required for public sector-funded organizations.
Cognitive accessibility is implemented as a design constraint applied during component development rather than as a bolt-on feature. Key technical decisions include: using StatefulShellRoute for tab state preservation so users never lose context on navigation; requiring explicit back buttons on all non-root screens via the shared PageHeader widget; limiting wizard steps to one decision per screen; providing visible step progress indicators (StepProgressWidget); and enforcing a maximum of five items in any single selection list before pagination or search is introduced. A CognitiveModeService reads user preferences from AccessibilityPreferencesRepository and exposes a simplified layout flag consumed by screen generators to conditionally hide secondary actions and metadata. All flows must be validated against a stroke patient persona checklist before release.
Dependencies
Definition of Done
Components (4)
User Stories (13)
As a As a user
I want I want selection lists throughout the app to show no more than five items at once before introducing pagination or search, so that I am never overwhelmed by a wall of options
So that So that choosing from a list remains a low-effort, low-error task even for users with reduced working memory or attention capacity, preventing the choice paralysis that leads to abandoned registrations
- Given cognitive mode is enabled and a selection list contains more than five items, when the list renders, then only the first five items are visible and a 'Show more / Search' control is present
- Given cognitive mode is enabled and a user activates the search control on a long list, when they type a query, then the list filters in real time and shows only matching items
- Given cognitive mode is disabled, when a selection list renders, then all items are displayed without the five-item constraint
- +2 more
As a As a user
I want I want selection lists throughout the app to show no more than five items at once before introducing pagination or search, so that I am never overwhelmed by a wall of options
So that So that choosing from a list remains a low-effort, low-error task even for users with reduced working memory or attention capacity, preventing the choice paralysis that leads to abandoned registrations
- Given cognitive mode is enabled and a selection list contains more than five items, when the list renders, then only the first five items are visible and a 'Show more / Search' control is present
- Given cognitive mode is enabled and a user activates the search control on a long list, when they type a query, then the list filters in real time and shows only matching items
- Given cognitive mode is disabled, when a selection list renders, then all items are displayed without the five-item constraint
- +2 more
As a As a Coordinator
I want I want to see which peer mentors in my organization have cognitive accessibility mode enabled so that I can provide appropriate support and understand their interaction preferences when assisting them
So that So that I can tailor my communication and training to their needs, offer appropriate help with app tasks if needed, and identify peer mentors who may require proxy registration assistance due to cognitive accessibility barriers
- Given a coordinator is viewing the member overview, when they filter or sort by accessibility settings, then peer mentors with cognitive mode enabled are visually indicated
- Given a coordinator selects a peer mentor's profile, when they view the accessibility section, then they can see whether cognitive mode is currently active for that peer mentor
- Given a coordinator's organizational scope, when accessibility data is fetched, then only peer mentors within the coordinator's organization are included — no cross-organization data leakage
- +2 more
As a As a user
I want I want to see a visible step progress indicator at the top of every multi-step wizard screen showing my current step number and total step count
So that So that I always know exactly how far I have progressed in a process and how many steps remain, reducing anxiety about getting lost and giving me confidence to continue
- Given a user has opened any multi-step wizard, when the first screen loads, then a step progress indicator is visible at the top showing 'Step 1 of N' in large, high-contrast text
- Given a user is on step 2 of a 4-step wizard, when they view the progress indicator, then it clearly shows '2 of 4' or equivalent and visually marks completed steps as distinct from remaining steps
- Given cognitive mode is enabled, when the step progress widget renders, then the text size and contrast ratio meet WCAG 2.2 AA requirements (minimum 4.5:1 for normal text)
- +2 more
As a As a user
I want I want every non-root screen to display a visible back button so that I can always return to the previous screen by tapping a clearly labeled control
So that So that I never lose my place in the app due to accidental swipes or confusion about how to go back, which is especially important for users who are unfamiliar with swipe gestures or who have motor impairments
- Given a user is on any non-root screen (i.e., not the main tab destinations), when the screen renders, then a back button is visible in the page header in a consistent location
- Given a user taps the back button, when the navigation handler fires, then the app navigates to the previous screen in the route stack without data loss
- Given a user is using cognitive mode, when they arrive on a wizard step screen, then the back button is always visible above the fold without scrolling
- +2 more
As a As a user
I want I want my cognitive accessibility settings to be saved to my profile and automatically restored every time I open the app
So that So that I do not need to re-configure accessibility settings on every session, which would itself be a cognitively demanding task that undermines the purpose of the feature
- Given a user has enabled cognitive mode and then fully closes and reopens the app, when the app initializes, then cognitive mode is active before the home screen renders
- Given a user signs in on a second device, when their preferences load from the backend, then cognitive mode state is consistent with what they set on their primary device
- Given a user disables cognitive mode and closes the app, when they reopen it, then cognitive mode is inactive and the standard layout is shown
- +2 more
As a As a user
I want I want the app navigation to present a simplified layout that limits simultaneous choices and surfaces only the most critical actions when cognitive mode is active
So that So that I am never overwhelmed by too many options at once and can confidently identify what to tap next, even with reduced working memory or decision-making capacity
- Given cognitive mode is enabled, when a user views the main navigation, then no more than five primary navigation destinations are visible simultaneously
- Given cognitive mode is enabled, when a user is on any non-root screen, then an explicit back button is always visible and tappable — swipe-to-go-back is never the only navigation option
- Given cognitive mode is enabled, when a navigation screen loads, then secondary actions and metadata are hidden by default and revealed only on explicit user request
- +2 more
As a As a user
I want I want to see a visible step progress indicator at the top of every multi-step wizard screen showing my current step number and total step count
So that So that I always know exactly how far I have progressed in a process and how many steps remain, reducing anxiety about getting lost and giving me confidence to continue
- Given a user has opened any multi-step wizard, when the first screen loads, then a step progress indicator is visible at the top showing 'Step 1 of N' in large, high-contrast text
- Given a user is on step 2 of a 4-step wizard, when they view the progress indicator, then it clearly shows '2 of 4' or equivalent and visually marks completed steps as distinct from remaining steps
- Given cognitive mode is enabled, when the step progress widget renders, then the text size and contrast ratio meet WCAG 2.2 AA requirements (minimum 4.5:1 for normal text)
- +2 more
As a As a user
I want I want every non-root screen to display a visible back button so that I can always return to the previous screen by tapping a clearly labeled control
So that So that I never lose my place in the app due to accidental swipes or confusion about how to go back, which is especially important for users who are unfamiliar with swipe gestures or who have motor impairments
- Given a user is on any non-root screen (i.e., not the main tab destinations), when the screen renders, then a back button is visible in the page header in a consistent location
- Given a user taps the back button, when the navigation handler fires, then the app navigates to the previous screen in the route stack without data loss
- Given a user is using cognitive mode, when they arrive on a wizard step screen, then the back button is always visible above the fold without scrolling
- +2 more
As a As a user
I want I want my cognitive accessibility settings to be saved to my profile and automatically restored every time I open the app
So that So that I do not need to re-configure accessibility settings on every session, which would itself be a cognitively demanding task that undermines the purpose of the feature
- Given a user has enabled cognitive mode and then fully closes and reopens the app, when the app initializes, then cognitive mode is active before the home screen renders
- Given a user signs in on a second device, when their preferences load from the backend, then cognitive mode state is consistent with what they set on their primary device
- Given a user disables cognitive mode and closes the app, when they reopen it, then cognitive mode is inactive and the standard layout is shown
- +2 more
As a As a user
I want I want the app navigation to present a simplified layout that limits simultaneous choices and surfaces only the most critical actions when cognitive mode is active
So that So that I am never overwhelmed by too many options at once and can confidently identify what to tap next, even with reduced working memory or decision-making capacity
- Given cognitive mode is enabled, when a user views the main navigation, then no more than five primary navigation destinations are visible simultaneously
- Given cognitive mode is enabled, when a user is on any non-root screen, then an explicit back button is always visible and tappable — swipe-to-go-back is never the only navigation option
- Given cognitive mode is enabled, when a navigation screen loads, then secondary actions and metadata are hidden by default and revealed only on explicit user request
- +2 more
As a As a user
I want I want to enable a cognitive accessibility mode in my settings so that the interface reduces its density, hides secondary actions, and presents only the most essential information on each screen
So that So that I can use the app comfortably despite cognitive impairments, stroke-related memory challenges, or a general preference for low-complexity interfaces, without being overwhelmed by options or information
- Given a user is on the Settings screen, when they locate the Accessibility section and toggle Cognitive Mode on, then the app immediately re-renders visible screens in simplified layout without requiring a restart
- Given cognitive mode is enabled, when the user navigates to any screen, then secondary actions, metadata panels, and decorative elements are hidden and only primary actions are visible
- Given cognitive mode is enabled, when the user closes and reopens the app, then cognitive mode remains active and the simplified layout persists across sessions
- +2 more
As a As a user
I want I want to enable a cognitive accessibility mode in my settings so that the interface reduces its density, hides secondary actions, and presents only the most essential information on each screen
So that So that I can use the app comfortably despite cognitive impairments, stroke-related memory challenges, or a general preference for low-complexity interfaces, without being overwhelmed by options or information
- Given a user is on the Settings screen, when they locate the Accessibility section and toggle Cognitive Mode on, then the app immediately re-renders visible screens in simplified layout without requiring a restart
- Given cognitive mode is enabled, when the user navigates to any screen, then secondary actions, metadata panels, and decorative elements are hidden and only primary actions are visible
- Given cognitive mode is enabled, when the user closes and reopens the app, then cognitive mode remains active and the simplified layout persists across sessions
- +2 more