accessibility-testing

Test web applications for WCAG 2.1 AA compliance using axe-core, Playwright, and keyboard navigation checks.

1|Updated Mar 21, 2026
One-click install
npx skills add https://github.com/kalilurrahman/kr-claudiator-skills-original-prompts --skill accessibility-testing-kalilurrahman
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: accessibility-testing
Source: https://github.com/kalilurrahman/kr-claudiator-skills-original-prompts/tree/main/07-testing-quality/accessibility-testing
Command: npx skills add https://github.com/kalilurrahman/kr-claudiator-skills-original-prompts --skill accessibility-testing-kalilurrahman

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @axe-core/playwright, @playwright/test, Pillow, numpy.

What problem does it solve? Web applications often ship with accessibility barriers that block users relying on screen readers, keyboard navigation, or high-contrast modes, creating legal risk and excluding users. This Skill provides a structured testing workflow combining automated scanning, manual WCAG checks, and CI enforcement. ## Core Features & Use Cases - Automated axe-core scanning: Playwright tests that scan pages and components for WCAG 2.1 A/AA violations, failing builds on critical or serious issues. - Keyboard navigation testing: Validates tab order, focus visibility, dropdown arrow-key operation, skip links, and focus trapping in modals. - Color contrast auditing: Python utilities compute WCAG contrast ratios and audit design token files for failing text/background combinations. - Use Case: Before launching a checkout flow, run the axe-core suite across cart, shipping, and payment pages, verify keyboard operability of every interactive element, and block the release on any critical violations in CI. ## Quick Start Run accessibility tests on my checkout flow and report all WCAG 2.1 AA violations with remediation guidance.

Frequently Asked Questions about accessibility-testing

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

FAQPage Schema
How do I test web accessibility with Playwright and axe-core?

Use AxeBuilder from @axe-core/playwright to scan pages within Playwright tests, filtering by WCAG tags like wcag2a and wcag2aa. Assert that the violations array is empty, or filter to fail only on critical and serious impact levels.

How do I test keyboard navigation in web applications?

Simulate Tab, Enter, Escape, and arrow keys with Playwright's keyboard API, then verify focus order, visible focus indicators, and that focus returns to triggers after closing modals or dropdowns. Also test skip-to-content links as the first Tab stop.

What WCAG contrast ratio is required for text?

WCAG 2.1 AA requires a 4.5:1 contrast ratio for normal text and 3:1 for large text (18pt+ or 14pt bold). AAA raises these to 7:1 and 4.5:1. Icons conveying information must also meet 3:1.

Can automated tools catch all accessibility issues?

No, automated tools like axe-core catch only 30-40% of accessibility issues. Manual testing with screen readers (NVDA, VoiceOver, TalkBack), keyboard-only navigation, and a WCAG checklist is required for full coverage.

How do I enforce accessibility in CI pipelines?

Add a GitHub Actions job that builds the app, starts a local server, and runs Playwright accessibility tests on pull requests. Configure tests to fail on critical or serious axe violations and upload the report as a build artifact.