Skip to main content
UX Research/accessibility-audit

Accessibility Audit

You need a structured WCAG 2.2 accessibility audit with severity-scored findings.

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-draft for user-specific accessibility needs. Pair with /design-review for design-level accessibility feedback. Feed findings into /backlog-refine for remediation prioritization.

Process

Step 1: Gather inputs

Ask the user to provide:

  1. Product or feature -- what to audit (URL, screenshots, Figma link, or description)
  2. Target conformance level -- WCAG 2.2 Level A, AA (most common), or AAA
  3. Core user flows -- the 3-5 tasks that matter most (e.g., sign up, complete purchase, search)
  4. Known issues -- anything the team already knows is broken
  5. User context -- are there known users of assistive technology? Any legal or compliance requirements?
  6. 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)

CriterionLevelStatusFinding
1.1.1 Non-text content (alt text)APartialLab result trend charts have alt="" — data conveyed visually only; decorative icons on dashboard are correctly marked
1.3.1 Info and relationships (semantic HTML)AFailInsurance form uses <div> elements styled as fieldsets; no <label> associations on 6 of 11 inputs
1.3.5 Identify input purpose (autocomplete)AAFailLogin fields missing autocomplete="username" and autocomplete="current-password"; affects users with cognitive and motor disabilities
1.4.1 Use of color (not sole indicator)AFail"Abnormal" lab values flagged only in red with no icon or text label
1.4.3 Contrast (minimum 4.5:1 text)AAPartialBody 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%AAPassContent reflows without loss of function
1.4.11 Non-text contrast (3:1 UI components)AAFailDate picker calendar navigation arrows fall below 3:1 against background
1.4.12 Text spacingAAPassNo content clipped when letter/word spacing overridden

Operable (WCAG 2.x)

CriterionLevelStatusFinding
2.1.1 Keyboard accessibleAFailDate picker (appointment scheduling) is mouse-only; no keyboard equivalent exists — known issue confirmed
2.1.2 No keyboard trapAPassNo traps detected across tested flows
2.4.3 Focus orderAPartialMFA modal inserts focus at page bottom rather than inside modal; tab sequence in insurance form skips two fields
2.4.6 Headings and labelsAAPartialLab results page has no <h2> section headings; page reads as a single undifferentiated block to screen readers
2.4.7 Focus visibleAAFailFocus ring suppressed globally via outline: none in base stylesheet; affects all five flows
2.4.11 Focus not obscuredAAPassSticky header does not cover focused elements
2.5.7 Dragging movementsAAPassNo drag-only interactions present
2.5.8 Target size (minimum 24×24px)AAFail"Remove medication" icon buttons in refill flow measure 18×18px

Understandable & Robust (WCAG 3.x / 4.x)

CriterionLevelStatusFinding
3.1.1 Language of pageAPass<html lang="en"> present
3.2.1 On focus (no unexpected changes)APassNo context changes triggered by focus alone
3.3.1 Error identificationAFailInsurance 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 instructionsAFailDate of birth field shows MM/DD/YYYY hint only in placeholder text; disappears on input
3.3.3 Error suggestionAAFailValidation errors say "Invalid entry" with no correction guidance (e.g., accepted date formats, required fields)
4.1.2 Name, role, value (ARIA)APartialPrescription refill status badges use role="status" correctly; appointment type dropdown missing aria-expanded on trigger
4.1.3 Status messagesAAFail"Refill requested" confirmation toast is not announced to screen readers; no role="alert" or aria-live region

Findings by Severity

#FindingWCAG CriterionSeverityFlow affectedRemediation
1Date picker is completely mouse-dependent2.1.1CriticalSchedule AppointmentReplace with keyboard-navigable calendar component (e.g., ARIA APG date picker pattern); add visible keyboard instructions
2Focus ring suppressed globally2.4.7CriticalAll flowsRemove outline: none from base stylesheet; implement custom focus style ≥ 2px with 3:1 contrast ratio
3MFA modal does not trap/manage focus2.4.3CriticalLoginOn modal open, move focus to first interactive element inside modal; return focus to trigger on close
4Insurance form errors not announced to AT3.3.1 / 4.1.2CriticalUpdate InsuranceLink error messages via aria-describedby; add role="alert" to inline error container
5Abnormal lab values conveyed by color alone1.4.1CriticalView Lab ResultsAdd "⚠ Abnormal" text label or icon with accessible name alongside color coding
6Refill confirmation toast not announced4.1.3MajorPrescription RefillWrap toast in aria-live="polite" region; inject confirmation text dynamically
7Lab results page lacks heading structure2.4.6MajorView Lab ResultsAdd <h2> per section (e.g., Metabolic Panel, CBC); enables screen reader navigation by heading
8autocomplete missing on login fields1.3.5MajorLoginAdd autocomplete="username" and autocomplete="current-password"; benefits password manager and AT users
9Placeholder-only format hints in DOB field3.3.2MajorUpdate InsuranceMove format hint to persistent <label> or helper text below input
10Prescription "remove" buttons undersized (18×18px)2.5.8MajorPrescription RefillIncrease tap target to minimum 24×24px; recommend 44×44px per iOS/WCAG AAA guidance
11Placeholder text contrast 2.8:1 in refill search1.4.3MinorPrescription RefillUpdate placeholder color to #767676 or darker to achieve ≥ 4.5:1
12Appointment dropdown missing aria-expanded4.1.2MinorSchedule AppointmentAdd aria-expanded="true/false" toggled on open/close of dropdown