`, `

without

without scope="col" or scope="row" # Missing lang on (WCAG 3.1.1) ]*lang=) # Inline foreign language without lang (WCAG 3.1.2) # In bilingual GC sites, look for mixed-language content: # e.g., "Submit / Soumettre" without ``` --- #### B. Focus Management & Keyboard Navigation **Rule:** All interactive elements must be reachable and operable via keyboard. **Checks:** | Check | What to Look For | Severity | |-------|------------------|----------| | Positive tabindex | `tabindex="[1-9]"` or higher values | ❌ Fail | | Missing focus indicators | No `:focus` or `:focus-visible` styles | ⚠️ Warning | | Modal focus trapping | Modal components without focus trap logic | ❌ Fail | | Skip to main content | Layout files without skip link | ⚠️ Warning | | Non-focusable interactive | `onClick` on non-focusable element without `tabindex="0"` | ❌ Fail | **Detection patterns:** ``` # Positive tabindex tabindex=["'][1-9] tabindex=["']\d{2,} # Skip links Look for: "skip to main", "skip to content", "skip navigation" # Focus styles :focus or :focus-visible in CSS ``` --- #### C. Text Alternatives & Labeling **Rule:** Every non-text element must have a text alternative. Every form input must have a programmatically associated label. **Checks:** | Check | What to Look For | Severity | |-------|------------------|----------| | Missing alt text | `` without `alt` attribute | ❌ Fail | | Unlabeled form input | ``, `

**Detection patterns:**
```
# Missing alt
<img[^>]*(?!alt=)[^>]*>
<img(?![^>]*alt=)

# Form inputs without labels
<input[^>]*> not preceded by <label> or lacking aria-label
<select[^>]*> without associated label
<textarea[^>]*> without associated label

# Icon-only buttons
<button[^>]*>[\s]*<(svg|i|span)[^>]*>[\s]*</(svg|i|span)>[\s]*</button>
without aria-label

**Valid decorative image:**
```html
<img src="divider.png" alt="" role="presentation">
```

---

#### D. ARIA Patterns

**Rule:** Use ARIA only when native HTML is insufficient. Ensure correct state management.

**Checks:**
| Check | What to Look For | Severity |
|-------|------------------|----------|
| ARIA redundancy | `<button aria-label="Submit">Submit</button>` | ⚠️ Warning |
| Missing aria-live | Dynamic content (toasts, alerts) without `aria-live` | ❌ Fail |
| aria-hidden on focusable | `aria-hidden="true"` on element with focusable children | ❌ Fail |
| Invalid ARIA attribute | Misspelled or non-existent ARIA attributes | ❌ Fail |
| Missing aria-expanded | Collapsible/expandable controls without state | ⚠️ Warning |

**Detection patterns:**
```
# Redundant ARIA
<button[^>]*aria-label=["']([^"']+)["'][^>]*>\s*\1\s*</button>

# Dynamic content without aria-live
Components named: Toast, Alert, Notification, Snackbar
without aria-live="polite" or aria-live="assertive"

# aria-hidden with focusable
aria-hidden="true" containing: <a>, <button>, <input>, tabindex
```

**Correct ARIA usage:**
```html

<button aria-expanded="false" aria-controls="section1">Toggle</button>
<div id="section1" aria-hidden="true">Content</div>

<div aria-live="polite" aria-atomic="true">
  
</div>
```

---

#### E. Visual Integrity & Responsive Adaptation

**Rule:** Support user-defined scaling, responsive reflow, and avoid color-only meaning.

**Checks:**
| Check | What to Look For | Severity |
|-------|------------------|----------|
| Hardcoded font-size px | `font-size: 16px;` instead of `rem`/`em` | ⚠️ Warning |
| Color-only status | Red text for error without icon or "Error:" prefix | ⚠️ Warning |
| Fixed viewport | `<meta name="viewport"...maximum-scale=1` or `user-scalable=no` | ❌ Fail |
| Small touch targets | Buttons/links smaller than 44x44px | ⚠️ Warning |
| Content reflow blocked | Fixed-width containers > 320px or `overflow-x: hidden` on body/main (WCAG 1.4.10) | ⚠️ Warning |
| Text spacing overrides | `line-height`, `letter-spacing`, or `word-spacing` with `!important` blocking user overrides (WCAG 1.4.12) | ⚠️ Warning |
| Hover/focus content not dismissible | Tooltip/popover on hover/focus without Escape key handling (WCAG 1.4.13) | ⚠️ Warning |

**Detection patterns:**
```
# Hardcoded px fonts
font-size:\s*\d+px

# Viewport restrictions
user-scalable\s*=\s*(no|0)
maximum-scale\s*=\s*1

# Color classes without context
.text-red, .text-danger, .error-text
without accompanying icon or text prefix

# Reflow issues (WCAG 1.4.10)
width:\s*\d{3,}px        # fixed widths >= 100px
min-width:\s*\d{3,}px
overflow-x:\s*hidden      # on body/main containers

# Text spacing overrides (WCAG 1.4.12)
line-height:[^;]*!important
letter-spacing:[^;]*!important
word-spacing:[^;]*!important

# Hover/focus content (WCAG 1.4.13)
:hover[^{]*\{[^}]*(display|visibility|opacity)
# Verify associated JS has Escape key handler
```

---

#### F. GC Patterns (Canada.ca / WET-BOEW)

**Rule:** Government of Canada websites using WET-BOEW / GCWeb must follow Canada.ca accessibility patterns.

**Checks:**
| Check | What to Look For | Severity |
|-------|------------------|----------|
| Inaccessible download link | File download link (PDF, DOCX, etc.) without file type and size info | ⚠️ Warning |
| Alert missing ARIA role | Alert/notification component without `role="alert"` or `role="status"` | ❌ Fail |
| TOC missing nav wrapper | Table of contents / heading navigation without `<nav>` and `aria-label` | ⚠️ Warning |
| Status message not announced | Dynamic status text (success, error, loading) without `aria-live` or `role="status"` (WCAG 4.1.3) | ❌ Fail |

# Alert components without ARIA
class=["'][^"']*alert[^"']*["']
# Without role="alert" or role="status"

# TOC without nav wrapper
class=["'][^"']*(toc|table-of-contents|gc-toc|onThisPage)[^"']*["']
# Without <nav> wrapper and aria-label

# Status messages (WCAG 4.1.3)
class=["'][^"']*(success|error|loading|status|message)[^"']*["']
# Without role="status" or aria-live
```

**Correct patterns:**
```html

<a href="report.pdf">Annual Report 2024 (<abbr title="Portable Document Format">PDF</abbr>, 2.3 <abbr title="megabytes">MB</abbr>)</a>

<div class="alert alert-warning" role="alert">
  <p>This page requires translation.</p>
</div>

<nav aria-label="Table of contents">
  <h2>On this page</h2>
  <ul>...</ul>
</nav>

<div role="status" aria-live="polite">Form submitted successfully.</div>
```

---

### Step 5: Present Findings

Present all findings in this structured table format:

```markdown
## Accessibility Review Results

| Status | File | Issue Found | Recommended Action |
| :--- | :--- | :--- | :--- |
| ❌ **Fail** | `{file}:{line}` | [Accessibility Error] {description} | {fix recommendation} |
| ⚠️ **Warning** | `{file}:{line}` | [Accessibility Warning] {description} | {recommendation} |
| ✅ **Pass** | `{file}` | {good practice description} | None |
```

**Example output:**

---

### Step 6: Fix Selection

If any issues were found, offer to help fix them:

Use AskUserQuestion with the following options:

**Question:** "How would you like to handle the accessibility issues?"

**Options:**
1. "Fix all issues" - Apply all recommended fixes
2. "Fix critical (❌ Fail) only" - Apply only the critical fixes
3. "Review each fix individually" - Go through each fix one by one
4. "None (just report)" - Don't apply any fixes, keep as reference

For each fix applied:
1. Make the code change using the Edit tool
2. Note what was changed in the summary

### Step 7: Summary

Provide a summary of the review:

```markdown
## Summary

**Files Reviewed:** {count}
**Issues Found:** {total}
- ❌ Critical: {count}
- ⚠️ Warnings: {count}
- ✅ Passes: {count}

**Compliance Status:** {PASS/FAIL}

{Brief assessment of overall accessibility health}
```

**Overall Assessment Guidelines:**
- **PASS**: Zero ❌ Fail issues
- **FAIL**: One or more ❌ Fail issues

---

## Quick Reference: Common Fixes

### Replace div/span buttons:
```html

<div onClick={handleClick}>Click me</div>

<button type="button" onClick={handleClick}>Click me</button>
```

### Add form labels:
```html

<input type="email" placeholder="Email">

<label for="email">Email</label>
<input type="email" id="email" placeholder="Email">

<input type="email" aria-label="Email address" placeholder="Email">
```

### Add alt text:
```html

<img src="chart.png" alt="Sales increased 25% in Q4 2024">

<img src="divider.png" alt="" role="presentation">
```

### Add skip link:
```html
<body>
  <a href="#main-content" class="skip-link">Skip to main content</a>
  <nav>...</nav>
  <main id="main-content">...</main>
</body>
```

### Accessible download links:
```html

<a href="report.pdf">Download report</a>

<a href="report.pdf">Download report (<abbr title="Portable Document Format">PDF</abbr>, 2.3 <abbr title="megabytes">MB</abbr>)</a>
```

### Add aria-live for dynamic content:
```html
<div aria-live="polite" aria-atomic="true" class="toast">
  {message}
</div>
```

---

## WCAG 2.1 Level AA Quick Reference

| Principle | Guidelines |
|-----------|------------|
| **Perceivable** | Text alternatives, captions, adaptable content, distinguishable colors, reflow, text spacing |
| **Operable** | Keyboard accessible, enough time, no seizure triggers, navigable, content on hover/focus |
| **Understandable** | Readable, predictable, input assistance, language of page and parts |
| **Robust** | Compatible with assistive technologies, status messages |

**Criteria covered:** 1.1.1, 1.3.1, 1.3.5, 1.4.1, 1.4.10, 1.4.12, 1.4.13, 2.1.1, 2.4.1, 2.4.3, 2.4.7, 3.1.1, 3.1.2, 4.1.2, 4.1.3

---

## Remember

Your goal is to ensure **everyone can use the interface**, including:
- Users who are blind or have low vision
- Users who are deaf or hard of hearing
- Users with motor impairments
- Users with cognitive disabilities
- Users with temporary disabilities

Every issue you raise:
1. Points to specific code (file:line)
2. Explains the accessibility impact
3. Shows how to fix it with code examples
4. References WCAG guidelines where applicable

For Government of Canada projects, also check for Canada.ca / WET-BOEW patterns including bilingual `lang` attributes, accessible download links, and properly announced status messages.

The best accessibility review prevents barriers before users encounter them.