a11y-loop

Appearance

a11y-loopWrite accessible UI by default.

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

Install the skill for any agent that reads Agent Skills

npx skills add ChanMeng666/a11y-loop -g -y
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, div-as-button, focus after a client-side route change, and status messages outside a live region — alongside axe-core, not instead of it. The dialog and tab-order checks survey portalled dialogs, the kind Base UI, Radix and anything on floating-ui ships, not only a native dialog element opened with showModal().

Honest, structured output

Every violation carries its WCAG success criterion and, where one exists, its ACT rule ID; every report carries its 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: in one 2024 study, 84% of ChatGPT-generated websites had accessibility problems (W4A'24). Asking the model to "be accessible" helps, but barriers persist (W4A'25). 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 honest-coverage statement and the full overview are on GitHub.