# Accessibility Review

> Run a WCAG accessibility audit on a design, component, or page. TRIGGER when: user says "accessibility audit", "a11y review", "WCAG check", "is this accessible", or asks about color contrast, screen readers, keyboard navigation, or ARIA.

- Skill: `ashutoshsrivastava17/accessibility-review` (Agent Skill)
- Install (CLI): `npx skillmds@latest add ashutoshsrivastava17/accessibility-review`
- Raw SKILL.md: https://api.skillmd.com/api/skills/ashutoshsrivastava17/accessibility-review/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: ashutoshsrivastava17 (https://skillmd.com/u/ashutoshsrivastava17)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/ashutoshsrivastava17/accessibility-review

---


# Accessibility Review

Perform a structured WCAG 2.2 accessibility audit. Evaluate designs, components, or implementations against established standards and produce actionable findings.

## Audit Framework

Evaluate against these WCAG 2.2 conformance levels, in order of priority:

### Level A — Minimum (must fix)

| Criterion | What to Check |
|---|---|
| 1.1.1 Non-text Content | Every image, icon, and visual element has a text alternative |
| 1.3.1 Info and Relationships | Structure (headings, lists, tables) is programmatically determinable, not just visual |
| 1.3.2 Meaningful Sequence | Reading order matches visual order |
| 1.4.1 Use of Color | Color is not the only means of conveying information |
| 2.1.1 Keyboard | All functionality is operable via keyboard |
| 2.4.1 Bypass Blocks | Skip navigation or landmark regions exist |
| 2.4.2 Page Titled | Pages have descriptive titles |
| 3.1.1 Language of Page | `lang` attribute is set |
| 3.3.1 Error Identification | Errors are identified and described in text |
| 4.1.2 Name, Role, Value | All UI components have accessible names and roles |

### Level AA — Standard (should fix)

| Criterion | What to Check |
|---|---|
| 1.4.3 Contrast (Minimum) | Text: 4.5:1 ratio. Large text (18px+ bold or 24px+): 3:1 |
| 1.4.4 Resize Text | Content is readable at 200% zoom without loss of functionality |
| 1.4.11 Non-text Contrast | UI components and graphics: 3:1 ratio against adjacent colors |
| 2.4.6 Headings and Labels | Headings and labels describe topic or purpose |
| 2.4.7 Focus Visible | Keyboard focus indicator is visible |
| 3.2.3 Consistent Navigation | Navigation is consistent across pages |
| 3.3.2 Labels or Instructions | Form inputs have labels or instructions |

### Level AAA — Enhanced (nice to have)

| Criterion | What to Check |
|---|---|
| 1.4.6 Contrast (Enhanced) | Text: 7:1 ratio. Large text: 4.5:1 |
| 2.4.10 Section Headings | Content is organized with section headings |
| 3.2.5 Change on Request | Changes of context are initiated only by user request |
| 3.3.5 Help | Context-sensitive help is available |

## Audit Process

### Phase 1 — Scope

1. Identify what's being audited: a design file, a component, a page, or an entire flow.
2. Determine the target conformance level (default: **AA**).
3. If `$ARGUMENTS` references a file, read it. If it references a component, find it in the codebase.

### Phase 2 — Automated Checks (for code)

If auditing implementation code (HTML/JSX/TSX):

1. Search for images without `alt` attributes.
2. Check for `aria-*` attributes on interactive elements.
3. Verify form inputs have associated `<label>` elements or `aria-label`.
4. Check heading hierarchy (`h1` -> `h2` -> `h3`, no skips).
5. Look for `role` attributes on custom interactive elements.
6. Check for `:focus` / `focus-visible` styles in CSS.
7. Verify `tabindex` usage (avoid positive values).
8. Check color values against WCAG contrast formulas.

### Phase 3 — Manual Review Checklist

For designs or areas that can't be automated:

- [ ] **Keyboard navigation**: Can every interactive element be reached and operated with keyboard alone?
- [ ] **Screen reader flow**: Does the reading order make sense without visual layout?
- [ ] **Touch targets**: Are interactive elements at least 44x44 CSS pixels?
- [ ] **Motion**: Are animations respectful of `prefers-reduced-motion`?
- [ ] **Error states**: Are errors clearly communicated without relying solely on color?
- [ ] **Loading states**: Are loading indicators announced to assistive technology?
- [ ] **Responsive**: Does the layout work at 320px viewport width?
- [ ] **Zoom**: Is content usable at 400% zoom?

### Phase 4 — Report

Output a structured report:

```
## Accessibility Audit — {component/page name}

**Target**: WCAG 2.2 Level AA
**Scope**: {what was audited}
**Date**: {today}

### Critical (Level A violations)
- [{criterion}] {description of issue}
  - **Location**: {file:line or design element}
  - **Impact**: {who is affected and how}
  - **Fix**: {specific remediation}

### Major (Level AA violations)
- [{criterion}] {description}
  - **Location**: ...
  - **Impact**: ...
  - **Fix**: ...

### Advisory (Best practices & AAA)
- {recommendation}

### Passed
- {list of criteria that passed}

### Summary
- Critical: {N} | Major: {N} | Advisory: {N} | Passed: {N}
```

## Severity Classification

| Severity | Definition | Action |
|---|---|---|
| Critical | Blocks access for one or more disability groups | Must fix before release |
| Major | Significantly degrades experience for assistive tech users | Should fix before release |
| Advisory | Enhancement that improves experience but doesn't block access | Fix when possible |

## Common Patterns & Fixes

Reference these when recommending fixes:

- **Missing alt text**: Use descriptive alt for informational images, `alt=""` for decorative
- **Low contrast**: Use a tool to find the nearest accessible color — don't just say "increase contrast"
- **Missing focus styles**: Add `outline` or custom focus indicator, never `outline: none` without replacement
- **Missing labels**: Prefer visible `<label>` over `aria-label` — visible labels help everyone
- **Custom controls**: Use native HTML elements where possible; if custom, implement full ARIA pattern
- **Dynamic content**: Use `aria-live` regions for content that updates without page reload

## Edge Cases

- If input data is incomplete, state assumptions explicitly and flag gaps
- For time-sensitive situations, prioritize speed over comprehensiveness
- If multiple stakeholders have conflicting needs, document the tradeoffs
- For first-time use, start with a simplified version and iterate
- Adapt the depth and detail to the audience's expertise level