Skip to content
Merged
Changes from 3 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 20 additions & 1 deletion cli-tool/components/agents/accessibility/accessibility-tester.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,10 +17,12 @@ Automated tools typically catch 30–40% of WCAG violations industry-wide (axe-c
Use CLI tools to identify programmatic violations efficiently:
- `npx @axe-core/cli <url> --exit` — catches ARIA errors, missing labels, contrast failures; add `--tags wcag2a,wcag2aa,wcag21a,wcag21aa,wcag22aa` to explicitly request WCAG 2.2 rule coverage
- `npx lighthouse <url> --only-categories=accessibility` — Lighthouse accessibility score with opportunities
- `npx pa11y <url>` — WCAG 2.1/2.2 rule-set with detailed failure messages
- `npx pa11y <url> --runner axe --standard WCAG2AA` — pa11y's default runner is `htmlcs` (HTML_CodeSniffer), which is WCAG 2.0-era and does not reliably surface WCAG 2.1/2.2 violations; pass `--runner axe` explicitly to get axe-core-backed, WCAG 2.1/2.2-aligned results
Comment thread
davila7 marked this conversation as resolved.
Outdated

Parse tool output and deduplicate findings before reporting.

Confirm the resolved `axe-core` version is ≥4.5 (ideally current, e.g. 4.11) before trusting WCAG 2.2 coverage — run `npx @axe-core/cli --version` — since older pinned/cached versions silently omit WCAG 2.2 rules even when `wcag22aa` is requested.
Comment thread
davila7 marked this conversation as resolved.
Outdated

**Track 1b — Scripted interaction testing (where test infra exists)**
For repeatable checks of tab order, focus trapping in modals, `aria-expanded`/`aria-selected` state changes, and focus restoration on close, use Deque's official Playwright integration rather than relying solely on the manual checklist:
- `npx playwright test --grep @a11y` — run tagged accessibility interaction tests
Expand All @@ -44,6 +46,8 @@ Run after automated scan to surface human-judgement violations:
- Images: meaningful images have descriptive alt text; decorative images use `alt=""`
- Forms: all inputs have associated labels; error messages are specific and programmatically linked
- Live regions: dynamic content updates announced via `aria-live` with appropriate politeness
- Documents: linked PDFs/Office files are tagged, have a logical reading order, and include alt text for embedded images (Section 508 and EAA scope commonly extends to downloadable documents, not just rendered web pages)
- Contrast preferences: UI remains usable and all information is conveyed when Windows High Contrast / `forced-colors: active` and `prefers-contrast: more` are each enabled; no information conveyed by background-image or box-shadow alone

## WCAG 2.2 Reference Standard

Expand All @@ -65,6 +69,8 @@ WCAG 3.0 remains a W3C Working Draft (not expected before ~2029) and will not re
| 3.3.8 | AA | Accessible Authentication (Minimum) | No cognitive function test required unless an alternative or assistance is provided |
| 3.3.9 | AAA | Accessible Authentication (Enhanced) | No cognitive function test required at all during authentication |

Of these 9 criteria, only **2.5.8 Target Size (Minimum)** has a dedicated automated check today — axe-core's `target-size` rule (axe-core ≥4.5, only fires when the `wcag22aa` tag is requested). The remaining 8 criteria have no reliable automated coverage and must be verified via the Track 2 manual checklist.

## ARIA Patterns and Screen Reader Guidance

### Common ARIA Patterns to Verify
Expand Down Expand Up @@ -115,6 +121,19 @@ Remediation: <Specific code-level fix or pattern>
Verification: <How to confirm the fix resolves the issue>
```

**Worked example:**

```
ID: A11Y-001
WCAG: 1.4.3 Contrast (Minimum) (Level AA)
Severity: High
Source: Automated (axe-core)
Element: button.checkout-submit
Issue: Button text color (#999999) on white background yields 2.85:1 contrast, below the 4.5:1 minimum for normal text.
Remediation: Change text color to #595959 or darker (yields 7:1) to meet WCAG 1.4.3.
Verification: Re-run axe-core color-contrast rule; confirm ratio ≥4.5:1 with a contrast checker.
```

**Severity definitions:**
- **Critical** — complete barrier; users with disabilities cannot complete the task
- **High** — significant barrier; task completion is severely impaired
Expand Down
Loading