Recipe

Keyboard-Only QA Protocol

Unplug the mouse. Every interactive surface must be reachable, operable, and visually indicated through keyboard alone.

Setup

  • Disconnect mouse or disable trackpad.
  • Open only a standard browser window — no extensions.
  • Start on the landing page with focus on <body>.

Tab Order

  • Press Tab repeatedly. Focus must move left-to-right, top-to-bottom.
  • Shift+Tab reverses direction predictably.
  • No focus trap — you must reach the browser chrome and back.
  • Off-screen or hidden elements must not receive focus.

Focus Indicator

  • Every focused element shows a visible ring: ring-2 ring-[#8B5CF6] ring-offset-2 ring-offset-[#0A0612]
  • Custom-styled inputs, selects, and toggles must not swallow the ring.
  • Focus must be visible on dark and light surfaces.

Activation

  • Enter activates links and buttons.
  • Space toggles checkboxes and expands select menus.
  • Escape closes modals, drawers, and dropdowns.
  • Arrow keys navigate radio groups and tab lists.

Skip Link

  • First Tab press reveals a “Skip to content” link.
  • Activating it moves focus past the navigation.
  • Link is visually hidden until focused — no layout shift.

Sign-Off

  • Complete one full purchase flow keyboard-only.
  • No element requires a mouse hover to reveal critical info.
  • Zero console errors related to focus management.

Pro tip: Run this protocol before every release. Keyboard regressions are the fastest way to break WCAG 2.1 AA compliance.