foundations

Accessibility

Wolf serves civilians in high-stress, time-critical moments. Friction helps no one. Accessible design is correctness, not feature work.

Read the full spec

The six-point contract

Every component in the system passes these before it ships. Component specs add their own acceptance criteria on top.

01Keyboard-navigableEvery interactive element is tab-reachable and operable without a mouse.
02Visible focusEvery focusable element shows a distinct focus indicator on :focus-visible.
03Screen-reader accessibleEvery interactive element has an accessible name; state changes are announced.
04Contrast compliantText meets AA; UI and focus indicators meet 3:1 non-text.
05Motion-safeRespects prefers-reduced-motion: reduce — see the Motion foundation.
06Touch-reachableEvery touch target is at least 44 × 44 CSS pixels.

WCAG targets

Wolf aims for AAA on body text and AA on everything else. Logos and decorative text are exempt.

Body text (<18pt)AA 4.5 : 1AAA 7 : 1
Large text (≥18pt or 14pt bold)AA 3 : 1AAA 4.5 : 1
UI components, focus indicatorsAA 3 : 1AAA —

Contrast-pair matrix

Every pair ships at or above its target. Verified at build time against the canonical token ramps.

body on background19.0 : 1AAA
muted on background5.1 : 1AA
primary8.5 : 1AAA
destructive5.5 : 1AA
success4.8 : 1AA
warning4.6 : 1AA

Focus ring

Tab to each specimen with the keyboard. Rings show on :focus-visible only — never on mouse click.

Inline link

tsx

<button
  className="focus-visible:outline-none
             focus-visible:ring-2
             focus-visible:ring-ring
             focus-visible:ring-offset-2
             focus-visible:ring-offset-background"
>
  …
</button>

Keyboard shortcuts

Wolf conventions for keyboard navigation. Every dashboard adopts these exactly; marketing surfaces adopt the first four.

Try it: Tab through the focus-ring demo above. Shift+Tab walks backwards. The skip-link pattern lives at the top of every production page but is hidden here for brevity.

TabNext focusable element
Shift+TabPrevious focusable element
Enter / SpaceActivate button, select checkbox
EscapeClose modal, dropdown, tooltip
Arrow keysNavigate within composite widgets
/Global search (dashboards)
⌘K · Ctrl+KCommand menu (dashboards)

Skip to main content

Every major surface ships a skip link as the first tab stop. Hidden visually until focused.

Tab into this panel to reveal the skip link.

tsx

<a
  href="#main-content"
  className="sr-only focus:not-sr-only
             focus:absolute focus:left-4 focus:top-4 focus:z-50
             focus:rounded-md focus:bg-primary focus:px-4 focus:py-2
             focus:text-primary-foreground"
>
  Skip to main content
</a>

Touch targets

Minimum 44×44 CSS pixels on touch. If the glyph is smaller, extend the tap area with padding — never shrink the target.

44×44

32×32 — too small

Never encode by colour alone

Colour-blindness affects roughly 8% of men. Every chart, badge and status pairs colour with an icon, pattern or label.

✓ Resolved
▲ In progress
■ Open