UI to Accessibility Audit
Using a model alongside automated tooling, which extends coverage a little and does not approach a real audit.
Definition
A model can review markup or a screenshot against WCAG criteria and flag likely failures. Combined with an automated tool it finds more than either alone, and both together still miss most manual criteria.
Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.
On this plate
Reach for this when
- Extending automated coverage during development.
- Reviewing a component before it enters a design system.
- Triage before a formal audit.
Common mistakes
- Claiming conformance from automated and model output.
- Skipping keyboard and screen reader testing.
- Accepting suggested ARIA without verifying it.
What each method actually covers
| Method | Covers | Misses |
|---|---|---|
| Automated tools | Contrast, missing labels, ARIA misuse, heading order | Anything requiring judgement or interaction. |
| Model on markup | Semantics, label quality, heading logic, likely ARIA errors | Rendered output, focus order, dynamic behaviour. |
| Model on screenshot | Visual contrast, target size, colour-only signals | Everything not visible in a static image. |
| Manual keyboard and screen reader testing | Most of what matters | Nothing, but it costs time. |
Prompt for a markup review
Review this markup against WCAG 2.2 level AA.
For each likely failure return:
- The success criterion number and name
- The specific element
- Why it fails
- The corrected markup
Then list separately the criteria you CANNOT assess from markup alone
and what manual test each requires.
Do not report a failure unless the markup shows it.
Markup:
[paste]Local chart
AI·005 · Region XII · Grid G5
This entry and the entries it is stated to connect with. Each line is labelled with what the connection means.
Continue from here
Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.
Often used with
These usually appear in the same screen or the same decision.
- axe DevToolsTOOL·029 · Tool
Check your work
Review passes that test whether this was done properly.
- Accessibility ChecklistCHK·002 · Checklist
Related concept
Connected closely enough to change how you apply this.
- Keyboard NavigationA11Y·002 · Accessibility
- Screen ReadersA11Y·005 · Accessibility
- WCAG in PracticeA11Y·001 · Accessibility
- AI Design CritiqueAI·009 · AI workflow
- Design System to DocumentationAI·007 · AI workflow
- Screenshot to UX AuditAI·001 · AI workflow
- Specification to Working CodeAI·010 · AI workflow
- Accessibility AuditFLOW·012 · Workflow