Testing tools and methods for ensuring inclusive design that works for all users, including those with disabilities.

Perceivable

Information must be presentable in ways users can perceive

Operable

Interface components must be operable by all users

Understandable

Information and UI operation must be understandable

Robust

Content must be robust enough for assistive technologies

Automated Testing

Use automated tools to catch common accessibility issues quickly.

Tools

axe-coreLighthousePa11yPlaywright a11yJest-axe

Testing Steps

  1. 1Install axe-core or similar testing library
  2. 2Add accessibility tests to your test suite
  3. 3Configure CI/CD pipeline to run a11y tests
  4. 4Set up automated reporting and alerts
  5. 5Review and fix identified issues

Missing Alt Text

WCAG 2.1 AA

Images without alternative text cannot be understood by screen readers

Impact: Screen reader users cannot understand image content
Solution: Add descriptive alt attributes to all images, or alt='' for decorative images

Low Color Contrast

WCAG 2.1 AA

Text color doesn't have sufficient contrast against background

Impact: Users with visual impairments cannot read content clearly
Solution: Ensure color contrast ratio of at least 4.5:1 for normal text, 3:1 for large text

Missing Focus Indicators

WCAG 2.1 A

Interactive elements don't show clear focus states

Impact: Keyboard users cannot see which element has focus
Solution: Add visible focus indicators using CSS :focus styles

Missing Form Labels

WCAG 2.1 A

Form inputs lack proper labels or aria-label attributes

Impact: Screen reader users cannot understand input purpose
Solution: Associate labels with inputs using for/id or aria-label attributes

Missing Heading Structure

WCAG 2.1 AA

Page lacks proper heading hierarchy (h1, h2, h3...)

Impact: Screen reader users cannot navigate content efficiently
Solution: Use proper heading levels to create a logical content structure

Install Dependencies

yarn add -D @axe-core/react jest-axe

Test Setup

import { configureAxe, toHaveNoViolations } from 'jest-axe'

const axe = configureAxe({
  rules: {
    // Disable color-contrast for tests (slow)
    'color-contrast': { enabled: false },
  }
})

expect.extend(toHaveNoViolations)

Component Test

it('should not have a11y violations', async () => {
  const { container } = render(<Button>Click me</Button>)
  const results = await axe(container)
  expect(results).toHaveNoViolations()
})
Keyboard Navigation
Tab through all interactive elements
Focus Indicators
Visible focus states on all elements
Screen Reader Testing
Test with NVDA or VoiceOver
Color Contrast
Check with color contrast analyzer
Zoom Testing
Test at 200% zoom level
Form Labels
All inputs have proper labels
Error Messages
Clear error descriptions and announcements
Semantic HTML
Proper use of headings, landmarks, lists

Browser Extensions

  • axe DevTools
  • Lighthouse
  • WAVE
  • Color Contrast Analyzer

Screen Readers

  • NVDA (Windows, Free)
  • VoiceOver (Mac, Built-in)
  • JAWS (Windows, Paid)
  • Orca (Linux, Free)

Testing Libraries

  • @axe-core/react
  • jest-axe
  • @testing-library/jest-dom
  • Pa11y