Back to Agent Skills
Frontend & Design
Accessibility Audit (axe-core)
Run automated accessibility audits against WCAG standards using axe-core. AI agents can detect violations and generate compliant fixes.
Claude Code Codex Copilot Cursor
Overview
axe-core is the world's most widely used accessibility testing engine, powering audits against WCAG 2.1 AA standards and other accessibility guidelines. It can be integrated into your test suite, CI pipeline, or used directly by AI agents to scan your pages for violations.
AI agents can run axe-core audits on your rendered pages and interpret the results in context. When a violation is found, like missing alt text, insufficient color contrast, or incorrect ARIA attributes, the agent doesn't just report the problem but also generates the exact fix needed to resolve it. This turns accessibility from a compliance checklist into an automated quality gate.
The combination of axe-core with Playwright MCP is especially powerful. Your agent can render a page in a real browser, run an accessibility audit, and fix any violations it finds, all in a single conversation loop. This ensures your application meets accessibility standards throughout development.
AI agents can run axe-core audits on your rendered pages and interpret the results in context. When a violation is found, like missing alt text, insufficient color contrast, or incorrect ARIA attributes, the agent doesn't just report the problem but also generates the exact fix needed to resolve it. This turns accessibility from a compliance checklist into an automated quality gate.
The combination of axe-core with Playwright MCP is especially powerful. Your agent can render a page in a real browser, run an accessibility audit, and fix any violations it finds, all in a single conversation loop. This ensures your application meets accessibility standards throughout development.
Who Is This For?
- Frontend developers catching accessibility violations during development
- Teams integrating WCAG compliance checks into CI/CD pipelines
- Developers fixing color contrast, ARIA, and semantic HTML issues with AI guidance
- QA engineers running comprehensive accessibility audits before releases
Installation
Setup for Claude Code
npm install --save-dev @axe-core/cli
Claude Code runs audits: npx axe http://localhost:3000Configuration
// axe integration with Playwright
import { test, expect } from "@playwright/test";
import AxeBuilder from "@axe-core/playwright";
test("should pass accessibility audit", async ({ page }) => {
await page.goto("/");
const results = await new AxeBuilder({ page }).analyze();
expect(results.violations).toEqual([]);
});Related Skills
Frontend & Design
Figma MCP Server
Bridge the gap between design and code by connecting Figma to your AI agent via MCP, enabling accurate design-to-code translation.
Claude Code Cursor
Frontend & Design Storybook Component Docs
Build, document, and visually test UI components in isolation using Storybook. AI agents can generate stories and catch visual regressions.
Claude Code Copilot Cursor
Frontend & Design Tailwind CSS IntelliSense
Get intelligent Tailwind class suggestions, autocompletions, and linting as you style components in your editor.
Copilot Cursor Windsurf