Check a UI component for accessibility

This prompt audits one component for accessibility: keyboard use, focus order, screen reader labels, contrast and error messages. Each issue comes with the WCAG rule, who it affects and the fixed code.

text-code-accessibility-review — claude — 88 words

Act as an accessibility specialist who knows WCAG 2.2 AA.

Component: [WHAT IT IS, e.g. a signup modal with a form]
Code:
[PASTE HTML / JSX AND CSS]

Check keyboard use, focus order and focus trap, labels and names for screen readers, colour contrast, error messages, alt text and motion. For every issue, give the WCAG rule, who it affects, and the fixed code. Order them by impact on real users, and tell me how to test each fix with only a keyboard and a free screen reader.

Edit in the builder Copy & open Claude ↗Copy & open ChatGPT ↗Copy & open Gemini ↗

Afterwards, try the component using only the Tab and Enter keys. It is the fastest real test you can do.

Get a better result

What you will get

A list of accessibility problems in your component, ordered by how much they hurt real users, each with the WCAG rule, who it affects, the fixed code and a way to test the fix with a keyboard and a free screen reader.

Why it works

Asking for the rule, the people affected and the fixed code for every issue makes the review something you can act on, not a vague score. Ordering by impact on real users puts a missing form label ahead of a tiny contrast slip. The keyboard and screen reader test at the end matters most, because a model reading code can miss what a person hits in seconds.

Common mistake

The fixes add ARIA attributes everywhere.

Fix: Ask it to prefer native elements first, like a real button or label, and to use ARIA only where no native element does the job.

Also watch for

The review only looks at the markup, not the CSS. Paste the CSS too, including focus styles and any animation, so it can check contrast, hidden focus rings and motion.
It cannot judge the colour contrast from variable names. Paste the actual colour values your theme uses, or check contrast yourself with a contrast checker in your browser tools.

Try a variation: review a whole page

Paste the page layout instead of one component and ask for landmarks, heading order and a skip link as well as the form checks.

Still not right? Reply with this

I tested it with only Tab and Enter, and focus got lost here: [DESCRIBE THE STEP]. Find the cause and fix it.