axe-core - Quick Reference

When NOT to Use This Skill

• Manual WCAG compliance audits - Use the wcag skill for understanding guidelines and manual testing
• Screen reader testing - axe-core doesn't replace manual screen reader verification
• Complex ARIA pattern implementation - Use wcag skill for ARIA authoring practices
• Accessibility strategy planning - This is for test automation, not accessibility consulting

Deep Knowledge: Use mcp__documentation__fetch_docs with technology: axe-core for comprehensive documentation on rules, configuration, and integrations.

Setup Base

npm install -D @axe-core/react  # For React
npm install -D axe-core         # Core library

Pattern Essenziali

React DevTools Integration

import React from 'react';
import ReactDOM from 'react-dom/client';

if (process.env.NODE_ENV !== 'production') {
  import('@axe-core/react').then(axe => {
    axe.default(React, ReactDOM, 1000);
  });
}

Jest/Vitest Integration

import { axe, toHaveNoViolations } from 'jest-axe';

expect.extend(toHaveNoViolations);

test('should have no accessibility violations', async () => {
  const { container } = render(<MyComponent />);
  const results = await axe(container);
  expect(results).toHaveNoViolations();
});

Playwright Integration

import { test, expect } from '@playwright/test';
import AxeBuilder from '@axe-core/playwright';

test('should not have accessibility issues', async ({ page }) => {
  await page.goto('/');

  const accessibilityScanResults = await new AxeBuilder({ page }).analyze();

  expect(accessibilityScanResults.violations).toEqual([]);
});

// With specific rules
test('should pass WCAG AA', async ({ page }) => {
  await page.goto('/');

  const results = await new AxeBuilder({ page })
    .withTags(['wcag2a', 'wcag2aa'])
    .analyze();

  expect(results.violations).toEqual([]);
});

Cypress Integration

// cypress/support/commands.ts
import 'cypress-axe';

// In test
describe('Accessibility', () => {
  it('has no violations', () => {
    cy.visit('/');
    cy.injectAxe();
    cy.checkA11y();
  });
});

Programmatic Usage

import axe from 'axe-core';

async function checkAccessibility() {
  const results = await axe.run();

  if (results.violations.length > 0) {
    console.log('Violations:', results.violations);
  }
}

Anti-Patterns

Quick Troubleshooting