Add WCAG 2.2 AAA accessibility section to README
This commit is contained in:
48
README.md
48
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
|
||||
|
||||
Reference in New Issue
Block a user