Accessibility Testing with axe-core

Beginner10 minTrending

Audit React components for WCAG accessibility violations using axe-core in tests, CI, and browser DevTools.

Prerequisites

-React project
-Testing setup (Vitest or Jest)

Steps

Install axe-core testing utilities

Add jest-axe (or vitest-axe) to run accessibility checks in your test suite.

$ pnpm add -D axe-core vitest-axe

Write an accessibility test

Create a test that renders a component and checks for WCAG violations.

$ cat > src/components/__tests__/Form.a11y.test.tsx << 'EOF' import { render } from '@testing-library/react'; import { axe, toHaveNoViolations } from 'vitest-axe'; import { expect } from 'vitest'; import { ContactForm } from '../ContactForm'; expect.extend(toHaveNoViolations); it('ContactForm has no accessibility violations', async () => { const { container } = render(<ContactForm />); const results = await axe(container); expect(results).toHaveNoViolations(); }); EOF

Run axe checks on every component to catch missing labels, low contrast, and incorrect ARIA attributes.

Add eslint-plugin-jsx-a11y for static analysis

Catch accessibility issues at lint time before they reach tests or production.

$ pnpm add -D eslint-plugin-jsx-a11y

Run a full-page accessibility audit with Lighthouse

Use Lighthouse specifically for the accessibility category.

$ npx lighthouse http://localhost:3000 --only-categories=accessibility --output=html --output-path=./a11y-report.html --chrome-flags='--headless=new'

Full Script

full-script.sh

#!/bin/bash
# React Accessibility Audit
set -euo pipefail

echo "=== Installing a11y testing tools ==="
pnpm add -D axe-core vitest-axe eslint-plugin-jsx-a11y

echo ""
echo "=== Running Lighthouse accessibility audit ==="
URL=${1:-http://localhost:3000}
npx lighthouse "$URL" \
  --only-categories=accessibility \
  --output=html \
  --output-path=./a11y-report.html \
  --chrome-flags='--headless=new'

echo ""
echo "=== Accessibility report saved to a11y-report.html ==="
echo ""
echo "Common issues to check:"
echo "  - Missing alt text on images"
echo "  - Form inputs without labels"
echo "  - Insufficient color contrast (4.5:1 minimum)"
echo "  - Missing ARIA landmarks"
echo "  - Keyboard navigation not working"

FAQ

Discussion

Loading comments...

#!/bin/bash # React Accessibility Audit set -euo pipefail echo "=== Installing a11y testing tools ===" pnpm add -D axe-core vitest-axe eslint-plugin-jsx-a11y echo "" echo "=== Running Lighthouse accessibility audit ===" URL=${1:-http://localhost:3000} npx lighthouse "$URL" \ --only-categories=accessibility \ --output=html \ --output-path=./a11y-report.html \ --chrome-flags='--headless=new' echo "" echo "=== Accessibility report saved to a11y-report.html ===" echo "" echo "Common issues to check:" echo " - Missing alt text on images" echo " - Form inputs without labels" echo " - Insufficient color contrast (4.5:1 minimum)" echo " - Missing ARIA landmarks" echo " - Keyboard navigation not working"