# WCAG 2.1 Quick Reference

## Success criteria by level

### Level A (minimum)

| Criterion                         | Description                                                                           |
| --------------------------------- | ------------------------------------------------------------------------------------- |
| **1.1.1** Non-text Content        | All images, icons have text alternatives                                              |
| **1.2.1** Audio-only/Video-only   | Provide transcript or audio description                                               |
| **1.2.2** Captions                | Video with audio has captions                                                         |
| **1.2.3** Audio Description       | Video has audio description                                                           |
| **1.3.1** Info and Relationships  | Information conveyed through presentation is available programmatically               |
| **1.3.2** Meaningful Sequence     | Reading order is logical                                                              |
| **1.3.3** Sensory Characteristics | Instructions don't rely solely on shape, color, size, location, orientation, or sound |
| **1.4.1** Use of Color            | Color is not the only visual means of conveying information                           |
| **1.4.2** Audio Control           | Audio playing automatically can be paused/stopped                                     |
| **2.1.1** Keyboard                | All functionality available via keyboard                                              |
| **2.1.2** No Keyboard Trap        | Keyboard focus can be moved away from any component                                   |
| **2.1.4** Character Key Shortcuts | Single-key shortcuts can be turned off or remapped                                    |
| **2.2.1** Timing Adjustable       | Time limits can be extended                                                           |
| **2.2.2** Pause, Stop, Hide       | Moving/blinking content can be paused                                                 |
| **2.3.1** Three Flashes           | Nothing flashes more than 3 times per second                                          |
| **2.4.1** Bypass Blocks           | Skip link or landmark navigation available                                            |
| **2.4.2** Page Titled             | Pages have descriptive titles                                                         |
| **2.4.3** Focus Order             | Focus order preserves meaning                                                         |
| **2.4.4** Link Purpose            | Link purpose clear from link text or context                                          |
| **2.5.1** Pointer Gestures        | Multi-point gestures have single-pointer alternatives                                 |
| **2.5.2** Pointer Cancellation    | Down-event doesn't trigger action (use up-event or click)                             |
| **2.5.3** Label in Name           | Accessible name contains visible label text                                           |
| **2.5.4** Motion Actuation        | Motion-triggered functions have alternatives                                          |
| **3.1.1** Language of Page        | Default language specified in HTML                                                    |
| **3.2.1** On Focus                | Focus doesn't trigger unexpected changes                                              |
| **3.2.2** On Input                | Input doesn't trigger unexpected changes                                              |
| **3.3.1** Error Identification    | Input errors clearly described                                                        |
| **3.3.2** Labels or Instructions  | Form inputs have labels or instructions                                               |
| **4.1.1** Parsing                 | HTML is well-formed (no duplicate IDs, proper nesting)                                |
| **4.1.2** Name, Role, Value       | UI components have accessible names and correct roles                                 |

### Level AA (standard)

| Criterion                           | Description                                               |
| ----------------------------------- | --------------------------------------------------------- |
| **1.2.4** Captions (Live)           | Live audio has captions                                   |
| **1.2.5** Audio Description         | Pre-recorded video has audio description                  |
| **1.3.4** Orientation               | Content doesn't restrict orientation                      |
| **1.3.5** Identify Input Purpose    | Input purpose can be programmatically determined          |
| **1.4.3** Contrast (Minimum)        | 4.5:1 for normal text, 3:1 for large text                 |
| **1.4.4** Resize Text               | Text can be resized to 200% without loss of functionality |
| **1.4.5** Images of Text            | Text used instead of images of text                       |
| **1.4.10** Reflow                   | Content reflows at 320px width without horizontal scroll  |
| **1.4.11** Non-text Contrast        | UI components have 3:1 contrast                           |
| **1.4.12** Text Spacing             | Content adapts to text spacing changes                    |
| **1.4.13** Content on Hover/Focus   | Additional content is dismissible, hoverable, persistent  |
| **2.4.5** Multiple Ways             | Multiple ways to find pages                               |
| **2.4.6** Headings and Labels       | Headings and labels are descriptive                       |
| **2.4.7** Focus Visible             | Focus indicator is visible                                |
| **3.1.2** Language of Parts         | Language changes are marked                               |
| **3.2.3** Consistent Navigation     | Navigation is consistent across pages                     |
| **3.2.4** Consistent Identification | Same functionality uses same labels                       |
| **3.3.3** Error Suggestion          | Error corrections suggested when known                    |
| **3.3.4** Error Prevention (Legal)  | Actions can be reversed or confirmed                      |
| **4.1.3** Status Messages           | Status messages announced to screen readers               |

### Level AAA (enhanced)

| Criterion                               | Description                                  |
| --------------------------------------- | -------------------------------------------- |
| **1.4.6** Contrast (Enhanced)           | 7:1 for normal text, 4.5:1 for large text    |
| **1.4.8** Visual Presentation           | Foreground/background colors can be selected |
| **1.4.9** Images of Text (No Exception) | No images of text                            |
| **2.1.3** Keyboard (No Exception)       | All functionality keyboard accessible        |
| **2.2.3** No Timing                     | No time limits                               |
| **2.2.4** Interruptions                 | Interruptions can be postponed               |
| **2.2.5** Re-authenticating             | Data preserved on re-authentication          |
| **2.2.6** Timeouts                      | Users warned about data loss from inactivity |
| **2.3.2** Three Flashes                 | No content flashes more than 3 times         |
| **2.3.3** Animation from Interactions   | Motion animation can be disabled             |
| **2.4.8** Location                      | User location within site is available       |
| **2.4.9** Link Purpose (Link Only)      | Link purpose clear from link text alone      |
| **2.4.10** Section Headings             | Sections have headings                       |
| **3.1.3** Unusual Words                 | Definitions available for unusual words      |
| **3.1.4** Abbreviations                 | Abbreviations expanded                       |
| **3.1.5** Reading Level                 | Alternative content for complex text         |
| **3.1.6** Pronunciation                 | Pronunciation available where needed         |
| **3.2.5** Change on Request             | Changes initiated only by user               |
| **3.3.5** Help                          | Context-sensitive help available             |
| **3.3.6** Error Prevention (All)        | All form submissions can be reviewed         |

## Common ARIA patterns

### Buttons

```html
<button>Label</button>
<!-- or -->
<button aria-label="Close dialog">×</button>
```

### Links

```html
<a href="/page">Descriptive link text</a>
<!-- External links -->
<a href="https://external.com" target="_blank" rel="noopener">
  External site
  <span class="visually-hidden">(opens in new tab)</span>
</a>
```

### Form fields

```html
<label for="email">Email address</label>
<input type="email" id="email" aria-describedby="email-hint" />
<p id="email-hint">We'll never share your email.</p>
```

### Error states

```html
<label for="email">Email</label>
<input type="email" id="email" aria-invalid="true" aria-describedby="email-error" />
<p id="email-error" role="alert">Please enter a valid email address.</p>
```

### Navigation

```html
<nav aria-label="Main">
  <ul>
    <li><a href="/" aria-current="page">Home</a></li>
    <li><a href="/about">About</a></li>
  </ul>
</nav>
```

### Modals

```html
<div role="dialog" aria-modal="true" aria-labelledby="dialog-title">
  <h2 id="dialog-title">Confirm Action</h2>
  <!-- content -->
</div>
```

### Live regions

```html
<!-- Polite (waits for pause in speech) -->
<div aria-live="polite">Status update here</div>

<!-- Assertive (interrupts immediately) -->
<div aria-live="assertive" role="alert">Error message here</div>

<!-- Status (polite, implicit) -->
<div role="status">Loading complete</div>
```

## Testing tools

| Tool                     | Type                    | URL                                                      |
| ------------------------ | ----------------------- | -------------------------------------------------------- |
| axe DevTools             | Browser extension       | [deque.com/axe](https://www.deque.com/axe/)              |
| WAVE                     | Browser extension       | [wave.webaim.org](https://wave.webaim.org/)              |
| Lighthouse               | Built into Chrome       | DevTools → Lighthouse                                    |
| NVDA                     | Screen reader (Windows) | [nvaccess.org](https://www.nvaccess.org/)                |
| VoiceOver                | Screen reader (Mac)     | Built into macOS                                         |
| Colour Contrast Analyser | Desktop app             | [tpgi.com](https://www.tpgi.com/color-contrast-checker/) |
