Accessibility audit of a component

Checks markup against the failures screen readers actually hit, not a checklist of rules.

Coding accessibilityhtmlreview Verified 2026-11-03

When to use it

Before shipping a component that someone will use with a keyboard or a screen reader.

The prompt

Copy into your assistant
Audit this markup for accessibility defects that a real user would hit.

Report, in order of impact:
1. Keyboard traps and focus order problems.
2. Missing or wrong accessible names (buttons, inputs, landmarks).
3. State that is visual only (aria-expanded, aria-selected, aria-live missing).
4. Colour and contrast issues you can infer from the classes.
5. Anything that will read as noise to a screen reader.

Rules:
- For each issue: the element, what a keyboard or screen-reader user experiences, and the minimal fix.
- Do not suggest adding ARIA where a native element would do. That is the most common wrong fix.
- If the markup is fine, say so.

Markup:
<html>

What to change

Say what the component is supposed to do — a dialog and a tooltip need different audits.

Why it works

The prohibition on gratuitous ARIA is what separates a useful audit from a linter. Wrong ARIA is worse than none, and models default to adding attributes.

More coding prompts

Going deeper

More prompts

All prompts