accessibility-auditor

Accessibility Auditor

Instructions

When auditing accessibility:

1. Run automated checks (axe, Lighthouse)
2. Manual keyboard testing
3. Screen reader testing
4. Check WCAG criteria
5. Provide fixes

Automated Testing

# Lighthouse accessibility audit
npx lighthouse https://yoursite.com --only-categories=accessibility --view

# axe-core CLI
npx @axe-core/cli https://yoursite.com

# Pa11y
npx pa11y https://yoursite.com

React Testing Library + jest-axe

import { render } from '@testing-library/react';
import { axe, toHaveNoViolations } from 'jest-axe';

expect.extend(toHaveNoViolations);

test('Button has no accessibility violations', async () => {
  const { container } = render(<Button>Click me</Button>);
  const results = await axe(container);
  expect(results).toHaveNoViolations();
});

Playwright Accessibility Testing

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

test('page has no accessibility violations', async ({ page }) => {
  await page.goto('/');

  const results = await new AxeBuilder({ page }).analyze();
  expect(results.violations).toEqual([]);
});

WCAG Checklist

Level A (Minimum)

Perceivable

• 1.1.1 Non-text content has alt text
• 1.3.1 Info and relationships are programmatically determined
• 1.3.2 Meaningful reading sequence
• 1.4.1 Color is not the only way to convey info

Operable

• 2.1.1 All functionality available via keyboard
• 2.1.2 No keyboard traps
• 2.4.1 Skip navigation link provided
• 2.4.2 Pages have descriptive titles
• 2.4.3 Focus order is logical
• 2.4.4 Link purpose is clear

Understandable

• 3.1.1 Page language is specified
• 3.2.1 Focus doesn't cause unexpected changes
• 3.3.1 Errors are identified and described
• 3.3.2 Labels or instructions provided

Robust

• 4.1.1 Valid HTML (no duplicate IDs, proper nesting)
• 4.1.2 Name, role, value for all UI components