Accessibility & Offline Design

Relevant source files

The following files were used as context for generating this wiki page:

• artifacts/mobile/context/AccessibilityContext.tsx
• artifacts/mobile/components/OfflineBanner.tsx
• artifacts/mobile/components/KeyboardAwareScrollViewCompat.tsx
• artifacts/mobile/hooks/useNetworkStatus.ts
• replit.md
• attached_assets/Pasted-The-goal-of-the-application-is-to-give-caregivers-patie_1773648532398.txt

The Hospice Roadmap application is designed to be a "trusted mobile app" that remains functional and usable during high-stress situations, even when internet connectivity is compromised. The design philosophy acknowledges that users may be emotionally overwhelmed, tired, or unfamiliar with medical terminology, necessitating an interface that prioritizes simplicity, reassurance, and clarity.

The core pillars of the system's resilience include a robust accessibility framework—providing configurable font scales and high-contrast modes—and a "critical guidance" offline model. This ensures that essential components like the emergency card, journey stages, and medical guidance scenarios remain available to caregivers at all times.

Sources: replit.md, attached_assets/Pasted-The-goal-of-the-application-is-to-give-caregivers-patie_1773648532398.txt

Accessibility Framework

The application utilizes a dedicated AccessibilityContext to manage user preferences for visual and interaction needs. This context is persisted locally via AsyncStorage, allowing user settings to survive app restarts.

Key Components and Logic

• Font Scaling: Supports dynamic font scale adjustments (0.8x to 1.5x) to assist users with visual impairments.
• High Contrast Mode: A boolean toggle that triggers a "high-contrast" design system, ensuring sufficient color ratios for readability.
• Input Management: The KeyboardAwareScrollViewCompat component ensures that forms remain usable on mobile devices by preventing the software keyboard from obscuring input fields.

Sources: artifacts/mobile/context/AccessibilityContext.tsx:1-50, artifacts/mobile/components/KeyboardAwareScrollViewCompat.tsx, replit.md

Accessibility State Management

The following diagram illustrates how accessibility preferences are managed and applied across the application:

The diagram shows the flow of accessibility settings from user interaction through local persistence and global UI application.
Sources: artifacts/mobile/context/AccessibilityContext.tsx:20-80

Offline Design and Network Resilience

Offline availability is a critical requirement for "clinical governance" within the app. Critical guidance content must be available offline so caregivers can access instructions during emergencies without relying on server-side requests.

Network Status Monitoring

The useNetworkStatus hook provides a standardized way for the app to react to connectivity changes. It tracks whether the device is online and whether the internet is "reachable" (a distinction that helps avoid false negatives).

Feature	Behavior	Source
IsOnline	Boolean flag indicating physical network connection.	useNetworkStatus.ts
IsInternetReachable	Verification of actual server connectivity.	useNetworkStatus.ts
OfflineBanner	A global UI notification that appears when isOnline is false.	OfflineBanner.tsx
Local Persistence	Critical data (Reminders, Symptoms, Guidance) stored via AsyncStorage.	replit.md

Sources: artifacts/mobile/hooks/useNetworkStatus.ts, artifacts/mobile/components/OfflineBanner.tsx, replit.md

Offline Workflow Architecture

The following diagram represents the logic for determining data availability based on network state:

This flowchart describes the system's decision-making process for fulfilling data requests during network outages.
Sources: replit.md, artifacts/mobile/components/OfflineBanner.tsx

Technical Specifications

Data Model: Accessibility Context

Field	Type	Default	Description
fontScale	number	1	Multiplier for text sizing (0.8 to 1.5).
highContrast	boolean	false	Enables alternative high-contrast color palette.
reduceMotion	boolean	false	Disables non-essential animations for sensitivity.

Sources: artifacts/mobile/context/AccessibilityContext.tsx:8-15

Implementation of Network Hook

// artifacts/mobile/hooks/useNetworkStatus.ts
export const useNetworkStatus = () => {
  const [status, setStatus] = useState<NetworkStatus>({
    isOnline: true,
    isInternetReachable: true,
  });

  useEffect(() => {
    // Subscribes to NetInfo for real-time updates
    const unsubscribe = NetInfo.addEventListener(state => {
      setStatus({
        isOnline: !!state.isConnected,
        isInternetReachable: !!state.isInternetReachable,
      });
    });
    return () => unsubscribe();
  }, []);

  return status;
};

Sources: artifacts/mobile/hooks/useNetworkStatus.ts:5-25

Conclusion

The Accessibility and Offline Design of Hospice Roadmap ensures that the product remains "emotionally steady" and reliable. By providing high-contrast visual modes and preserving critical clinical guidance in offline storage, the system accommodates the reality of caregivers who may be operating under extreme stress or in areas with poor connectivity. These features are not merely additions but core architectural requirements for a healthcare product intended to be a "trusted companion" throughout the hospice journey.

Sources: attached_assets/Pasted-The-goal-of-the-application-is-to-give-caregivers-patie_1773648532398.txt, replit.md