WCAG 2.2 Accessibility Audit skill for Codex

Gives the Codex app a display name, a one-line description and a starter prompt for this skill.

interface:
  display_name: "WCAG 2.2 Accessibility Audit"
  short_description: "Findings mapped to criteria, with fixes"
  default_prompt: "$wcag-accessibility-audit Audit our checkout flow against WCAG 2.2 AA and give me a prioritized report"

# WCAG 2.2 Level A and AA: test checklist

55 success criteria (31 A, 24 AA). 4.1.1 Parsing was removed in 2.2 and is not listed.
"Auto" means axe-core can flag some failures; every row still needs the manual check.
Paraphrased for testing; cite the official criterion name in reports.

## 1 Perceivable

| SC | Level | Name | How to test |
|---|---|---|---|
| 1.1.1 | A | Non-text Content | Auto + manual: informative images have alt that conveys purpose; decorative ones `alt=""`; icon buttons, charts, CAPTCHAs have text alternatives |
| 1.2.1 | A | Audio-only and Video-only (Prerecorded) | Transcript for audio-only; transcript or audio track for silent video |
| 1.2.2 | A | Captions (Prerecorded) | Captions present, synchronized, include speakers and meaningful sounds |
| 1.2.3 | A | Audio Description or Media Alternative (Prerecorded) | Visual-only information in video is described or a full text alternative exists |
| 1.2.4 | AA | Captions (Live) | Live streams have real-time captions |
| 1.2.5 | AA | Audio Description (Prerecorded) | Audio description track for visual information not in the dialogue |
| 1.3.1 | A | Info and Relationships | Auto + manual: headings, lists, tables (`th`, scope), labels, fieldset/legend and landmarks expressed in markup, not only styling |
| 1.3.2 | A | Meaningful Sequence | DOM/reading order matches visual order; check CSS order, grid placement, absolute positioning |
| 1.3.3 | A | Sensory Characteristics | Instructions do not rely only on shape, position, color or sound ("click the round button on the right") |
| 1.3.4 | AA | Orientation | Works in portrait and landscape; no orientation lock unless essential |
| 1.3.5 | AA | Identify Input Purpose | Auto: user-data fields have correct `autocomplete` tokens (`email`, `given-name`, `street-address`, `one-time-code`) |
| 1.4.1 | A | Use of Color | Links in body text, errors, required fields, chart series are distinguishable without color |
| 1.4.2 | A | Audio Control | Audio that autoplays more than 3 s can be paused or muted independently |
| 1.4.3 | AA | Contrast (Minimum) | Auto + manual: 4.5:1 text, 3:1 large text; check states, text over images and gradients |
| 1.4.4 | AA | Resize Text | Browser zoom 200%: nothing clipped, overlapping or lost |
| 1.4.5 | AA | Images of Text | Real text used instead of text baked into images, except logos |
| 1.4.10 | AA | Reflow | 320 CSS px width (1280 px at 400%): single column, no two-dimensional scrolling except for data tables, maps, diagrams |
| 1.4.11 | AA | Non-text Contrast | 3:1 for input borders, focus rings, toggles, checkbox outlines, meaningful icons and chart elements against adjacent colors |
| 1.4.12 | AA | Text Spacing | Apply spacing bookmarklet (1.5 line, 2x paragraph, 0.12em letter, 0.16em word): no clipped or overlapping text |
| 1.4.13 | AA | Content on Hover or Focus | Tooltips/popovers: dismiss with Escape without moving pointer, pointer can move onto them, stay until dismissed |

## 2 Operable

| SC | Level | Name | How to test |
|---|---|---|---|
| 2.1.1 | A | Keyboard | Every function works with keyboard alone; no hover-only or drag-only controls |
| 2.1.2 | A | No Keyboard Trap | Focus can always move away (including iframes, editors, modals by Escape or close button) |
| 2.1.4 | A | Character Key Shortcuts | Single-key shortcuts can be turned off, remapped, or only work when the component has focus |
| 2.2.1 | A | Timing Adjustable | Session timeouts warn and allow extension (at least 20 s to respond), unless real-time or over 20 h |
| 2.2.2 | A | Pause, Stop, Hide | Carousels, marquees, auto-updating feeds lasting over 5 s have pause or stop controls |
| 2.3.1 | A | Three Flashes or Below Threshold | No content flashes more than 3 times per second |
| 2.4.1 | A | Bypass Blocks | Skip link to main content works, or landmarks/headings allow bypassing |
| 2.4.2 | A | Page Titled | Unique, descriptive `<title>`, updated on SPA route change |
| 2.4.3 | A | Focus Order | Tab order preserves meaning; dialogs receive focus; no positive `tabindex` chaos |
| 2.4.4 | A | Link Purpose (In Context) | Link text plus its sentence, paragraph or list item explains the destination; no bare "click here" lists |
| 2.4.5 | AA | Multiple Ways | At least two ways to reach pages (nav, search, sitemap), except steps in a process |
| 2.4.6 | AA | Headings and Labels | Headings and labels describe topic or purpose |
| 2.4.7 | AA | Focus Visible | Visible focus indicator on every focusable element |
| 2.4.11 | AA | Focus Not Obscured (Minimum) | Focused element is not entirely hidden by sticky headers, footers, banners or chat widgets |
| 2.5.1 | A | Pointer Gestures | Multipoint or path gestures (pinch, swipe) have single-pointer alternatives (buttons) |
| 2.5.2 | A | Pointer Cancellation | Actions fire on up-event, or can be aborted by moving off before release |
| 2.5.3 | A | Label in Name | Accessible name contains the visible label text (voice control users say what they see) |
| 2.5.4 | A | Motion Actuation | Shake/tilt functions have UI alternatives and can be disabled |
| 2.5.7 | AA | Dragging Movements | Drag operations (sortable lists, sliders, maps) have a single-pointer non-drag alternative |
| 2.5.8 | AA | Target Size (Minimum) | Targets at least 24x24 CSS px, or spaced so a 24 px circle around each does not overlap another; inline links and native controls exempt |

## 3 Understandable

| SC | Level | Name | How to test |
|---|---|---|---|
| 3.1.1 | A | Language of Page | Auto: `<html lang>` present and correct |
| 3.1.2 | AA | Language of Parts | Passages in another language carry `lang` |
| 3.2.1 | A | On Focus | Focusing an element does not submit, navigate or open a new window |
| 3.2.2 | A | On Input | Changing a select or checkbox does not trigger unexpected context changes without warning |
| 3.2.3 | AA | Consistent Navigation | Repeated navigation keeps the same relative order across pages |
| 3.2.4 | AA | Consistent Identification | Same function, same name and icon across pages |
| 3.2.6 | A | Consistent Help | Help links, contact details or chat appear in the same relative order on each page that has them |
| 3.3.1 | A | Error Identification | Errors are described in text and the field is identified |
| 3.3.2 | A | Labels or Instructions | Labels and required-format hints present before input |
| 3.3.3 | AA | Error Suggestion | Error messages say how to fix the problem when known |
| 3.3.4 | AA | Error Prevention (Legal, Financial, Data) | Submissions are reversible, checked, or confirmed before final commit |
| 3.3.7 | A | Redundant Entry | Previously entered info in the same process is auto-filled or selectable, unless re-entry is essential (e.g. password confirmation for security) |
| 3.3.8 | AA | Accessible Authentication (Minimum) | No cognitive function test to log in, unless an alternative, a mechanism to assist (paste, password manager, show password), or object/personal-content recognition is offered |

## 4 Robust

| SC | Level | Name | How to test |
|---|---|---|---|
| 4.1.2 | A | Name, Role, Value | Auto + screen reader: custom widgets expose role, name, state (`aria-expanded`, `aria-checked`, `aria-selected`) and update them |
| 4.1.3 | AA | Status Messages | Toasts, result counts, "saved", cart updates announced via `role="status"`/`aria-live` without moving focus |

## Coverage table format

```markdown
| SC | Result | Notes |
|---|---|---|
| 1.1.1 | Fail | Findings 3, 8 |
| 1.2.2 | Not applicable | No video content in scope |
| 2.5.8 | Pass | Spot-checked 40 controls at 1x zoom |
| 1.4.10 | Not tested | Checkout iframe provided by payment vendor |
```