audit-accessibility

Files (1)

• SKILL.md

SKILL.md (first lines)

# Accessibility Audit

**Degree of freedom: MIXED** — Phases 0–1, 5 `[HIGH freedom]`; Phases 2–3
playwright/axe/Tab sequences `[LOW freedom — run exactly]`. Read
`protocol-browser-anti-stall` before any browser step.

## This skill vs neighbors

| Skill | Owns |
|---|---|
| **audit-accessibility** (this) | WCAG 2.2 AA audit: axe-core, keyboard, contrast, target size, focus, ARIA |
| `thirdparty-web-interface-guidelines` | Vercel Web Interface Guidelines compliance: focus, forms, animation, copy |
| `workflow-mobile-native-uiux` | Full native UI/UX run on Capacitor, Expo, or RN, through to PR |

## How to reason

1. **Observe** — quote axe rule+selector, heading list, or Tab snapshot
2. **Interpret** — can a keyboard or AT user complete the task?
3. **Classify** — WCAG fail / axe-false-positive / manual-only / correct-as-is
4. **Severity** — Level A = P0; Level AA = P1; best-practice = P2

## Worked example

> **Observe:** axe `label` on `/signup`; `<input name="email">` has no `id`/`aria-label`.
> **Interpret:** AT users cannot tell what to type (1.3.1 / 4.1.2).
> **Classify:** WCAG fail (not an axe false positive).
> **Severity:** P0 — Level A, blocks signup.
> **Finding:** `/signup` | 1.3.1+4.1.2 | P0 | unlabeled email | `<label for>`.

## Self-critique before reporting  [LOW freedom — do not skip]

1. **WCAG SC + numbers** — not "contrast is bad"; quote ratio or selector
2. **Keyboard, not axe-only** — 2.1.1 fails even if axe is clean
3. **Every reachable page** — obscure routes still count
4. **Severity justified** — Level A = P0
5. **Axe is ~30–40%** — heading/focus/link-text/reading-order always manual
6. **2.2 additions probed** — 2.4.11, 2.5.7, 2.5.8, 3.3.8 each have a probe result, not "axe clean"

---

## Phase 0: Auto-Detect Pages and Components

### 0a. Discover Route Structure

```
Glob("**/app/**/page.{tsx,jsx,ts,js}")
Glob("**/pages/**/*.{tsx,jsx,ts,js}")
Glob("**/src/routes/**/*.{tsx,jsx,svelte,vue}")
```

### 0b. Find the App URL

```
Grep(pattern: "NEXT_PUBLIC_APP_URL|NEXT_PUBLIC_BASE_URL|VITE_APP_URL|APP_URL|localhost", glob: ".env*")
```

If no production URL, default to `http://localhost:3000` (or detected dev server port).

### 0c. Detect CSS Framework and Component Library

```
Grep(pattern: "tailwindcss|@chakra-ui|@mui|@radix-ui|shadcn|bootstrap|bulma", glob: "package.json")
```

### 0d. Detect Existing a11y Tooling

```
Grep(pattern: "axe-core|@axe-core|eslint-plugin-jsx-a11y|pa11y|lighthouse|@testing-library", glob: "package.json")
Grep(pattern: "aria-|role=|tabIndex|sr-only|visually-hidden", glob: "*.{tsx,jsx,vue,svelte}", output_mode: "count")
```

Record: `APP_URL`, `PAGES`, `CSS_FRAMEWORK`, `COMPONENT_LIB`, `EXISTING_A11Y_TOOLS`, `ARIA_USAGE_COUNT`.

---

## Phase 1: Research Current WCAG Guidelines

### 1a. Firecrawl Research

```json
firecrawl:firecrawl_search
{
 "query": "WCAG 2.2 success criteria checklist web accessibility [current year]",
 "limit": 5
}
```

```json
firecrawl:firecrawl_search
{
 "query": "axe-core automated accessibility testing best practices common false positives",
 "limit": 5
}
```

```json
firecrawl:firecrawl_search
{
 "query": "<CSS_FRAMEWORK> <COMPONENT_LIB> accessibility best practices common issues",
 "limit": 5
}
```

Scrape 2–3 authoritative results:

```json
firecrawl:firecrawl_scrape
{
 "url": "<BEST_RESULT_URL>",
 "formats": ["markdown"],
 "onlyMainContent": true
}
```

### 1b. Framework-Specific a11y Docs (Context7)

```json
context7:resolve-library-id
{

From kensaurus/skills, MIT.

More from kensaurus/skills