[Web] Accessibility Mode: Voice Commands

[delos0]

Accessibility Mode: Voice Commands — Web App

Parent issue: #286

Description

Implement voice command mode for the MapCess web frontend (React + Tailwind CSS v4). Using the browser's Web Speech API, users will be able to navigate the app, trigger searches, and interact with key UI elements entirely through voice.

Feature / Task Details

• Integrate the Web Speech API (SpeechRecognition) for voice input
• Support voice commands for core flows:
  • Search for accessible locations ("find accessible locations near me")
  • Map navigation ("zoom in", "zoom out", "go to [location]")
  • Report submission ("report accessibility issue here")
  • Route planning ("navigate to [location]")
• Add a microphone toggle button in the accessibility settings and/or navigation bar
• Show a visual listening indicator (animated mic icon, ARIA live region) when recording
• Respect the prefers-reduced-motion media query for animations
• Retrieve voice mode preference from the backend on login; persist changes via the accessibility preferences API
• Ensure all voice-triggered actions are also accessible via keyboard for fallback

Deliverables

• Web Speech API integration in the React app
• Voice command handler mapping commands to existing app actions
• Microphone toggle UI control with visual feedback
• Integration with the backend accessibility preferences API

Acceptance Criteria

• Voice command mode can be enabled/disabled from accessibility settings
• Voice commands correctly trigger search, map navigation, report, and route flows
• Listening indicator is shown while recording
• Preference is saved to backend and persists across sessions
• Works on Chrome and Edge (primary Web Speech API support)
• Graceful fallback message shown on unsupported browsers
• ARIA live regions announce command recognition results
• All tests pass
• Documentation updated (if applicable)

Deadline

01.05.2026

Notes

Web Speech API is not available in all browsers — implement a feature-detection check and show a clear unsupported-browser notice. Coordinate with the backend team on the accessibility preferences API contract before integrating.