skills.rest
100Thieves-team
100Thieves-teamOFFICIAL
Explore all skills by this author →
GitHub

a11y-playwright-testing

Automates WCAG 2.1 AA accessibility testing with Playwright, TypeScript, and axe-core.

Updated Jul 4, 2026
Search Tags:#typescript#accessibility#keyboard navigation#wcag#playwright#axe-core#a11y testing
One-click install
npx skills add https://github.com/100Thieves-team/plady-expert-skills --skill a11y-playwright-testing-100thieves-team
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: a11y-playwright-testing
Source: https://github.com/100Thieves-team/plady-expert-skills/tree/main/.claude/skills/a11y-playwright-testing
Command: npx skills add https://github.com/100Thieves-team/plady-expert-skills --skill a11y-playwright-testing-100thieves-team

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @playwright/test, @axe-core/playwright, axe-core, and includes references (resource) components.

What problem does it solve? Web accessibility defects like missing labels, broken keyboard navigation, and poor color contrast often ship undetected because manual audits are slow and inconsistent. This Skill provides ready-to-use Playwright and axe-core test patterns that catch WCAG 2.1 Level AA violations automatically and integrate into CI pipelines. ## Core Features & Use Cases - Automated axe-core scans: Run full-page or component-scoped accessibility audits tagged for WCAG 2.1 A/AA rules, with scoped exception handling for known issues. - Keyboard and focus testing: Validate Tab order, focus traps in dialogs, skip links, and focus return behavior using Playwright keyboard APIs. - Semantic and ARIA validation: Use role-based locators as accessibility signals and verify landmarks, form labels, and accessible names. - Use Case: A QA engineer adds an axe-core scan to the checkout flow test suite, catches a missing form label and insufficient color contrast, and blocks the release until the WCAG violations are fixed. ## Quick Start Write a Playwright accessibility test that scans my login page with axe-core for WCAG 2.1 AA violations and verifies keyboard navigation through the form.

Frequently Asked Questions about a11y-playwright-testing

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I run accessibility tests with Playwright and axe-core?▼

Install @axe-core/playwright, then create an AxeBuilder instance with the page object, filter rules with withTags(["wcag2a", "wcag2aa", "wcag21a", "wcag21aa"]), and call analyze(). Assert that results.violations is empty to fail the test on any WCAG violation.

How to test keyboard navigation and focus traps in Playwright?▼

Use page.keyboard.press("Tab") to move focus and expect(locator).toBeFocused() to verify focus order. For dialogs, confirm focus enters the dialog on open, stays trapped while tabbing, and returns to the trigger element after Escape closes it.

Does axe-core catch all WCAG 2.1 accessibility issues?▼

No, automated tools like axe-core detect roughly 30-50% of WCAG issues. Manual audits are still required for criteria needing human judgment, such as meaningful link text, screen reader behavior, and logical reading order.

How do I exclude known accessibility violations from axe scans?▼

Use the exclude() method on AxeBuilder to scope out specific selectors like third-party widgets, rather than disabling rules globally. Document each exception with the impacted WCAG criterion, a tracking ticket, an owner, and a remediation date.

Why does my axe-core scan report false positives on dynamic content?▼

False positives usually occur when the scan runs before the page finishes rendering dynamic content. Wait for a stable state, such as network idle or a specific element becoming visible, before calling analyze().

Related Skills

Explore More Software Engineering Skills→
fugazifugazi
215

a11y-playwright-testing

Automate WCAG 2.1 AA accessibility scans in Playwright tests with axe-core.

Community
Intermediate
emiljuchnikowskiemiljuchnikowski

a11y-audit

Integrate Playwright with axe-core to audit web pages for WCAG 2.1 AA violations.

Community
Intermediate
JaviMontanoJaviMontano

accessibility-audit

Audits digital products against WCAG 2.1/2.2 and produces violation inventories and remediation roadmaps.

Community
Intermediate
AZANIRAZANIR
2

qa-accessibility-test-writer

Generate automated WCAG 2.2 accessibility tests using axe-core, Pa11y, Lighthouse, Playwright, Cypress, and Jest.

Community
Intermediate