a11y-loop

Appearance

a11y-loopWrite accessible UI by default.

Verify it in a real browser. Say exactly what you couldn't check.

Get Started
CLI Usage
View on GitHub
a11y-loop logo — three connected nodes in a closed loopa11y-loop logo — three connected nodes in a closed loop

Demo

See the loop run

Three minutes on what a11y-loop actually does: the standing rules that apply while an agent writes UI, the browser audit that re-checks the result across five rendering passes and the states the agent just built — and the checklist of what no tool could check for you.

a11y loop promo · 2:59 Watch on YouTube (opens in a new tab)

An Agent Skill

Plan rules that apply while the work is still being scoped, then standing generation rules — semantic HTML, ARIA discipline, APG keyboard contracts, labels, focus visibility, AA contrast, reduced motion, 24×24 targets — that apply while an AI agent writes UI code.

Accessibility enters at the plan

§0 settles the conformance target, the per-component acceptance criteria, the structure, and the color tokens — contrast --fix needs no browser and no code — and names the product choices that foreclose accessibility, like drag-only reordering (SC 2.5.7) or hover-only menus (SC 1.4.13), each with its alternative, while changing them is still a sentence rather than a rewrite.

How the plan phase works

A verification loop

The a11y-loop CLI audits the rendered result in a real browser, feeds failures back to the agent to fix, and re-audits until the report converges on zero violations.

Five rendering passes

Default viewport, dark mode, forced-colors mode, reduced motion, and a 320px reflow pass — because most real failures only show up under a specific rendering condition.

Checks axe-core can't run

Tab order, focus visibility, dialog focus traps, target size, reduced-motion effectiveness, ambiguous link text, and div-as-button — alongside axe-core, not instead of it.

Honest, structured output

Every finding carries its WCAG success criterion, ACT rule ID, and provenance. A generated manual-review checklist ships with every run — no single accessibility score, ever.

Portable as an Agent Skill

Built on the open Agent Skills standard — the same SKILL.md works across 40+ clients, not just one vendor's agent.

What is a11y-loop? ​

AI coding agents write inaccessible UI by default — 84% of AI-generated web pages carry accessibility issues, and telling the model to "be accessible" barely moves that number. a11y-loop puts accessibility in three places instead: the plan, where the decisions that foreclose it are still a sentence to change rather than a rewrite; the standing generation rules the agent writes UI under; and a browser-verified audit loop that checks the rendered result and states plainly what it could not check. Accessibility becomes a default of the development workflow rather than an after-the-fact compliance check.

Start with Planning with Accessibility if the UI work is still being scoped, or the Getting Started guide if there is already code. The full introduction and honest-coverage statement is on GitHub.