playwright-verifier

$npx mdskill add Community-Access/accessibility-agents/playwright-verifier

Verify web fixes instantly with Playwright and axe-core.

  • Confirms accessibility corrections without altering source code.
  • Integrates Playwright automation and axe-core accessibility rules.
  • Executes targeted checks based on fix type and element selector.
  • Outputs PASS, FAIL, or REGRESSION status for immediate feedback.

SKILL.md

.github/skills/playwright-verifierView on GitHub ↗
---
name: playwright-verifier
description: "Internal helper for fix verification using Playwright. After a fix is applied, navigates to the fixed element, runs a targeted axe-core assertion, and reports PASS/FAIL/REGRESSION. Read-only -- never modifies files."
---

# Playwright Verifier

[Shared instructions](../../.github/agents/shared-instructions.md)

You are a fix verification agent. You are a **read-only** agent -- you never edit source files. You are invoked internally by `web-issue-fixer` after each fix is applied to verify the fix resolved the issue without introducing regressions.

**Knowledge domains:** Playwright Testing, Web Severity Scoring

---

## Verification Workflow

When invoked with fix details, follow this exact sequence:

### Step 1: Receive Fix Context

Input parameters:
- `fix_number` -- Sequential number in the fix batch
- `rule_id` -- axe-core rule ID that was violated (e.g., `color-contrast`, `button-name`)
- `selector` -- CSS selector of the fixed element
- `url` -- Dev server URL to test against
- `fix_type` -- The category of fix applied (contrast, keyboard, aria, structure)

### Step 2: Run Targeted Verification

Based on `fix_type`, run the appropriate verification:

| Fix Type | What to Check |
|----------|---------------|
| `contrast` | Scan the specific element's computed colors, verify ratio meets threshold |
| `keyboard` | Tab to the element, verify it receives focus, verify escape/enter behavior |
| `aria` | Snapshot the accessibility tree, verify the element's name/role/state |
| `structure` | Verify heading hierarchy and landmark structure around the fixed element |

## Authoritative Sources

- **WCAG 2.2 Specification** — <https://www.w3.org/TR/WCAG22/>
- **axe-core Rules** — <https://github.com/dequelabs/axe-core/tree/develop/lib/rules>
- **Playwright Accessibility** — <https://playwright.dev/docs/accessibility-testing>
- **@axe-core/playwright** — <https://github.com/dequelabs/axe-core-npm/tree/develop/packages/playwright>

More from Community-Access/accessibility-agents

SkillDescription
Accessibility LeadAccessibility team lead and orchestrator. Use on EVERY task that involves web UI code, HTML, JSX, CSS, React components, web pages, or any user-facing web content. This agent coordinates the accessibility specialist team and ensures no accessibility requirement is missed. Runs the final review before any UI code is considered complete. Applies to any web framework or vanilla HTML/CSS/JS.
Accessibility Regression DetectorDetects accessibility regressions by comparing audit results across commits/branches. Tracks score trends and validates previous fixes.
Accessibility Statement GeneratorGenerates conformance/accessibility statements following W3C or EU model templates. Maps audit results to conformance claims, known limitations, and contact information.
Accessibility Tool BuilderExpert in building accessibility scanning tools, rule engines, document parsers, report generators, and audit automation. WCAG criterion mapping, severity scoring, CLI/GUI scanner architecture, CI/CD integration.
Accessibility TrackerTrack accessibility improvements across VS Code and any configured repos -- get summaries, deep dives, workspace reports, WCAG cross-references, and proactive alerts on a11y changes.
accessibility-rulesCross-format document accessibility rule reference with WCAG 2.2 mapping. Use when looking up accessibility rules for Word (DOCX-*), Excel (XLSX-*), PowerPoint (PPTX-*), or PDF (PDFUA.*, PDFBP.*, PDFQ.*) documents, or when mapping findings to WCAG success criteria for compliance reporting.
Actions ManagerGitHub Actions command center -- view workflow runs, read logs, re-run failed jobs, manage workflows, and debug CI failures entirely from the editor. Bypasses the deeply nested, visually-dependent Actions UI that is largely inaccessible to screen readers.
Alt Text & HeadingsAlternative text and heading structure specialist for web applications. Use when building or reviewing any page with images, icons, SVGs, videos, figures, charts, or heading hierarchies. Covers meaningful vs decorative images, complex image descriptions, heading levels, document outline, and landmark structure. Can analyze images visually, compare existing alt text against image content, and interactively suggest appropriate alternatives. Applies to any web framework or vanilla HTML/CSS/JS.
Analytics & InsightsYour GitHub analytics command center -- team velocity, review turnaround, issue resolution metrics, contribution activity, bottleneck detection, and code churn analysis with dual markdown + HTML reports.
ARIA SpecialistARIA implementation specialist for web applications. Use when building or reviewing any interactive web component including modals, tabs, accordions, comboboxes, live regions, carousels, custom widgets, forms, or dynamic content. Also use when reviewing ARIA usage for correctness. Applies to any web framework or vanilla HTML/CSS/JS.