skills.rest
MolcajeteAI
MolcajeteAIOFFICIAL
Explore all skills by this author →
GitHub

accessibility-testing

Automate axe-core accessibility audits in Playwright and Vitest for React applications.

2|1|Updated Nov 13, 2025
Search Tags:#vitest#testing#accessibility#a11y#react#wcag#playwright
One-click install
npx skills add https://github.com/MolcajeteAI/plugin --skill accessibility-testing-molcajeteai
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: accessibility-testing
Source: https://github.com/MolcajeteAI/plugin/tree/main/deprecated/tech-stacks/js/react/skills/accessibility-testing
Command: npx skills add https://github.com/MolcajeteAI/plugin --skill accessibility-testing-molcajeteai

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @testing-library/jest-dom, axe-core, @axe-core/react, vitest-axe, @axe-core/playwright, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill automates the process of identifying and rectifying accessibility issues in web applications, ensuring compliance with WCAG standards and improving user experience for everyone.

Core Features & Use Cases

  • Automated Audits: Integrates axe-core with testing frameworks like Vitest and Playwright to perform comprehensive accessibility scans.
  • Component & Page Testing: Provides examples for testing individual React components and entire pages for accessibility violations.
  • Keyboard Navigation & Screen Reader Simulation: Includes tests to verify keyboard navigation flows and ARIA attribute correctness.
  • Use Case: Before deploying a new feature, run this skill to automatically check if all interactive elements are keyboard navigable and if forms have proper labels, catching common a11y bugs early.

Quick Start

Use the accessibility-testing skill to run a basic accessibility scan on the current page using Playwright.

Frequently Asked Questions about accessibility-testing

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

FAQPage Schema
How do I automate WCAG compliance testing for React components?▼

Automate WCAG compliance testing by integrating axe-core with Vitest to scan individual React components for accessibility violations during development. This approach provides immediate feedback on ARIA attributes and keyboard navigation before deployment.

Can I use axe-core with Playwright to test page-level accessibility?▼

Yes, you can use axe-core with Playwright to perform comprehensive accessibility scans on entire web pages. This integration simulates real user interactions to validate keyboard navigation flows and screen reader compatibility across full page renders.

What is the best way to catch keyboard navigation and ARIA issues early in development?▼

The best way to catch keyboard navigation and ARIA issues early is running automated accessibility tests within your CI/CD pipeline. Integrating axe-core with Vitest detects form labeling errors and interactive element focus issues before code merges.

Does automated accessibility testing detect all screen reader compatibility problems?▼

Automated accessibility testing detects many screen reader compatibility issues by validating ARIA attributes, but it does not catch all manual screen reader navigation edge cases. It serves as an early warning system for common structural violations.

Do I need specific testing libraries to check WCAG compliance in a React application?▼

Yes, checking WCAG compliance in a React application requires specific libraries like @testing-library/jest-dom, axe-core, and vitest-axe. These dependencies provide the necessary assertion matchers and accessibility rule engines to execute scans.

Why should I run accessibility tests in CI/CD pipelines instead of just manually testing?▼

Running accessibility tests in CI/CD pipelines prevents regressions by automatically scanning new code for WCAG violations before deployment. This catches common a11y bugs early, ensuring interactive elements remain keyboard navigable without relying on manual checks.

Related Skills

Explore More Software Engineering Skills→
lucidlabs-hqlucidlabs-hq
2

test-setup

Initialize Vitest and Playwright testing infrastructure from upstream configs.

Official
Intermediate
gaiastudio-aigaiastudio-ai
2

gaia-test-a11y

Run automated accessibility tests on deployed web applications with axe-core, pa11y, and Lighthouse.

Official
Advanced
pixbspixbs
1

front-end-testing

Test React components and JavaScript UIs with Vitest and DOM Testing Library.

Community
Intermediate
petrkindlmannpetrkindlmann
64

accessibility-testing

Automate accessibility testing with axe-core and Playwright for WCAG conformance.

Community
Advanced