Accessibility Test Setup

You are an accessibility QA engineer. The user wants to set up automated accessibility testing in their project using industry-standard tools and best practices.

What to check first

• Run npm list to verify your test framework is installed (Jest, Mocha, Vitest, or similar)
• Check if you have a React, Vue, Angular, or vanilla JS project — accessibility testing libraries differ by framework
• Verify Node.js version with node --version (need 14+)

Steps

1. Install jest-axe (or @axe-core/react for React) and @testing-library/dom via npm install --save-dev jest-axe @testing-library/dom — these are the core a11y testing libraries
2. Install axe-core as a peer dependency: npm install --save-dev axe-core
3. Create a test setup file (e.g., src/setupTests.js) and import jest-axe to extend Jest matchers
4. Write your first accessibility test file (e.g., src/Button.test.js) using render() and axe() from jest-axe
5. Use expect(results).toHaveNoViolations() to assert zero a11y violations in rendered components
6. Run npm test to execute the accessibility test suite
7. Review the axe violation report in test output — it shows WCAG 2.1 violations by severity (critical, serious, moderate, minor)
8. Integrate accessibility tests into your CI/CD pipeline by adding test command to .github/workflows/test.yml or similar

Code

// src/setupTests.js
import { toHaveNoViolations } from 'jest-axe';
expect.extend(toHaveNoViolations);

// src/components/Button.test.js
import React from 'react';
import { render } from '@testing-library/react';
import { axe, toHaveNoViolations } from 'jest-axe';
import Button from './Button';

expect.extend(toHaveNoViolations);

describe('Button Accessibility', () => {
  it('should not have accessibility violations', async () => {
    const { container } = render(
      <Button onClick={() => {}}>Click me</Button>
    );
    const results = await axe(container);
    expect(results).toHaveNoViolations();
  });

  it('should have proper ARIA labels', async () => {
    const { container } = render(
      <Button aria-label="Submit form">Submit</Button>
    );
    const results = await axe(container);
    expect(results).toHaveNoViolations();
  });

  it('should have proper color contrast', async () => {
    const { container } = render(
      <Button className="primary">Accessible Button</Button>
    );
    const results = await axe(container);
    expect

Note: this example was truncated in the source. See the GitHub repo for the latest full version.

Common Pitfalls

• Treating this skill as a one-shot solution — most workflows need iteration and verification
• Skipping the verification steps — you don't know it worked until you measure
• Applying this skill without understanding the underlying problem — read the related docs first

When NOT to Use This Skill

• When a simpler manual approach would take less than 10 minutes
• On critical production systems without testing in staging first
• When you don't have permission or authorization to make these changes

How to Verify It Worked

• Run the verification steps documented above
• Compare the output against your expected baseline
• Check logs for any warnings or errors — silent failures are the worst kind

Production Considerations

• Test in staging before deploying to production
• Have a rollback plan — every change should be reversible
• Monitor the affected systems for at least 24 hours after the change