implement two-way accessibility features (speech-to-sign, customizable TTS, and screen-reader support)

[anushkakannawar]

Overview

This pull request implements a comprehensive suite of two-way accessibility (a11y) features inside the ASL Recognition interface, turning it into a complete two-way communicator for deaf, mute, and hearing users.

Key Changes

1. Two-Way Speech-to-Sign Translation Tab:
   • Added a vanilla JavaScript tab switcher in the right-hand panel (Alphabet Reference vs. Speech-to-Sign).
   • Integrated the HTML5 Web Speech API (webkitSpeechRecognition) to transcribe spoken sentences in real time.
   • Fetches corresponding ASL fingerspelling hand sign images dynamically to spell out the transcription visually with responsive cards.
2. Customizable Text-to-Speech (TTS):
   • Added a settings toggle panel next to the "Speak" control button.
   • Added sliders for Speed (Rate) and Pitch, alongside a dynamic dropdown selectors for all available browser speech synthesis voices.
3. Screen Reader Improvements:
   • Injected aria-live="polite" attributes onto the dynamic "Current Letter" and "Word" displays so screen readers announce signs as they stabilize.
   • Added aria-label tags to all action buttons to support blind navigation.
   • Introduced a visual legend showcasing keyboard shortcut bindings (A, U, R, S).

Testing & Verification

• Open the application in Google Chrome, Microsoft Edge, or Apple Safari.
• Verify that changing voice rates, pitches, and profiles adjusts speech audio when clicking "Speak".
• Go to the "Speech-to-Sign" tab, enable the microphone, speak a phrase, and confirm the ASL cards spell it out correctly.