The accessibility floor

---
name: accessibility-floor
description: "Applies “The accessibility floor” as a repeatable product-quality gate. Use during frontend work when keyboard, contrast, semantics, reduced motion — the floor nobody ships below."
---

# The accessibility floor

Apply this skill during **Frontend** work. It supports Next.js / React, Mobile, Any stack.

Keyboard, contrast, semantics, reduced motion — the floor nobody ships below.

## Instructions

Hold an accessibility floor on every surface: complete keyboard operability (tab order sane, focus always visible, Escape closes any overlay, a skip link exists), real semantics (native button/a/label elements — no clickable divs), aria-labels on icon-only controls, alt text that describes informative images and empty alt on decorative ones, contrast of at least 4.5:1 for body text and 3:1 for large text and UI chrome, and prefers-reduced-motion honored both globally and inside every JS-driven animation. Run the keyboard pass on every new interactive element before it merges, and run a screen-reader pass on the money path once per release. Accessibility issues are bugs, not enhancements.

## Detect the problem

- Clickable divs
- Icon buttons with no accessible name
- outline: none with no replacement

## Hold the gate

Do not declare this phase complete until every item passes:

- [ ] Keyboard-only pass: everything reachable, focus visible, Escape closes overlays
- [ ] Real semantics: buttons are <button>, links are <a>, inputs have labels
- [ ] Icon-only controls carry aria-labels; informative images carry real alt text
- [ ] Contrast ≥ 4.5:1 for body text, ≥ 3:1 for large text and UI chrome
- [ ] prefers-reduced-motion honored globally and per animated component

## Verify the result

Complete the money path keyboard-only, then once with a screen reader.