Accessibility Style
Accessibility is a ship requirement, not a post-hoc audit: semantic HTML, keyboard paths, motion respect, and hit targets baked into component defaults.
Semantic structure
Use <button>, <nav>, headings in order, and labels on inputs. Avoid div-only interactive surfaces unless ARIA is unavoidable. Source: ui/AGENTS.md React and accessibility section
Keyboard and pointer
Pair mouse handlers with keyboard equivalents on custom widgets. Wiki reader search supports keyboard navigation in typeahead. Source: ui/README.md
Motion
Honor prefers-reduced-motion: keep opacity and color transitions; remove nonessential movement. Reticle Design System documents Emil Kowalski rules including reduced-motion and @media (hover: hover and pointer: fine) gating. Source: Reticle Design System
Hit area
Expand targets with Tailwind before: pseudo-element insets per CSS UI Enforcement, not tiny icons with no touch slack. Source: CSS UI Enforcement
Color and contrast
Sigil and Reticle tokens must meet contrast when agents swap presets; run OKLCH contrast checks for new palettes. Source: Oklch Skill related; Sigil Token Architecture
Rule Contract
| Surface | Default | Banned pattern | Proof |
|---|---|---|---|
| Interactive element | Native control first | Clickable div with ARIA duct tape |
Keyboard traversal and screen-reader label |
| Custom widget | Mouse, keyboard, focus, and escape behavior together | Hover-only interaction | Browser interaction check |
| Motion | Respect prefers-reduced-motion |
Required motion for comprehension | Reduced-motion screenshot or branch check |
| Hit target | At least 44px touch affordance or pseudo-hit area | Tiny icon-only click target | Mobile viewport check |
| Color | Token-backed contrast | Raw palette swap with no contrast check | OKLCH/WCAG contrast check |
Validation
For meaningful UI changes, prove accessibility at the same layer as the change: semantic inspection for markup, keyboard traversal for custom controls, reduced-motion branch for animation, and mobile hit-area check for dense controls. Browser proof beats code inspection.
Proof
Proof means the interaction works without a mouse, focus order is visible, motion has a reduced branch when it carries meaning, and any custom control exposes the expected role, name, state, and keyboard behavior.
Style Rule Contract
This page follows Style Rule Contract: name the default pattern, banned pattern, reason, exception, proof, and codification path clearly enough that the next agent can apply the rule without asking Kevin again. If a local repo has a stricter rule, follow the local rule and update the wiki when the decision becomes durable.
Timeline
- 2026-07-01 | Aligned this page with Style Rule Contract so style guidance names default behavior, banned patterns, exceptions, proof, and codification expectations. Source: User request, 2026-07-01
- 2026-07-01 | Added an accessibility rule table and validation section tying semantics, keyboard paths, reduced motion, hit targets, and contrast to browser proof. Source: User request, 2026-07-01
- 2026-07-01 | Made accessibility proof explicit for keyboard use, focus order, reduced motion, and semantic role/name/state checks. Source: User request, 2026-07-01
- 2026-05-11 | CSS UI enforcement encodes hit-area and motion baselines. Source: CSS UI Enforcement
- 2026-05-31 | Accessibility style page compiled. Source: compiled from wiki graph