Skip to main content

Testing Tools

Essential tools for testing web accessibility.

Automated Testing​

Browser Extensions​

  • axe DevTools - Comprehensive accessibility testing in browser DevTools
  • WAVE - Visual accessibility evaluation tool
  • Lighthouse - Built into Chrome DevTools, includes accessibility audits

CI/CD Integration​

# Install axe-core for automated testing
npm install --save-dev @axe-core/cli

# Run axe against a URL
npx axe https://your-site.com

Testing Libraries​

// jest-axe for React testing
import { axe, toHaveNoViolations } from 'jest-axe';

expect.extend(toHaveNoViolations);

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

Manual Testing​

Keyboard Navigation​

  1. Tab through all interactive elements
  2. Verify focus is visible
  3. Ensure logical tab order
  4. Test all functionality without mouse

Screen Reader Testing​

Screen ReaderPlatformBrowser
NVDAWindowsFirefox/Chrome
JAWSWindowsChrome/Edge
VoiceOvermacOS/iOSSafari
TalkBackAndroidChrome

Color Contrast​

  • Use contrast checkers (WebAIM, Colour Contrast Analyser)
  • Test with color blindness simulators
  • Verify in both light and dark modes

Checklist​

  • Run automated tests (axe, Lighthouse)
  • Test keyboard navigation
  • Test with screen reader
  • Check color contrast
  • Test text resizing (up to 200%)
  • Test without CSS