PageWeave/Design

Guides / Ship / Accessibility Baseline

12 Ship accessibilitywcagcontrastkeyboard .md

Accessibility Baseline

The minimum bar every PageWeave site clears before ship: contrast, keyboard, semantics, motion.

Accessibility is a ship gate, not a phase. This baseline catches the failures that matter most.

Contrast (WCAG AA minimum)

  • Body text 4.5:1, large text/UI components 3:1 against their grounds.
  • Test PAIRS: primary-on-base-100, primary-content-on-primary, placeholder-on-input, dimmed meta text.
  • Placeholders at 40–50% opacity usually fail — labels carry the information, placeholders show examples.
  • The Daylight Ink theme in this library doubles as an audit baseline.

Keyboard

  • Tab order follows DOM order — build layouts that read linearly.
  • Visible focus everywhere: :focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px }. Never remove outlines without replacement.
  • Skip link as the first focusable element.
  • <details> accordions and dialogs are keyboard-safe by default; custom widgets need arrow-key handling.

Semantics

  • One <h1> per page; heading levels without skips.
  • Landmarks: header/nav/main/footer — daisyUI components compose into these naturally.
  • Buttons do things; links go places. Styled-as-button links still need href.
  • Alt text describes content ("editorial layout study, three columns"), not quality ("beautiful screenshot").
  • Status never conveyed by color alone — pair badges with words.

Forms

  • Every input labeled visibly; aria-describedby for hints/errors.
  • Error states combine input-error + text explanation + focus move.

Motion

  • prefers-reduced-motion honored globally (see Motion Choreography).
  • Nothing flashes more than 3×/second.

The five-minute audit

Tab through the homepage eyes-closed (keyboard only, screen reader optional): can you reach every action, tell where you are, and complete the primary task? Then run one contrast check on your accent color. Fix what fails, then ship.