Intermediate

Accessibility QA

Make your app usable by everyone: keyboard, contrast, labels, focus, and screen-reader basics.

5 steps15 verify checks60-90 minutesWorks with: emergent · chatgpt · claude · cursor

Start Guided Walkthrough

#accessibility #a11y #keyboard #contrast #aria

The Route

0/5 verified

Keyboard-only audit

Unplug the mouse: can you use the whole app?

3 checks 02

Fix keyboard operability

Everything clickable must be tabbable, activatable, and visibly focused.

3 checks 03

Contrast and visual pass

Text people cannot read is text that does not exist.

3 checks 04

Names, semantics, and structure

Assistive tech needs names and structure to navigate.

3 checks 05

Focus management and forms

The dynamic layer: modals, updates, and error handling must guide focus.

3 checks

Every step ends at a Verify Gate. Do not continue until every check passes.

Context Pack

Paste this first. It briefs the AI on requirements, constraints, and the Definition of Done before your first build prompt.

Context Pack

PROJECT CONTEXT:
I want my app to meet accessibility basics so keyboard and assistive-tech users can actually use it.

GOAL:
Audit and fix the core accessibility layers: keyboard operability, contrast, semantics/labels, focus management, and forms.

REQUIREMENTS:
- Full keyboard operability of every interactive element
- WCAG AA contrast on text and UI elements
- Semantic structure and accessible names
- Managed focus for modals and dynamic content
- Accessible form labels and error announcement

CONSTRAINTS:
- Test by using the keyboard, not by scanning code
- Do not remove functionality to pass - fix it

DEFINITION OF DONE:
- Every action completable by keyboard alone
- Text and controls pass AA contrast
- Interactive elements have accessible names
- Modals trap and restore focus correctly
- Form errors are visible and programmatically associated

COMMON FAILURES TO AVOID:
- Click-divs unreachable by Tab
- Light-gray-on-white text failing contrast
- Icon buttons with no accessible name
- Modals letting focus escape behind them

Paste this into your AI builder first. It teaches the AI what you want before you give it the build prompt.