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.

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:3000

Configuration

// 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([]);
});