Accessibility
Coaches use coach-admin all day, on a laptop between sessions or a phone on the gym floor. Some use a screen reader, a keyboard, zoom or reduced motion. The target is WCAG 2.2 level AA, in both products and both directions.
Targets
| Area | Target |
|---|---|
| Text contrast | 4.5:1; 3:1 for large text (24px, or 18.66px bold) |
| Focus rings, control borders, icons that carry meaning | 3:1 against what is next to them |
| Target size | At least 24×24px for anything clickable; aim for 40 to 48px (size-10 to size-12) on touch screens |
| Keyboard | Everything works with the keyboard alone, in a logical order |
| Focus | Always visible, never hidden behind sticky headers |
| Motion | Respects prefers-reduced-motion |
| Language | lang and dir set on the page and on any other-language run |
Contrast
Every pair the semantic tokens imply is computed from tokens/tokens.json on the Color page. The current failures:
44 pairs, computed from tokens/tokens.json for both themes. 6 fail in at least one theme: primary-foreground on primary, success-text on muted, primary on background, ring on background, border-strong on background, input on background.
What they mean in practice:
- Coach primary buttons (white on orange) fail for normal text. DECISIONS #3.
- Coach focus ring and orange text are below 3:1 and 4.5:1 on white. Use
accent-foregroundfor Coach text, and see QUESTIONS Q23 for the ring. - Input and strong borders are below 3:1, so a text field's edge is hard to see for low-vision users. See QUESTIONS Q24.
Focus
- Every interactive element shows a visible ring on keyboard focus (
focus-visible), in theringcolor. - Don't remove outlines without a replacement.
- When a dialog opens, focus moves into it; when it closes, focus returns to the control that opened it.
Keyboard
| Key | Does |
|---|---|
| Tab / Shift+Tab | Moves between controls in reading order |
| Enter / Space | Activates buttons and links (Enter), toggles checkboxes and switches (Space) |
| Arrow keys | Move inside composite widgets: tabs, radio groups, menus, toggle groups. They follow reading direction, so they are reversed in RTL |
| Escape | Closes the open menu, popover, dialog or sheet |
| ⌘K / Ctrl+K | Opens search on this site |
Screen readers
- Every control has a name: visible label first,
aria-labelfor icon-only buttons. - Icons next to text are
aria-hidden. - Status changes that appear without a page load ("Workout saved", "3 results") are announced through a polite live region; toasts do this for you.
- Tables have header cells and a caption; charts have a text alternative or a data table.
- Arabic content is marked
lang="ar"so it is read with Arabic pronunciation.
How this is tested
This site checks itself on every run: axe on every page in SuperCoach LTR, Coach LTR and SuperCoach RTL, with WCAG 2.2 AA rules, including target size. The one tolerated failure is the Coach primary button pair, reported on each run until DECISIONS #3 is made.