Add WCAG 2.1 Level AA accessibility across all components
This commit is contained in:
20
README.md
20
README.md
@@ -21,6 +21,7 @@
|
||||
<img src="https://img.shields.io/badge/svelte-5-FF3E00?style=flat-square&logo=svelte&logoColor=white" alt="Svelte 5" />
|
||||
<img src="https://img.shields.io/badge/rust-2021-000000?style=flat-square&logo=rust&logoColor=white" alt="Rust" />
|
||||
<img src="https://img.shields.io/badge/tailwind-v4-06B6D4?style=flat-square&logo=tailwindcss&logoColor=white" alt="Tailwind v4" />
|
||||
<img src="https://img.shields.io/badge/WCAG_2.1-AA-228B22?style=flat-square" alt="WCAG 2.1 AA" />
|
||||
</p>
|
||||
|
||||
<p align="center">
|
||||
@@ -239,6 +240,23 @@ Native Windows toast notifications for:
|
||||
|
||||
<br />
|
||||
|
||||
### ♿ Accessibility
|
||||
|
||||
Core Cooldown targets **WCAG 2.1 Level AA** compliance. A break timer for preventing repetitive strain injury should be usable by everyone - including those who already live with disabilities.
|
||||
|
||||
| | Feature | Description |
|
||||
|:--|:--------|:------------|
|
||||
| ⌨️ | **Full keyboard navigation** | Every control reachable and operable via keyboard alone. Arrow keys adjust color pickers, steppers, and time spinners. Tab/Shift+Tab cycles through all interactive elements. |
|
||||
| 🔍 | **Visible focus indicators** | Global `:focus-visible` outlines on all interactive elements - no hidden or suppressed focus rings |
|
||||
| 🗣️ | **Screen reader support** | `aria-live` regions announce timer state changes, break activities, and status updates. Progress rings use `role="progressbar"` with value text. Stats chart has a screen-reader-accessible data table. |
|
||||
| 🎯 | **Focus management** | View transitions move focus to the new view's heading. Break screen traps focus to prevent interaction with obscured content. |
|
||||
| 🎨 | **Color contrast** | All text meets 4.5:1 minimum contrast ratio against dark backgrounds (WCAG AA) |
|
||||
| 🖥️ | **Windows High Contrast** | `forced-colors: active` media query maps all theme tokens to system colors |
|
||||
| 🐢 | **Reduced motion** | `prefers-reduced-motion` disables all CSS animations/transitions *and* all JavaScript-driven Web Animations API effects. No functionality lost - just calmer. |
|
||||
| 🏷️ | **Descriptive labels** | All toggle switches, steppers, buttons, and form controls have descriptive accessible names instead of generic labels |
|
||||
|
||||
<br />
|
||||
|
||||
---
|
||||
|
||||
## 📦 Portability
|
||||
@@ -511,7 +529,7 @@ No contribution agreements to sign. No corporate CLAs. No licensing traps. Every
|
||||
|
||||
- 🐛 Report bugs or rough edges
|
||||
- 🧘 Suggest new break activities (especially with physiotherapy or ergonomics knowledge)
|
||||
- ♿ Improve accessibility
|
||||
- ♿ Improve accessibility (WCAG 2.1 AA foundation is in place - help us push further)
|
||||
- 🐧 Port idle detection to macOS/Linux
|
||||
- 🌍 Translate the interface
|
||||
- 💌 Share it with someone who needs it
|
||||
|
||||
Reference in New Issue
Block a user