All accessibility features have been implemented across the app. Hands free Voice Assistant.
Here's what was added:
1. Screen Reader Detection (hooks/useScreenReader.ts)
- Detects VoiceOver/TalkBack and listens for changes
2. Expo Speech "Read Aloud" Buttons
- Zone Calculator — "Describe Gauge" button reads full zone breakdown, current level, peak, and all zone descriptions
- Unleaded Zone Calculator — Same pattern for natural energy scores
- Essential Oils — "Read Aloud" per oil card + "Read All" for the entire category
- Energy Boosting — "Read Aloud" per expanded strategy
- Alertness Tracking — Speaker icon on insights reads performance summary
- Performance Optimizer — Speaker icon reads full recommendation with schedule, tips, and warnings
3. Haptic Feedback
- Added haptics to essential oils card expand/collapse, category changes, energy boosting strategy toggles, alertness entry save, and all symptom/booster selections across screens
4. accessibilityLiveRegion
- Added "polite" live regions to dynamic sections: Performance Snapshot cards on both zone calculators, optimization card on alertness tracking, and recommendation card on performance optimizer
5. Focus Management
- Auto-focuses the gauge on both zone calculators when caffeine/score data changes
- Created reusable useAccessibilityFocus hook with delayed focus support
6. Chart Audio Descriptions
- Both gauge components have comprehensive spoken descriptions covering current level, zone name, zone ranges, peak performance, and all zone definitions
7. Magic Tap & Escape (iOS)
- Magic Tap (two-finger double-tap) on gauge area triggers "Describe Gauge" read-aloud
- Escape (two-finger Z gesture) stops speech if playing, otherwise navigates back
8. Selection Announcements
- All symptom/booster toggles in Quick Add, Unleaded Quick Add, and both Zone Calculators now announce "selected"/"deselected" on toggle
- Step navigation in both Quick Add screens announces step number and label
The Accessibility Features section has been added to the Info tab on web, right after the "What's Included" card. It lists:
- Voice Describe — spoken screen summaries
- Screen Reader Support — VoiceOver/TalkBack compatibility
- Accessibility Announcements — live status updates
- Haptic Feedback — tactile interaction feedback
- Time Format Options — 12-hour/24-hour switching
- High Contrast Dark Theme — readability-focused design
- Labeled Controls & Hints — descriptive labels for assistive tech
Here's all the voice navigation currently in the app:
Quick Navigation Destinations (tap or voice):
- Home → /
- Scan → /scan
- Stats → / (same as home)
- History → /history
- Reports → /reports
- Purchases → /purchases
- Analytics → /analytics
- Trends → /trends
- Benchmarks → /benchmarks
- Advanced Reports → /advanced-reports
- Back → goes to previous screen
Voice Commands (web only via Speech Recognition):
- "go to [destination]" — e.g. "go to scan", "go to history", "go to purchases"
- "open [destination]" — e.g. "open analytics", "open trends report", "open benchmarks report"
- "go home" — navigates home
- "go back" / "back" — goes to previous screen
- "describe" — reads aloud what screen you're on and available commands
Report Aliases (alternative phrases that also work):
- Analytics: "analytics", "analytics report"
- Trends: "trends", "trend report", "trends report"
- Benchmarks: "benchmarks", "benchmark report", "benchmarks report"
- Advanced Reports: "advanced reports", "advanced report", "ai report"
Describe Button on Custom Drinks screen:
- A "Describe" / "Stop" button in the bottom-left corner that speaks a detailed description of the current screen state (active tab, drink counts, filters, search query, and available voice commands).
Voice command: Navigate to Custom Drinks
- Say: "Go to custom drinks", "drink database", "drinks library", "open drink database", etc.
- Added to the global destination aliases and quick-nav chips.
Voice commands on the Custom Drinks screen:
- Tab navigation: "show favorites", "show my drinks", "browse drinks"
- Add drink: "add drink", "new drink", "create drink"
- Filter by category: "filter by coffee", "filter by tea", "filter by energy", "filter by soda", "filter by supplement", "filter by water", "filter by other"
- Clear: "clear filter", "show all", "clear search"
- Describe: "describe" (works globally, plus the on-screen button)
- Navigation: "go back" (standard)
Voice commands added to correction popup:
- "brand [name]" — sets the brand field
- "drink type [name]" — sets the drink type field
- "caffeine [number]" — sets caffeine amount
- "calories [number]" — sets calories
- "size [text]" — sets the size
- "protein [number]" — sets protein
- "sugar [number]" — sets sugar
- "next field" / "next" — moves focus to the next input field
- "save" / "update" / "enter" / "submit" / "done" — saves the correction
- "describe" — reads current values aloud
- "try again" — rescans the drink
The "Correct Drink Information" pop-up from the history screen now has:
- Auto voice describe on open — When the correction modal opens, it automatically speaks the drink's current info and available commands.
- Voice Describe button (speaker icon) in the modal header — Tap to hear all current field values and available voice commands.
- Voice Command button (mic icon) below the form — Tap to record a voice command with these supported commands:
- "Describe" — reads all current field values
- "Brand [name]" — sets the brand field
- "Drink type [name]" — sets the drink type
- "Caffeine [number]" — sets caffeine mg
- "Calories [number]" — sets calories
- "Size [text]" — sets size
- "Protein [number]" — sets protein
- "Sugar [number]" — sets sugar
- "Save" / "Confirm" — saves manual corrections
- "Update with AI" — triggers AI correction
- "Cancel" / "Close" — dismisses the modal
Additional accessibility features:
- Scrollability for larger text.-
- Voice command button moved to top of correction popup — The voice command button and hint text are now at the top of the correction modal, right below the header and above the form fields. This keeps it accessible even when the keyboard is open.
- Voice describe button added to correction popup — A describe button (speaker icon) was added to the upper-right header area of the correction popup, next to the close button. Tapping it reads out all current field values and available voice commands.