WCAG Audit Patterns Skill

WCAG Audit Patterns

Comprehensive guide to auditing web content against WCAG 2.2 guidelines with actionable remediation strategies.

When to Use This Skill

Conducting accessibility audits
Fixing WCAG violations
Implementing accessible components
Preparing for accessibility lawsuits
Meeting ADA/Section 508 requirements
Achieving VPAT compliance

Core Concepts

1. WCAG Conformance Levels

| Level | Description | Required For | | ------- | ---------------------- | ----------------- | | A | Minimum accessibility | Legal baseline | | AA | Standard conformance | Most regulations | | AAA | Enhanced accessibility | Specialized needs |

2. POUR Principles

Perceivable:  Can users perceive the content?
Operable:     Can users operate the interface?
Understandable: Can users understand the content?
Robust:       Does it work with assistive tech?

3. Common Violations by Impact

Critical (Blockers):
├── Missing alt text for functional images
├── No keyboard access to interactive elements
├── Missing form labels
└── Auto-playing media without controls

Serious:
├── Insufficient color contrast
├── Missing skip links
├── Inaccessible custom widgets
└── Missing page titles

Moderate:
├── Missing language attribute
├── Unclear link text
├── Missing landmarks
└── Improper heading hierarchy

Audit Checklist

Covers every WCAG 2.2 Level A and AA success criterion. The four AAA criteria (2.4.12, 2.4.13, 3.3.9, and the rest of the AAA set) are deliberately out of scope — audit them against the specification directly when a product targets AAA.

4.1.1 Parsing is obsolete in WCAG 2.2 and is retained below only as a good-practice note.

Where better-accessibility is named, that skill owns the prescriptive remedy; this checklist owns the conformance question. When it is unavailable, apply the checklist item against the specification and record that the remedy detail went uncovered.

Perceivable (Principle 1)

## 1.1 Text Alternatives

### 1.1.1 Non-text Content (Level A)

- [ ] All images have alt text
- [ ] Decorative images have alt=""
- [ ] Complex images have long descriptions
- [ ] Icons with meaning have accessible names
- [ ] CAPTCHAs have alternatives

Check:

```html
<!-- Good -->
<img src="chart.png" alt="Sales increased 25% from Q1 to Q2" />
<img src="decorative-line.png" alt="" />

<!-- Bad -->
<img src="chart.png" />
<img src="decorative-line.png" alt="decorative line" />
```

1.2 Time-based Media

1.2.1 Audio-only and Video-only (Level A)

[ ] Audio has text transcript
[ ] Video has audio description or transcript

1.2.2 Captions (Level A)

[ ] All video has synchronized captions
[ ] Captions are accurate and complete
[ ] Speaker identification included

1.2.3 Audio Description (Level A)

[ ] Video has audio description for visual content

1.2.4 Captions (Live) (Level AA)

[ ] Live audio content has real-time captions

1.2.5 Audio Description (Prerecorded) (Level AA)

[ ] Prerecorded video has a full audio description track

1.3 Adaptable

1.3.1 Info and Relationships (Level A)

[ ] Headings use proper tags (h1-h6)
[ ] Lists use ul/ol/dl
[ ] Tables have headers
[ ] Form inputs have labels
[ ] ARIA landmarks present

Check:

<!-- Heading hierarchy -->
<h1>Page Title</h1>
<h2>Section</h2>
<h3>Subsection</h3>
<h2>Another Section</h2>

<!-- Table headers -->
<table>
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">Price</th>
    </tr>
  </thead>
</table>

1.3.2 Meaningful Sequence (Level A)

[ ] Reading order is logical
[ ] CSS positioning doesn't break order
[ ] Focus order matches visual order

1.3.3 Sensory Characteristics (Level A)

[ ] Instructions don't rely on shape/color alone
[ ] "Click the red button" → "Click Submit (red button)"

1.3.4 Orientation (Level AA)

[ ] Content works in both portrait and landscape
[ ] Orientation locked only where essential

1.3.5 Identify Input Purpose (Level AA)

[ ] Inputs collecting user data carry the right autocomplete token

<input name="email" type="email" autocomplete="email" />
<input name="tel" type="tel" autocomplete="tel" />

1.4 Distinguishable

1.4.1 Use of Color (Level A)

[ ] Color is not only means of conveying info
[ ] Links distinguishable without color
[ ] Error states not color-only

1.4.2 Audio Control (Level A)

[ ] Audio playing over 3 seconds can be paused or stopped
[ ] Volume control independent of system volume

1.4.3 Contrast (Minimum) (Level AA)

[ ] Text: 4.5:1 contrast ratio
[ ] Large text (18pt+): 3:1 ratio
[ ] UI components: 3:1 ratio

Tools: WebAIM Contrast Checker, axe DevTools

1.4.4 Resize Text (Level AA)

[ ] Text resizes to 200% without loss
[ ] No horizontal scrolling at 320px
[ ] Content reflows properly

1.4.5 Images of Text (Level AA)

[ ] Real text used instead of images of text
[ ] Exceptions are logos and essential presentation only

1.4.10 Reflow (Level AA)

[ ] Content reflows at 400% zoom
[ ] No two-dimensional scrolling
[ ] All content accessible at 320px width

1.4.11 Non-text Contrast (Level AA)

[ ] UI components have 3:1 contrast
[ ] Focus indicators visible
[ ] Graphical objects distinguishable

1.4.12 Text Spacing (Level AA)

[ ] No content loss with increased spacing
[ ] Line height 1.5x font size
[ ] Paragraph spacing 2x font size
[ ] Letter spacing 0.12x font size
[ ] Word spacing 0.16x font size

1.4.13 Content on Hover or Focus (Level AA)

[ ] Hover/focus content is dismissible without moving the pointer
[ ] Pointer can move onto the revealed content without it disappearing
[ ] Content stays visible until dismissed, invalid, or no longer relevant

Tooltips and hover menus are the usual failures. better-accessibility owns the rule.


### Operable (Principle 2)

```markdown
## 2.1 Keyboard Accessible

### 2.1.1 Keyboard (Level A)
- [ ] All functionality keyboard accessible
- [ ] No keyboard traps
- [ ] Tab order is logical
- [ ] Custom widgets are keyboard operable

Check:
```javascript
// Custom button must be keyboard accessible
<div role="button" tabindex="0"
     onkeydown="if(event.key === 'Enter' || event.key === ' ') activate()">

2.1.2 No Keyboard Trap (Level A)

[ ] Focus can move away from all components
[ ] Modal dialogs trap focus correctly
[ ] Focus returns after modal closes

2.1.4 Character Key Shortcuts (Level A)

[ ] Single-character shortcuts can be turned off, remapped, or are focus-scoped

A bare / or s hotkey fires while a speech-input user is dictating.

2.2 Enough Time

2.2.1 Timing Adjustable (Level A)

[ ] Session timeouts can be extended
[ ] User warned before timeout
[ ] Option to disable auto-refresh

2.2.2 Pause, Stop, Hide (Level A)

[ ] Moving content can be paused
[ ] Auto-updating content can be paused
[ ] Animations respect prefers-reduced-motion

/* Reduce motion, do not remove feedback. A blanket kill also removes the state
   change the animation was communicating, leaving the user with no signal at all. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    /* Collapse movement to a crossfade rather than deleting the transition. */
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

Replace slides, scales, and parallax with an opacity crossfade; keep loading and progress indicators, which convey state rather than decoration. better-accessibility owns this rule.

2.3 Seizures and Physical Reactions

2.3.1 Three Flashes (Level A)

[ ] No content flashes more than 3 times/second
[ ] Flashing area is small (<25% viewport)

2.4 Navigable

2.4.1 Bypass Blocks (Level A)

[ ] Skip to main content link present
[ ] Landmark regions defined
[ ] Proper heading structure

<a href="#main" class="skip-link">Skip to main content</a>
<main id="main">...</main>

2.4.2 Page Titled (Level A)

[ ] Unique, descriptive page titles
[ ] Title reflects page content

2.4.3 Focus Order (Level A)

[ ] Focus order matches visual order
[ ] tabindex used correctly

2.4.4 Link Purpose (In Context) (Level A)

[ ] Links make sense out of context
[ ] No "click here" or "read more" alone

<!-- Bad -->
<a href="report.pdf">Click here</a>

<!-- Good -->
<a href="report.pdf">Download Q4 Sales Report (PDF)</a>

2.4.5 Multiple Ways (Level AA)

[ ] More than one route to each page: nav, search, sitemap, or index
[ ] Exception is a page that is a step in a process

2.4.6 Headings and Labels (Level AA)

[ ] Headings describe content
[ ] Labels describe purpose

2.4.7 Focus Visible (Level AA)

[ ] Focus indicator visible on all elements
[ ] Custom focus styles meet contrast

/* :focus-visible, not :focus -- bare :focus also rings on mouse click. */
:focus-visible {
  outline: 3px solid #005fcc;
  outline-offset: 2px;
}

2.4.11 Focus Not Obscured (Minimum) (Level AA) - WCAG 2.2

[ ] Focused element not entirely hidden by author-created content
[ ] Sticky headers, fixed footers, and cookie banners don't obscure focus

Partial obscuring passes at AA; full obscuring fails. better-accessibility owns the scroll-padding-block remedy.

2.5 Input Modalities

2.5.1 Pointer Gestures (Level A)

[ ] Multipoint and path-based gestures have a single-pointer alternative
[ ] Pinch-zoom, swipe, and drag-along-a-path are not the only path

2.5.2 Pointer Cancellation (Level A)

[ ] Action fires on up-event, not down-event
[ ] Action can be aborted by moving away before release

2.5.3 Label in Name (Level A)

[ ] Accessible name contains the visible label text, in the same order
[ ] aria-label does not contradict the visible text a speech user will say

<!-- Bad: speech user says "Search", nothing matches -->
<button aria-label="Submit query">Search</button>

<!-- Good -->
<button aria-label="Search products">Search</button>

2.5.4 Motion Actuation (Level A)

[ ] Shake, tilt, and other device-motion triggers have a UI equivalent
[ ] Motion response can be disabled

2.5.7 Dragging Movements (Level AA) - WCAG 2.2

[ ] Every drag operation has a single-pointer path that is not dragging
[ ] Reorderable lists, sliders, kanban boards, and resize handles checked
[ ] Exceptions claimed only where dragging is essential or user-agent owned

better-accessibility owns the remedy patterns.

2.5.8 Target Size (Minimum) (Level AA) - WCAG 2.2

[ ] Targets are at least 24x24 CSS pixels, or meet a defined exception
[ ] Exception claimed by name: Spacing, Equivalent, Inline, User Agent Control, Essential

Undersized targets are not automatic failures — check the five exceptions before reporting one. better-accessibility owns the sizing rule and the spacing math.


### Understandable (Principle 3)

```markdown
## 3.1 Readable

### 3.1.1 Language of Page (Level A)
- [ ] HTML lang attribute set
- [ ] Language correct for content

```html
<html lang="en">

3.1.2 Language of Parts (Level AA)

[ ] Language changes marked

<p>The French word <span lang="fr">bonjour</span> means hello.</p>

3.2 Predictable

3.2.1 On Focus (Level A)

[ ] No context change on focus alone
[ ] No unexpected popups on focus

3.2.2 On Input (Level A)

[ ] No automatic form submission
[ ] User warned before context change

3.2.3 Consistent Navigation (Level AA)

[ ] Navigation consistent across pages
[ ] Repeated components same order

3.2.4 Consistent Identification (Level AA)

[ ] Same functionality = same label
[ ] Icons used consistently

3.2.6 Consistent Help (Level A) - WCAG 2.2

[ ] Help mechanisms appear in the same relative order on every page that has them
[ ] Contact details, chat, and help links do not move between pages

Applies only to help that already exists; the criterion does not require adding help.

3.3 Input Assistance

3.3.1 Error Identification (Level A)

[ ] Errors clearly identified
[ ] Error message describes problem
[ ] Error linked to field

<input aria-describedby="email-error" aria-invalid="true" />
<span id="email-error" role="alert">Please enter valid email</span>

3.3.2 Labels or Instructions (Level A)

[ ] All inputs have visible labels
[ ] Required fields indicated
[ ] Format hints provided

3.3.3 Error Suggestion (Level AA)

[ ] Errors include correction suggestion
[ ] Suggestions are specific

3.3.4 Error Prevention (Level AA)

[ ] Legal/financial forms reversible
[ ] Data checked before submission
[ ] User can review before submit

3.3.7 Redundant Entry (Level A) - WCAG 2.2

[ ] Information already entered in the same process is auto-populated or selectable
[ ] Exceptions are re-entry for security, and entries no longer valid

Multi-step checkouts repeating an address are the common failure.

3.3.8 Accessible Authentication (Minimum) (Level AA) - WCAG 2.2

[ ] No cognitive function test (puzzle, memory, transcription) is required to log in
[ ] Or an alternative path exists, or a mechanism assists
[ ] Password fields allow paste and password managers

Blocking paste on a password field is the most common failure of this criterion. Object recognition and personal-content identification remain permitted.


### Robust (Principle 4)

```markdown
## 4.1 Compatible

### 4.1.1 Parsing (Level A) - Obsolete in WCAG 2.2
- [ ] Valid HTML (good practice)
- [ ] No duplicate IDs
- [ ] Complete start/end tags

### 4.1.2 Name, Role, Value (Level A)
- [ ] Custom widgets have accessible names
- [ ] ARIA roles correct
- [ ] State changes announced

```html
<!-- Accessible custom checkbox -->
<div role="checkbox"
     aria-checked="false"
     tabindex="0"
     aria-labelledby="label">
</div>
<span id="label">Accept terms</span>

4.1.3 Status Messages (Level AA)

[ ] Status updates announced
[ ] Live regions used correctly

<div role="status" aria-live="polite">3 items added to cart</div>

<div role="alert" aria-live="assertive">Error: Form submission failed</div>


## Automated Testing

```javascript
// axe-core integration
const axe = require('axe-core');

async function runAccessibilityAudit(page) {
  await page.addScriptTag({ path: require.resolve('axe-core') });

  const results = await page.evaluate(async () => {
    return await axe.run(document, {
      runOnly: {
        type: 'tag',
        values: ['wcag2a', 'wcag21a', 'wcag2aa', 'wcag21aa', 'wcag22aa']
      }
    });
  });

  return {
    violations: results.violations,
    passes: results.passes,
    incomplete: results.incomplete
  };
}

// Playwright test example
test('should have no accessibility violations', async ({ page }) => {
  await page.goto('/');
  const results = await runAccessibilityAudit(page);

  // Failing on `incomplete` as well means axe's "could not determine" nodes
  // never disappear from the audit: they must be manually reviewed or
  // explicitly explained, not silently passed.
  expect({ violations: results.violations, incomplete: results.incomplete }).toEqual({
    violations: [],
    incomplete: []
  });
});

# CLI tools
npx @axe-core/cli https://example.com
npx pa11y https://example.com
lighthouse https://example.com --only-categories=accessibility

Remediation Patterns

Fix: Missing Form Labels

<!-- Before -->
<input type="email" placeholder="Email" />

<!-- After: Option 1 - Visible label -->
<label for="email">Email address</label>
<input id="email" type="email" />

<!-- After: Option 2 - aria-label -->
<input type="email" aria-label="Email address" />

<!-- After: Option 3 - aria-labelledby -->
<span id="email-label">Email</span>
<input type="email" aria-labelledby="email-label" />

Fix: Insufficient Color Contrast

/* Before: 2.5:1 contrast */
.text {
  color: #767676;
}

/* After: 4.5:1 contrast */
.text {
  color: #595959;
}

/* Or add background */
.text {
  color: #767676;
  background: #000;
}

Fix: Keyboard Navigation

// Make custom element keyboard accessible
class AccessibleDropdown extends HTMLElement {
  connectedCallback() {
    this.setAttribute("tabindex", "0");
    this.setAttribute("role", "combobox");
    this.setAttribute("aria-expanded", "false");

    this.addEventListener("keydown", (e) => {
      switch (e.key) {
        case "Enter":
        case " ":
          this.toggle();
          e.preventDefault();
          break;
        case "Escape":
          this.close();
          break;
        case "ArrowDown":
          this.focusNext();
          e.preventDefault();
          break;
        case "ArrowUp":
          this.focusPrevious();
          e.preventDefault();
          break;
      }
    });
  }
}

Best Practices

Do's

Start early - Accessibility from design phase
Test with real users - Disabled users provide best feedback
Automate what you can - 30-50% issues detectable
Use semantic HTML - Reduces ARIA needs
Document patterns - Build accessible component library

Don'ts

Don't rely only on automated testing - Manual testing required
Don't use ARIA as first solution - Native HTML first
Don't hide focus outlines - Keyboard users need them
Don't disable zoom - Users need to resize
Don't use color alone - Multiple indicators needed

Agent Skills: WCAG Audit Patterns

Install this agent skill to your local

Skill Files