Use this when you need to evaluate a product's accessibility against WCAG 2.2 guidelines, prepare for a compliance review, or identify barriers that prevent users with disabilities from completing core tasks. Produces a severity-scored finding list with remediation priorities and assistive technology test recommendations.
Related skills: Complements
/ux-audit(heuristic usability evaluation -- Nielsen, not WCAG). References the accessibility context section in/persona-draftfor user-specific accessibility needs. Pair with/design-reviewfor design-level accessibility feedback. Feed findings into/backlog-refinefor remediation prioritization.
Process
Step 1: Gather inputs
Ask the user to provide:
- Product or feature -- what to audit (URL, screenshots, Figma link, or description)
- Target conformance level -- WCAG 2.2 Level A, AA (most common), or AAA
- Core user flows -- the 3-5 tasks that matter most (e.g., sign up, complete purchase, search)
- Known issues -- anything the team already knows is broken
- User context -- are there known users of assistive technology? Any legal or compliance requirements?
- Platform scope -- web, iOS, Android, or all
Step 2: Perceivable audit
Evaluate content against WCAG Perceivable principles:
### Perceivable (WCAG 1.x)
| Criterion | Level | Status | Finding |
|-----------|-------|--------|---------|
| 1.1.1 Non-text content (alt text) | A | Pass / Fail / Partial | (details) |
| 1.3.1 Info and relationships (semantic HTML) | A | Pass / Fail / Partial | (details) |
| 1.3.5 Identify input purpose (autocomplete) | AA | Pass / Fail / Partial | (details) |
| 1.4.1 Use of color (not sole indicator) | A | Pass / Fail / Partial | (details) |
| 1.4.3 Contrast (minimum 4.5:1 text, 3:1 large) | AA | Pass / Fail / Partial | (details) |
| 1.4.4 Resize text (up to 200%) | AA | Pass / Fail / Partial | (details) |
| 1.4.11 Non-text contrast (3:1 for UI components) | AA | Pass / Fail / Partial | (details) |
| 1.4.12 Text spacing (customizable without loss) | AA | Pass / Fail / Partial | (details) |
Step 3: Operable audit
### Operable (WCAG 2.x)
| Criterion | Level | Status | Finding |
|-----------|-------|--------|---------|
| 2.1.1 Keyboard accessible (all functions) | A | Pass / Fail / Partial | (details) |
| 2.1.2 No keyboard trap | A | Pass / Fail / Partial | (details) |
| 2.4.3 Focus order (logical sequence) | A | Pass / Fail / Partial | (details) |
| 2.4.6 Headings and labels (descriptive) | AA | Pass / Fail / Partial | (details) |
| 2.4.7 Focus visible (clear indicator) | AA | Pass / Fail / Partial | (details) |
| 2.4.11 Focus not obscured (minimum) | AA | Pass / Fail / Partial | (details) |
| 2.5.7 Dragging movements (alternative exists) | AA | Pass / Fail / Partial | (details) |
| 2.5.8 Target size (minimum 24x24px) | AA | Pass / Fail / Partial | (details) |
Step 4: Understandable and Robust audit
### Understandable (WCAG 3.x) & Robust (WCAG 4.x)
| Criterion | Level | Status | Finding |
|-----------|-------|--------|---------|
| 3.1.1 Language of page (lang attribute) | A | Pass / Fail / Partial | (details) |
| 3.2.1 On focus (no unexpected changes) | A | Pass / Fail / Partial | (details) |
| 3.3.1 Error identification (clear descriptions) | A | Pass / Fail / Partial | (details) |
| 3.3.2 Labels or instructions (provided) | A | Pass / Fail / Partial | (details) |
| 3.3.3 Error suggestion (correction offered) | AA | Pass / Fail / Partial | (details) |
| 4.1.2 Name, role, value (ARIA correctness) | A | Pass / Fail / Partial | (details) |
| 4.1.3 Status messages (announced to AT) | AA | Pass / Fail / Partial | (details) |
Step 5: Findings summary
## Accessibility Audit Summary -- {{product name}}
**Target level:** WCAG 2.2 {{level}}
**Date:** {{date}}
**Scope:** {{flows audited}}
### Findings by severity
| # | Finding | WCAG Criterion | Severity | Flow affected | Remediation |
|---|---------|---------------|----------|--------------|-------------|
| 1 | (description) | (criterion ID) | Critical / Major / Minor | (which flow) | (how to fix) |
### Severity definitions
- **Critical** -- blocks task completion for AT users. Fix before release.
- **Major** -- significant barrier but workaround exists. Fix within current cycle.
- **Minor** -- inconvenience or non-conformance with low user impact. Plan for next cycle.
### Conformance summary
- Level A: (X of Y criteria pass)
- Level AA: (X of Y criteria pass)
- Overall: (Conformant / Partially conformant / Not conformant)
### Recommended AT testing
- **Screen reader:** Test core flows with VoiceOver (macOS/iOS) and NVDA (Windows)
- **Keyboard only:** Complete all core flows without a mouse
- **Zoom:** Test at 200% and 400% browser zoom
- **High contrast:** Test with Windows High Contrast and forced-colors mode
Step 6: Review
Ask the user:
- Do the severity ratings match your team's risk tolerance?
- Are there flows I missed that need assessment?
- Does the team have access to assistive technology for manual testing?
- Is there a compliance deadline driving this work?
Output location
Present the audit as formatted text in the conversation. The findings table can be exported to a spreadsheet or backlog for tracking.
Example Output
Input
- Product or feature: Meridian Health Portal — patient-facing web app for scheduling appointments, viewing lab results, and refilling prescriptions (URL + Figma provided)
- Target conformance level: WCAG 2.2 Level AA (preparing for OCR Section 508 compliance review in 90 days)
- Core user flows: (1) Log in with MFA, (2) Schedule an appointment, (3) View lab results, (4) Request a prescription refill, (5) Update insurance information
- Known issues: Date picker in scheduling flow is keyboard-inaccessible; error messages on the insurance form don't describe what went wrong
- User context: ~12% of patient base is over 65; two advocacy groups flagged screen reader issues last quarter; legal has flagged ADA Title III exposure
- Platform scope: Web only (Chrome, Safari, Firefox)
Output (abbreviated)
Accessibility Audit Summary — Meridian Health Portal
Target level: WCAG 2.2 AA Date: 2025-07-14 Scope: Login w/ MFA · Appointment Scheduling · Lab Results · Prescription Refill · Insurance Update
Perceivable (WCAG 1.x)
| Criterion | Level | Status | Finding |
|---|---|---|---|
| 1.1.1 Non-text content (alt text) | A | Partial | Lab result trend charts have alt="" — data conveyed visually only; decorative icons on dashboard are correctly marked |
| 1.3.1 Info and relationships (semantic HTML) | A | Fail | Insurance form uses <div> elements styled as fieldsets; no <label> associations on 6 of 11 inputs |
| 1.3.5 Identify input purpose (autocomplete) | AA | Fail | Login fields missing autocomplete="username" and autocomplete="current-password"; affects users with cognitive and motor disabilities |
| 1.4.1 Use of color (not sole indicator) | A | Fail | "Abnormal" lab values flagged only in red with no icon or text label |
| 1.4.3 Contrast (minimum 4.5:1 text) | AA | Partial | Body text passes; placeholder text in refill search (#9CA3AF on white = 2.8:1) fails; "Cancel" ghost button label = 3.1:1 |
| 1.4.4 Resize text up to 200% | AA | Pass | Content reflows without loss of function |
| 1.4.11 Non-text contrast (3:1 UI components) | AA | Fail | Date picker calendar navigation arrows fall below 3:1 against background |
| 1.4.12 Text spacing | AA | Pass | No content clipped when letter/word spacing overridden |
Operable (WCAG 2.x)
| Criterion | Level | Status | Finding |
|---|---|---|---|
| 2.1.1 Keyboard accessible | A | Fail | Date picker (appointment scheduling) is mouse-only; no keyboard equivalent exists — known issue confirmed |
| 2.1.2 No keyboard trap | A | Pass | No traps detected across tested flows |
| 2.4.3 Focus order | A | Partial | MFA modal inserts focus at page bottom rather than inside modal; tab sequence in insurance form skips two fields |
| 2.4.6 Headings and labels | AA | Partial | Lab results page has no <h2> section headings; page reads as a single undifferentiated block to screen readers |
| 2.4.7 Focus visible | AA | Fail | Focus ring suppressed globally via outline: none in base stylesheet; affects all five flows |
| 2.4.11 Focus not obscured | AA | Pass | Sticky header does not cover focused elements |
| 2.5.7 Dragging movements | AA | Pass | No drag-only interactions present |
| 2.5.8 Target size (minimum 24×24px) | AA | Fail | "Remove medication" icon buttons in refill flow measure 18×18px |
Understandable & Robust (WCAG 3.x / 4.x)
| Criterion | Level | Status | Finding |
|---|---|---|---|
| 3.1.1 Language of page | A | Pass | <html lang="en"> present |
| 3.2.1 On focus (no unexpected changes) | A | Pass | No context changes triggered by focus alone |
| 3.3.1 Error identification | A | Fail | Insurance form shows red border on error but aria-describedby not linked; error text not read by screen readers — known issue confirmed |
| 3.3.2 Labels or instructions | A | Fail | Date of birth field shows MM/DD/YYYY hint only in placeholder text; disappears on input |
| 3.3.3 Error suggestion | AA | Fail | Validation errors say "Invalid entry" with no correction guidance (e.g., accepted date formats, required fields) |
| 4.1.2 Name, role, value (ARIA) | A | Partial | Prescription refill status badges use role="status" correctly; appointment type dropdown missing aria-expanded on trigger |
| 4.1.3 Status messages | AA | Fail | "Refill requested" confirmation toast is not announced to screen readers; no role="alert" or aria-live region |
Findings by Severity
| # | Finding | WCAG Criterion | Severity | Flow affected | Remediation |
|---|---|---|---|---|---|
| 1 | Date picker is completely mouse-dependent | 2.1.1 | Critical | Schedule Appointment | Replace with keyboard-navigable calendar component (e.g., ARIA APG date picker pattern); add visible keyboard instructions |
| 2 | Focus ring suppressed globally | 2.4.7 | Critical | All flows | Remove outline: none from base stylesheet; implement custom focus style ≥ 2px with 3:1 contrast ratio |
| 3 | MFA modal does not trap/manage focus | 2.4.3 | Critical | Login | On modal open, move focus to first interactive element inside modal; return focus to trigger on close |
| 4 | Insurance form errors not announced to AT | 3.3.1 / 4.1.2 | Critical | Update Insurance | Link error messages via aria-describedby; add role="alert" to inline error container |
| 5 | Abnormal lab values conveyed by color alone | 1.4.1 | Critical | View Lab Results | Add "⚠ Abnormal" text label or icon with accessible name alongside color coding |
| 6 | Refill confirmation toast not announced | 4.1.3 | Major | Prescription Refill | Wrap toast in aria-live="polite" region; inject confirmation text dynamically |
| 7 | Lab results page lacks heading structure | 2.4.6 | Major | View Lab Results | Add <h2> per section (e.g., Metabolic Panel, CBC); enables screen reader navigation by heading |
| 8 | autocomplete missing on login fields | 1.3.5 | Major | Login | Add autocomplete="username" and autocomplete="current-password"; benefits password manager and AT users |
| 9 | Placeholder-only format hints in DOB field | 3.3.2 | Major | Update Insurance | Move format hint to persistent <label> or helper text below input |
| 10 | Prescription "remove" buttons undersized (18×18px) | 2.5.8 | Major | Prescription Refill | Increase tap target to minimum 24×24px; recommend 44×44px per iOS/WCAG AAA guidance |
| 11 | Placeholder text contrast 2.8:1 in refill search | 1.4.3 | Minor | Prescription Refill | Update placeholder color to #767676 or darker to achieve ≥ 4.5:1 |
| 12 | Appointment dropdown missing aria-expanded | 4.1.2 | Minor | Schedule Appointment | Add aria-expanded="true/false" toggled on open/close of dropdown |