Add WCAG 2.2 AAA accessibility section to README

This commit is contained in:
Your Name
2026-02-18 22:30:48 +02:00
parent 08b9ecc1cb
commit aa2b0acd86

View File

@@ -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