accessibility-testing

name	accessibility-testing
description	Accessibility testing with axe-core, pa11y, Lighthouse, screen reader testing, and WCAG compliance verification
layer	domain
category	testing
triggers	["accessibility testing","a11y testing","axe-core","pa11y","screen reader","WCAG compliance","lighthouse accessibility","aria testing"]
inputs	["Components or pages needing accessibility audit","WCAG compliance level requirements (A, AA, AAA)","Accessibility CI pipeline setup needs","Screen reader testing guidance"]
outputs	["Automated accessibility test configurations","axe-core integration with test frameworks","CI pipeline accessibility gates","Manual testing checklists for screen readers"]
linksTo	["test","test-ui","cicd","design-systems"]
linkedFrom	["ui-ux-pro","testing-strategy"]
preferredNextSkills	["test-ui","design-systems"]
fallbackSkills	["test"]
riskLevel	low
memoryReadPolicy	selective
memoryWritePolicy	none
sideEffects	[]

Accessibility Testing

Purpose

Implement automated and manual accessibility testing to ensure WCAG 2.2 compliance. Covers integration of axe-core with testing frameworks, pa11y for page-level scanning, Lighthouse CI for performance and accessibility scoring, and manual screen reader testing protocols.

Key Patterns

axe-core with Vitest + Testing Library

Component-level a11y testing:

// setup: npm install -D @axe-core/react vitest-axe
// vitest.setup.ts
import 'vitest-axe/extend-expect';

// components/button.test.tsx
import { render } from '@testing-library/react';
import { axe } from 'vitest-axe';
import { Button } from './button';

describe('Button accessibility', () => {
  it('has no axe violations', async () => {
    const { container } = render(
      <Button onClick={() => {}}>Submit</Button>
    );
    const results = await axe(container);
    expect(results).toHaveNoViolations();
  });

  it('has no violations when disabled', async () => {
    const { container } = render(
      <  = => {}}>Submit
    );
     results =  (container);
    (results).();
  });

  (,  () => {
     { container } = (
      
    );
     results =  (container);
    (results).();
  });
});