Skip to content
WANCRAFT

Accessibility

What each component guarantees, and how to keep it that way.

What every component guarantees

  • Semantic elements first — buttons are buttons, tabs use the tab pattern, dialogs are labelled modal dialogs.
  • Everything interactive is keyboard operable, with a visible focus ring.
  • Purely decorative layers (glows, particles, duplicated marquee content) are hidden from assistive technology.
  • Animated text exposes its final text once, not character by character.
  • Reduced-motion preferences produce a designed static state.
  • Pointer-only effects have touch and keyboard equivalents, or degrade to a static component.

Per-component notes

Each component page has an Accessibility section describing exactly what that implementation does, and a Limitations section where an experimental component has known gaps (for example, canvas-based visuals that are decorative by design).

Your part

  • Give icon-only controls an accessible name (the components accept aria-label).
  • Keep sufficient contrast if you change accent colours — accents on text should meet WCAG AA (4.5:1).
  • Do not remove the reduced-motion branches when editing a component.

How Wancraft is tested

The metadata schema, code generation and filtering logic are covered by Vitest unit tests, every generated usage example is type-checked, and Playwright end-to-end tests exercise keyboard navigation, the search dialog, tabs, the playground and horizontal overflow at widths from 320px to 1024px in a real browser. Component behaviour (keyboard paths, ARIA state, live regions) was checked in jsdom and in the browser during development. Dedicated screen-reader audits with NVDA, JAWS and VoiceOver have not been completed yet — if you find an issue, please report it.