diff --git a/README.md b/README.md index 2e3b5ca..d19690e 100644 --- a/README.md +++ b/README.md @@ -141,6 +141,54 @@ For users with limited GPU memory (e.g., 4GB cards) or those running heavy games --- +## ♿ Accessibility (WCAG 2.2 AAA) + +Whisper Voice is built to be usable by everyone. The entire interface has been engineered to meet **WCAG 2.2 AAA** — the highest tier of accessibility compliance. This is not a checkbox exercise; it is a structural commitment. + +### Color & Contrast +Every design token is calibrated for **Enhanced Contrast** (WCAG 1.4.6, 7:1 minimum): + +| Token | Ratio | Purpose | +| :--- | :--- | :--- | +| `textPrimary` #FAFAFA | ~17:1 | Body text, headings | +| `textSecondary` #ABABAB | 8.1:1 | Descriptions, hints | +| `accentPurple` #B794F6 | 7.2:1 | Interactive elements, focus rings | +| `borderSubtle` | 3:1 | Non-text contrast for borders and separators | + +### Keyboard Navigation +Full keyboard access — no mouse required: + +* **Tab / Shift+Tab**: Navigate between all interactive controls (sliders, switches, buttons, dropdowns, text fields). +* **Arrow Keys**: Navigate the Settings sidebar tabs. +* **Enter / Space**: Activate any focused control. +* **Focus Rings**: Every interactive element shows a visible 2px accent-colored focus indicator. + +### Screen Reader Support +Every component is annotated with semantic roles and descriptive names: + +* Buttons, sliders, checkboxes, combo boxes, text fields — all declare their `Accessible.role` and `Accessible.name`. +* Switches report "on" / "off" state in their accessible name. +* The loader status uses `AlertMessage` for live-region announcements. +* Settings tabs use `Tab` / `PageTab` roles matching WAI-ARIA patterns. + +### Non-Color State Indicators +Toggle switches display **I/O marks** inside the thumb (not just color changes), ensuring state is perceivable without color vision (WCAG 1.4.1). + +### Target Sizes +All interactive controls meet the **24px minimum** target size (WCAG 2.5.8). Slider handles, buttons, switches, and nav items are all comfortably clickable. + +### Reduced Motion +A **Reduce Motion** toggle (Settings > Visuals) disables all decorative animations: + +* Shader effects (gradient blobs, glow, CRT scanlines, rainbow waveform) +* Particle systems +* Pulsing animations (mic button, recording timer, border) +* Loader logo pulse and progress shimmer + +The system also respects the **Windows "Show animations" preference** via `SystemParametersInfo` detection. Essential information (recording state, progress bars, timer text) remains fully functional. + +--- + ## 🛠️ Deployment ### 📥 Installation