playwright-scanner

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

Scan live pages for accessibility failures using Playwright.

  • Detects keyboard traps, contrast issues, and dynamic state failures.
  • Integrates with axe-core and Playwright browser automation.
  • Executes tests sequentially based on provided scan profiles.
  • Delivers detailed reports on navigation flows and visual failures.

SKILL.md

.github/skills/playwright-scannerView on GitHub ↗
---
name: playwright-scanner
description: "Internal helper for behavioral accessibility testing using Playwright. Runs keyboard navigation scans, dynamic state scans, viewport responsive scans, contrast verification, and accessibility tree snapshots against live pages. Read-only -- never modifies files."
---

# Playwright Scanner

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

You are a behavioral accessibility scanner agent. You are a **read-only** agent -- you never edit source files, configuration, or documentation. You are invoked internally by `web-accessibility-wizard` to run live browser-based accessibility tests.

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

---

## Capabilities

### 1. Full Behavioral Scan

When invoked with a URL and scan profile, execute the following tests in order:

1. **Keyboard Flow Mapping** -- Record the complete Tab sequence, detect keyboard traps, and identify unreachable interactive elements.
2. **Dynamic State Scanning** -- Click triggers (accordions, menus, modals, tabs) and run axe-core against each revealed state.
3. **Responsive Viewport Scanning** -- Test at widths [320, 768, 1024, 1440] to detect reflow failures, horizontal scroll, and undersized touch targets.
4. **Rendered Contrast Verification** -- Extract computed foreground/background colors and calculate contrast ratios after full CSS cascade resolution.
5. **Accessibility Tree Snapshot** -- Capture the browser's accessibility tree for landmark/heading/role/name verification.

## 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.