An accessibility reviewer I can run while the file is still open
Product design
AI
Accessibility
WCAG 2.1 AA, evidence gates, design-to-code
Accessibility review usually arrives after the UI is already decided. I wanted a first pass I could run while I was still in Paper, not after engineering had built the thing.
I built a Grok bot with one job: WCAG 2.1 Level AA auditor. On a 7-step onboarding, it reported 5 likely issues, 4 that needed verification, 3 recommendations, and 0 confirmed violations. The top finding was the primary teal, sampled at about #299681, at roughly 3.64:1 against white under 1.4.3 Contrast (Minimum).
It would not call keyboard or screen-reader behaviour a confirmed fail from screenshots. That refusal is the point of the system.
The problem
On most teams I have been on, accessibility is a late checkpoint. Designers ship a flow, then someone (or no one) checks contrast, names, and keyboard paths after the structure is locked. By then a teal, a placeholder-only label, or an icon-only delete is already in the system.
I did not have a specialist sitting next to the file. A generic “check this for a11y” prompt is worse than nothing if it invents a pass, or dumps a checklist with no WCAG mapping and no sense of what a screenshot cannot prove.
I needed an always-on first layer: fast enough to use while iterating, strict enough that
I would not trust a fake green tick.
My Role
I designed the onboarding in Paper, wrote the auditor’s role and constraints, ran the first pass on those screens, and also ran it against HTML. I am the designer under review and the person who designed the review.
I decided to build a dedicated reviewer instead of adding accessibility as a line in a chat prompt. The alternative was hoping a general model would “be careful.” That is not a workflow.
The key decision: constrain the auditor, do not ask it to bless the file
I gave the bot a single standard (WCAG 2.1 AA) and a single output shape: evidence → Success Criterion → severity → recommendation → how to verify.
I also told it not to claim compliance, and not to treat missing implementation evidence as a confirmed fail. Findings had to land in confirmed, likely, or needs verification.
I considered the default: paste screenshots and ask “is this accessible?” I rejected that. A screenshot cannot show focus order, accessible names, or what a screen reader says. An auditor that confirms those from pixels is not useful. It is a liability.
Before
After
The challenge: make it useful without letting it lie
The easy failure is theatre: a long list that looks like an audit. The other failure is silence: a tool so cautious it never tells you the teal fails contrast.
The first 7-step pass sat in between. Highest-priority: primary teal #299681 on white at about 3.64:1, flagged as a likely 1.4.3 issue, with a practical fix (darken the teal or change the pairing). Around that: placeholder-only field identification, low-contrast secondary labels and placeholder text, form-control border contrast, icon-only delete, required-field communication, plus keyboard, focus, and radio labelling parked under verification because the evidence was not the DOM.
When I gave it HTML as well as screenshots, the same constraint still mattered. Markup can support names and structure. It still cannot stand in for a keyboard pass or a screen-reader pass. The bot is a reviewer. It is not a test lab.
Navigation for multi-step form with progress indicators
Default State
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><path d="M 8 10.5 L 7 10.5 L 7 9.5 C 7 9.102 6.842 8.721 6.561 8.439 C 6.279 8.158 5.898 8 5.5 8 L 2.5 8 C 2.102 8 1.721 8.158 1.439 8.439 C 1.158 8.721 1 9.102 1 9.5 L 1 10.5 L 0 10.5 L 0 9.5 C 0 8.837 0.263 8.201 0.732 7.732 C 1.201 7.263 1.837 7 2.5 7 L 5.5 7 C 6.163 7 6.799 7.263 7.268 7.732 C 7.737 8.201 8 8.837 8 9.5 Z M 4 6 C 3.606 6 3.216 5.922 2.852 5.772 C 2.488 5.621 2.157 5.4 1.879 5.121 C 1.6 4.843 1.379 4.512 1.228 4.148 C 1.078 3.784 1 3.394 1 3 C 1 2.606 1.078 2.216 1.228 1.852 C 1.379 1.488 1.6 1.157 1.879 0.879 C 2.157 0.6 2.488 0.379 2.852 0.228 C 3.216 0.078 3.606 0 4 0 C 4.796 0 5.559 0.316 6.121 0.879 C 6.684 1.441 7 2.204 7 3 C 7 3.796 6.684 4.559 6.121 5.121 C 5.559 5.684 4.796 6 4 6 Z M 4 5 C 4.53 5 5.039 4.789 5.414 4.414 C 5.789 4.039 6 3.53 6 3 C 6 2.47 5.789 1.961 5.414 1.586 C 5.039 1.211 4.53 1 4 1 C 3.47 1 2.961 1.211 2.586 1.586 C 2.211 1.961 2 2.47 2 3 C 2 3.53 2.211 4.039 2.586 4.414 C 2.961 4.789 3.47 5 4 5 Z" fill="rgb(17, 17, 17)" height="10.5px" id="cGwobsYhE" transform="translate(2 0.5)" width="8px"/></svg>)
Basic Information
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 14 12" xmlns="http://www.w3.org/2000/svg"><path d="M 7.576 0.324 L 13.911 11.027 C 13.969 11.126 14 11.237 14 11.351 C 14 11.465 13.969 11.577 13.911 11.676 C 13.853 11.774 13.769 11.856 13.668 11.913 C 13.566 11.97 13.452 12 13.335 12 L 0.665 12 C 0.548 12 0.434 11.97 0.333 11.913 C 0.231 11.856 0.147 11.774 0.089 11.676 C 0.031 11.577 0 11.465 0 11.351 C 0 11.237 0.031 11.126 0.089 11.027 L 6.424 0.324 C 6.482 0.226 6.566 0.144 6.668 0.087 C 6.769 0.03 6.883 0 7 0 C 7.117 0 7.231 0.03 7.333 0.087 C 7.434 0.144 7.518 0.226 7.576 0.324 Z M 6.335 8.757 L 6.335 10.054 L 7.665 10.054 L 7.665 8.757 Z M 6.335 4.216 L 6.335 7.459 L 7.665 7.459 L 7.665 4.216 Z" fill="rgb(226, 0, 0)" height="12px" id="Qgy78J7YB" width="14px"/></svg>)
Selected State
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><path d="M 8 10.5 L 7 10.5 L 7 9.5 C 7 9.102 6.842 8.721 6.561 8.439 C 6.279 8.158 5.898 8 5.5 8 L 2.5 8 C 2.102 8 1.721 8.158 1.439 8.439 C 1.158 8.721 1 9.102 1 9.5 L 1 10.5 L 0 10.5 L 0 9.5 C 0 8.837 0.263 8.201 0.732 7.732 C 1.201 7.263 1.837 7 2.5 7 L 5.5 7 C 6.163 7 6.799 7.263 7.268 7.732 C 7.737 8.201 8 8.837 8 9.5 Z M 4 6 C 3.606 6 3.216 5.922 2.852 5.772 C 2.488 5.621 2.157 5.4 1.879 5.121 C 1.6 4.843 1.379 4.512 1.228 4.148 C 1.078 3.784 1 3.394 1 3 C 1 2.606 1.078 2.216 1.228 1.852 C 1.379 1.488 1.6 1.157 1.879 0.879 C 2.157 0.6 2.488 0.379 2.852 0.228 C 3.216 0.078 3.606 0 4 0 C 4.796 0 5.559 0.316 6.121 0.879 C 6.684 1.441 7 2.204 7 3 C 7 3.796 6.684 4.559 6.121 5.121 C 5.559 5.684 4.796 6 4 6 Z M 4 5 C 4.53 5 5.039 4.789 5.414 4.414 C 5.789 4.039 6 3.53 6 3 C 6 2.47 5.789 1.961 5.414 1.586 C 5.039 1.211 4.53 1 4 1 C 3.47 1 2.961 1.211 2.586 1.586 C 2.211 1.961 2 2.47 2 3 C 2 3.53 2.211 4.039 2.586 4.414 C 2.961 4.789 3.47 5 4 5 Z" fill="rgb(41, 150, 129)" height="10.5px" id="s2C4vunYy" transform="translate(2 1)" width="8px"/></svg>)
Basic Information
Error State- Incomplete
Basic Information
Completed State
Basic Information
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 14 12" xmlns="http://www.w3.org/2000/svg"><path d="M 6 12 C 2.686 12 0 9.314 0 6 C 0 2.686 2.686 0 6 0 C 9.314 0 12 2.686 12 6 C 12 9.314 9.314 12 6 12 Z M 5.402 8.4 L 9.644 4.157 L 8.795 3.309 L 5.402 6.703 L 3.704 5.006 L 2.856 5.854 Z" fill="rgb(41, 150, 129)" height="12px" id="UuOg7lAIY" transform="translate(1 0)" width="12px"/></svg>)
Selected State-Complete
Basic Information
Selected State-Error
Basic Information
Craft
The product is the review contract, not a chatbot personality.
Severity is by user impact, not by how easy the issue is to write up. Contrast on a primary action colour outranks a nice-to-have note. Uncertainty is labelled in the same artefact as the finding, so I do not have to remember which items were guesses.
Recommendations have to be something I can do in the file or hand to engineering (darken this token, do not use placeholder as the only label, give the delete control an accessible name). If it cannot say that, it should stay in verification.
Card component Explorations
Homepage exploration
Outcome
First onboarding audit (7 steps, Paper screens, WCAG 2.1 AA Grok bot):
0 confirmed violations
5 likely
4 needs verification
3 recommendations
Top issue, with method: sampled primary teal #299681 vs white at about 3.64:1, mapped to 1.4.3 Contrast (Minimum) (AA normal text is 4.5:1). Fix: darken the teal or change foreground/background.
I also ran the same auditor on HTML. That is a second evidence type, not a second published scorecard. [PLACEHOLDER: add HTML counts only if you logged them the same way as the 7-step screenshot pass.]
This is not a SUS or completion metric. It is a classified audit log.