Accessibility Testing

Automated Tools

Automated tools catch common accessibility issues.

axe-core

// Install
npm install axe-core @axe-core/react

// React integration
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

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

ReactDOM.render(<App />, document.getElementById('root'));

Jest Integration

// jest.config.js
module.exports = {
  setupFilesAfterSetup: ['@testing-library/jest-dom'],
};

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

expect.extend(toHaveNoViolations);

describe('Form Accessibility', () => {
  it('should have no axe violations', async () => {
    const { container } = render(<Form />);
    const results = await axe(container);
    expect(results).toHaveNoViolations();
  });
});

Playwright Integration

// accessibility.spec.js
const { test, expect } = require('@playwright/test');
const AxeBuilder = require('@axe-core/playwright').default;

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

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

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

CI Integration

# .github/workflows/a11y.yml
name: Accessibility Tests
on: [push, pull_request]
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - run: npm ci
      - run: npm run test:a11y
      - run: npm run build
      - run: npx lighthouse http://localhost:3000 --only-categories=accessibility

Manual Testing

Automated tools can't catch everything.

Keyboard Testing

1. Tab through all interactive elements
2. Check focus visibility
3. Verify logical tab order
4. Test keyboard shortcuts
5. Ensure no keyboard traps

Screen Reader Testing

1. Test with NVDA/VoiceOver
2. Verify all content is announced
3. Check landmarks and headings
4. Test dynamic content announcements
5. Verify form labels and errors

Visual Testing

1. Check color contrast
2. Verify text can be resized to 200%
3. Test with different color modes
4. Check focus indicators
5. Verify content reflows at 320px width

Manual Testing Checklist

## Keyboard
- [ ] All interactive elements focusable
- [ ] Focus visible on all elements
- [ ] Tab order logical
- [ ] No keyboard traps
- [ ] Enter/Space activate buttons
- [ ] Escape closes modals

## Screen Reader
- [ ] Page title announced
- [ ] Landmarks announced
- [ ] Headings in order
- [ ] Images have alt text
- [ ] Form labels announced
- [ ] Errors announced

## Visual
- [ ] Contrast ratios pass
- [ ] Text resizable to 200%
- [ ] No content loss at 320px
- [ ] Focus indicators visible
- [ ] No flashing content

Axe and Lighthouse

Axe Rules

// Common axe rules
const rules = {
  // Color contrast
  'color-contrast': { enabled: true },
  
  // Forms
  'label': { enabled: true },
  'aria-required-attr': { enabled: true },
  
  // Images
  'image-alt': { enabled: true },
  
  // Navigation
  'link-name': { enabled: true },
  'button-name': { enabled: true },
  
  // ARIA
  'aria-allowed-attr': { enabled: true },
  'aria-required-attr': { enabled: true },
};

Lighthouse Scores

# Run Lighthouse accessibility audit
npx lighthouse http://localhost:3000 --only-categories=accessibility

# Output
# Accessibility: 95/100
# 
# Issues:
# - [aria-*] attributes: 2 issues
# - Color contrast: 1 issue

Common Issues Found

Issue	Tool	Fix
Missing alt text	axe, Lighthouse	Add meaningful alt
Low contrast	axe, Lighthouse	Increase contrast ratio
Missing labels	axe	Add labels or aria-label
Empty buttons	axe	Add accessible name
Missing heading	Lighthouse	Add h1 element

Testing Strategy

1. Automated: Run axe in CI/CD
2. Manual: Test with screen readers
3. Visual: Check contrast and zoom
4. Keyboard: Navigate without mouse
5. User Testing: Include disabled users