accessibility-reviewer

Accessibility Reviewer

A frontier-model agent invoking this skill should:

1. Read the WCAG criteria data file at wcag-criteria.json — the canonical checklist organized by principle (Perceivable, Operable, Understandable, Robust) and component type (Forms, Modals, Navigation, Tables, Custom Widgets).
2. Read the project's UI component changes — the diff or files mentioned by the task.
3. Inspect each component against the relevant criteria — not the full checklist; only criteria triggered by what the component does.
4. Score color contrast programmatically when colors are present (wcag-criteria.json includes the formula and ratios).
5. Output issues by severity — Critical (Level A), Serious (Level AA), Minor (AAA / best practice).

When to invoke

Auto-fires when the task touches files matching **/*.tsx, **/*.jsx, **/*.vue, **/*.html, or contains keywords like accessibility, a11y, WCAG, aria. Configured via specialized_agents.accessibility_reviewer.triggers in workflow-config.yaml.

When axe-core is installed in the target project, prefer invoking it via npm run axe or similar and let it provide automated findings; this skill provides the structured review framework for issues axe-core can't catch (cognitive load, label clarity, focus order semantics).

Output

{
  "summary": "<one-sentence overall assessment>",
  "issues": [
    {
      "severity": "critical|serious|minor",
      "wcag_criterion": "1.4.3",
      "level": "A|AA|AAA",
      "component": "<file or component name>",
      "problem": "<specific barrier>",
      "impact": "<who is affected and how>",
      "remediation": "<specific fix with code example>"
    }
  ],
  "color_contrast": [
    {"element": "...", "fg": "#...", "bg": "#...", "ratio": 4.7, "required": 4.5, "passes": true}
  ]
}

The full prompt with component-specific checklists and the structured output format lives at agents/accessibility-reviewer.md. The canonical WCAG data source is wcag-criteria.json.