Web InnoventixPrompts

Audit a screen or component for WCAG 2.2 accessibility issues

Free

Turn any screen or component into a prioritized WCAG 2.2 accessibility audit — every issue mapped to a specific success criterion, its user impact, and a concrete code fix.

A developer-ready accessibility audit that names exactly which WCAG 2.2 criteria a component fails, ranks them by user impact, and gives a concrete fix for each.

This prompt

You are a senior accessibility engineer who audits interfaces against WCAG 2.2 and writes findings developers can act on immediately.

Audit the screen or component provided below and produce a prioritized findings report in which every issue is tied to a specific WCAG 2.2 success criterion and paired with a concrete fix — so a developer can remediate each one without extra research.

## What you're auditing
- Target conformance level: {{conformance_level}} (audit against this level and every level below it)
- Platform / context: {{platform_context}}
- Material under audit (code, and/or a description of the visual layout and interactive behavior):
<<<
{{component_or_screen}}
>>>

## How to run the audit
Work through the four POUR principles. For each, check the criteria that apply to the material:

1. Perceivable — descriptive alt text for meaningful images/icons and alt="" for decorative ones; captions or transcripts for media; semantic structure (real headings h1-h6, lists, table headers, labels tied to their inputs); information never conveyed by color alone; text contrast at least 4.5:1 (at least 3:1 for large text of 24px+, or 18.66px+ bold); non-text UI-component and graphical-object contrast at least 3:1; content reflows at 320 CSS px wide / 400% zoom with no two-dimensional scrolling; layout survives user text-spacing overrides (line-height 1.5x, paragraph spacing 2x, letter spacing 0.12x, word spacing 0.16x).

2. Operable — every interactive element reachable and operable by keyboard with no traps; focus order that follows the visual order; a visible focus indicator; focused elements not hidden behind sticky headers or overlays (2.4.11 Focus Not Obscured); descriptive link and button text (never a bare "click here"); a skip link and landmark regions for navigation; pointer targets at least 24x24 CSS px (2.5.8 Target Size); a single-pointer alternative for any drag action (2.5.7 Dragging Movements); moving or auto-updating content that can be paused and that honors prefers-reduced-motion; nothing that flashes more than 3 times per second.

3. Understandable — page or document language set; a visible label plus instructions on every input, with required fields and format hints marked; errors identified in text, tied to their field, with a correction suggestion; no unexpected change of context on focus or on input; consistent navigation and naming across the flow; help offered in a consistent place (3.2.6 Consistent Help); no re-entry of information already provided (3.3.7 Redundant Entry); authentication that does not depend on a memory or transcription puzzle (3.3.8 Accessible Authentication).

4. Robust — custom widgets that expose a correct name, role, value, and state (4.1.2); no duplicate IDs; status updates announced through a live region (role="status" or role="alert"). Note that 4.1.1 Parsing no longer applies in WCAG 2.2, so do not report it.

Then assign each finding a severity by user impact — Critical (blocks a task for some users), Serious (major barrier with a workaround), Moderate, or Minor — merge duplicates, and move anything you cannot confirm from the provided material into a verification list instead of guessing.

## Output format
1. Summary — the target level, an overall verdict (Conforms / Does not conform to {{conformance_level}}), a count of findings by severity, and the top 3 blockers in one line each.
2. Findings — a numbered list, most severe first. For each give: Severity | WCAG success criterion (number, name, level) | Principle | Location (element, selector, or region) | What fails (with the evidence from the material) | Who it affects | Fix (a concrete change, with corrected markup or CSS when code was provided).
3. Needs manual or assistive-tech verification — checks that require a live page, real color values, a keyboard run-through, or a screen reader; name what to test and how.
4. Quick wins — the 2-3 highest-impact, lowest-effort fixes.

## Constraints
- Cite only success criteria that genuinely apply, using the exact WCAG 2.2 number, name, and conformance level.
- Ground every finding in the supplied material: quote the offending code or describe the exact visual element.
- State a contrast ratio or a pass/fail only when you can derive it from the given colors; when a background or exact value is missing, state your assumption or move the item to the verification list.
- In fixes, reach for native HTML semantics first and add ARIA only where a native element cannot express the pattern; never recommend removing or hiding focus outlines.
- If the material is a screenshot or prose description with no code, audit what is observable and say plainly which checks the format prevents you from completing.

4 fields still empty — the {{like_this}} slots fill in as you type.

See it in action

What this prompt produces with example details filled in:

## Summary
- Target: WCAG 2.2 Level AA
- Verdict: Does not conform — 2 Critical, 1 Serious, 2 Moderate, plus 3 items needing runtime checks.
- Top blockers: (1) the email field has no programmatic label; (2) the submit control is a non-focusable div with no accessible name; (3) hint text fails minimum contrast.

## Findings

1. Critical — 3.3.2 Labels or Instructions (A), also 1.3.1 Info and Relationships (A) — Understandable / Perceivable
Location: `<input type="email" placeholder="Email">`
What fails: The field's only label is a placeholder, which disappears on input and is not a reliable accessible name. Screen-reader users get no persistent label, and everyone loses the prompt once they start typing.
Who it affects: Screen-reader users; users with memory or attention disabilities.
Fix:
`<label for="email">Email address</label>`
`<input id="email" type="email" name="email" autocomplete="email">`
Keep a placeholder only as a format example (e.g. `placeholder="you@company.com"`).

2. Critical — 2.1.1 Keyboard (A), also 4.1.2 Name, Role, Value (A) — Operable / Robust
Location: `<div class="btn" onclick="submit()">→</div>`
What fails: A div is not focusable or keyboard-operable, exposes no button role, and its "→" glyph carries no accessible name, so keyboard and screen-reader users cannot submit.
Who it affects: Keyboard-only, screen-reader, and switch-device users.
Fix: use a real button with a text name — `<button type="submit">Subscribe</button>`. If the arrow must stay, name it: `<button type="submit" aria-label="Subscribe">→</button>`.

3. Serious — 1.4.3 Contrast (Minimum) (AA) — Perceivable
Location: `<p class="hint" style="color:#9aa0a6">` on the assumed white background.
What fails: #9AA0A6 on #FFFFFF is about 2.6:1, below the 4.5:1 minimum for body text.
Who it affects: Low-vision users; anyone in bright light.
Fix: darken to at least #6E7378 (~4.6:1) or #595959 (~7:1). If the real background is not white, recheck against the actual value.

4. Moderate — 2.5.8 Target Size (Minimum) (AA) — Operable
Location: the submit control (the "→").
What fails: A single-glyph control often renders below the 24x24 CSS px minimum, making it hard to hit for motor-impaired and touch users. Measure the rendered box.
Fix: give the button at least 24x24 px (44x44 recommended for touch): `min-block-size:44px; min-inline-size:44px; padding:0 16px;`.

5. Moderate — 1.3.1 Info and Relationships (A) — Perceivable
Location: `<h3>Join the list</h3>`
What fails: Starting at h3 with no h1/h2 above can break the page's heading outline. Confirm this component's place in the document.
Fix: use the heading level that follows the surrounding structure (often h2 for a section like this).

## Needs manual or assistive-tech verification
- 3.3.1 Error Identification (A) / 3.3.3 Error Suggestion (AA): no validation is shown — submit an empty or invalid email on the live page and confirm errors appear in text, are tied to the field via `aria-describedby`, and set `aria-invalid`.
- 2.4.7 Focus Visible (AA): confirm the new button and input show a clear focus indicator (at least 3:1 against adjacent colors) and that no global `outline:none` suppresses it.
- 1.4.3 background assumption: reconfirm the hint-text contrast against the container's actual background color.

## Quick wins
- Swap the div for `<button type="submit">Subscribe</button>` — clears two Critical findings at once.
- Add `<label for="email">` — clears the top blocker.
- Darken the hint text to #595959 — clears the contrast failure.

Tips

Best for: Designers and front-end devs auditing UI before merge, PMs preparing for ADA / Section 508 or VPAT reviews, Teams working through an accessibility remediation backlog, Reviewing a single component in a pull request
wcagaccessibilitya11ywcag 2.2accessibility auditwcag auditdesigncontrast

Built by Web Innoventix

Want the work done, not just prompted? We design, build and rank websites that get found on Google and cited by AI.

Get a free quote

More prompts

Browse all →
Design & UX

Turn a rough UI idea into a build-ready design prompt

Turn a vague UI idea into a precise, generation-ready design prompt — a one-line vibe, a named-colour design system, and a numbered page structure — that v0, Stitch, Lovable, or Claude can render into a polished first screen on the first try.

4 fieldsdesignui-design
Design & UX

Design critique that returns prioritised fixes

Get a senior product-design critique of any screen — specific, located, severity-ranked usability fixes tied to real heuristics, not vague praise.

4 fieldsdesignux
Design & UX

Design a first-run onboarding flow to your product's aha moment

A ready-to-paste ChatGPT prompt that interviews you about your product, then designs a first-run app onboarding flow that walks new users to their aha moment — delivered as a build-ready spec.

Paste & goonboardingux design
Design & UX

Plan your product's information architecture and sitemap

A paste-and-go ChatGPT prompt that interviews you about your product and users, then delivers a full information architecture and sitemap — navigation model, page hierarchy, URL scheme, and key user flows.

Paste & goinformation architecturesitemap
Design & UX

Interview a user and turn it into a UX research brief

A paste-and-go ChatGPT prompt that runs a professional UX discovery interview one question at a time, then synthesizes your answers into a structured, shareable UX research brief.

Paste & gouser-researchuser-interview
Design & UX

Generate a design token system with light and dark palettes

A paste-and-go ChatGPT prompt that briefly interviews you, then generates a complete light and dark design token system — primitives, semantic tokens, and WCAG-checked contrast — ready to export as CSS variables, DTCG JSON, or a Tailwind config.

Paste & godesign tokensdesign system
Chat with us