Testing for Accessibility

Testing for accessibility is essential to ensure your website works for all users. A comprehensive testing strategy includes automated tools, manual checks, keyboard testing, and real assistive technology testing. No single tool catches everything, so combining multiple approaches gives you the best results.

The Three Layers of Testing

Effective accessibility testing requires three complementary approaches:

Automated Testing: Tools that scan your code and catch common issues (catches ~30-40% of problems)
Manual Testing: Human review of functionality, content, and user experience (catches issues tools miss)
Assistive Technology Testing: Testing with screen readers and other tools that users actually use

Automated Testing Tools

Start with automated tools to catch obvious issues quickly:

Browser Developer Tools

Built-in accessibility features in browser DevTools:

browser-testing.js

// Chrome DevTools
// 1. Open DevTools (F12 or Cmd+Option+I)
// 2. Go to "Lighthouse" tab
// 3. Select "Accessibility" category
// 4. Click "Generate report"

// Chrome also has an Accessibility panel
// DevTools > More Tools > Accessibility

// Firefox DevTools
// 1. Open DevTools (F12)
// 2. Go to "Accessibility" tab
// 3. Enable accessibility features
// 4. Inspect elements for ARIA, roles, etc.

Lighthouse

Google's Lighthouse is built into Chrome DevTools:

Audits pages for accessibility issues
Provides scores from 0-100
Lists specific problems with guidance
Can be run from command line or CI/CD

lighthouse-cli.sh

# Install Lighthouse CLI
npm install -g lighthouse

# Run accessibility audit
lighthouse https://example.com --only-categories=accessibility

# Generate JSON report
lighthouse https://example.com --output=json --output-path=./report.json

# Run in CI/CD
lighthouse https://example.com --chrome-flags="--headless" --quiet

axe DevTools

One of the most popular accessibility testing extensions:

Browser extension for Chrome, Firefox, Edge
Catches more issues than Lighthouse
Provides detailed explanations and solutions
Shows exactly where issues occur in the page

axe-core.js

// axe-core can be integrated into your test suite
npm install --save-dev axe-core

// Example with Jest
const { axe, toHaveNoViolations } = require('jest-axe');

expect.extend(toHaveNoViolations);

test('page should be accessible', async () => {
  const html = '<html>...</html>';
  const results = await axe(html);
  
  expect(results).toHaveNoViolations();
});

WAVE (Web Accessibility Evaluation Tool)

Visual feedback tool that shows issues directly on your page:

Browser extension and web service
Shows icons on page indicating issues
Color-coded feedback (errors, alerts, features)
Great for beginners to visualize problems

Pa11y

Command-line tool and dashboard for automated testing:

pa11y.sh

# Install Pa11y
npm install -g pa11y

# Test a URL
pa11y https://example.com

# Test with specific standard
pa11y --standard WCAG2AA https://example.com

# Output as JSON
pa11y --reporter json https://example.com

# Test multiple pages
pa11y https://example.com/page1 https://example.com/page2

# Integrate with CI
pa11y-ci --config .pa11yci.json

Manual Testing Checklist

Automated tools can't catch everything. Perform these manual checks:

1. Keyboard Navigation

keyboard-checklist.txt

Keyboard Testing Steps:

□ Unplug mouse and use only keyboard
□ Press Tab to move through interactive elements
□ Verify focus indicator is visible on all elements
□ Check tab order follows logical reading order
□ Test Shift+Tab to move backwards
□ Press Enter/Space to activate buttons and links
□ Press Escape to close dialogs and menus
□ Use Arrow keys in custom widgets (dropdowns, tabs)
□ Ensure no keyboard traps (can exit all elements)
□ Check skip links appear and work
□ Test all functionality is keyboard accessible

2. Zoom and Reflow Testing

zoom-checklist.txt

Zoom Testing Steps:

□ Zoom to 200% (Cmd/Ctrl + +)
□ Check all content remains visible
□ Verify no horizontal scrolling appears
□ Ensure content reflows properly
□ Test at 400% zoom for severe vision issues
□ Check text remains readable at all zoom levels
□ Verify images scale appropriately
□ Ensure interactive elements remain clickable

3. Color and Contrast Testing

color-checklist.txt

Color Testing Steps:

□ Use contrast checker on all text
□ Verify 4.5:1 ratio for normal text
□ Verify 3:1 ratio for large text and UI components
□ Check links are distinguishable without color
□ Test with grayscale to ensure clarity
□ Verify error messages don't rely on color alone
□ Check focus indicators have sufficient contrast
□ Test with color blindness simulators

4. Content Testing

content-checklist.txt

Content Testing Steps:

□ Check all images have alt text
□ Verify alt text is descriptive and meaningful
□ Ensure decorative images have empty alt=""
□ Check heading hierarchy (h1, h2, h3 in order)
□ Verify page has meaningful title
□ Check lang attribute on html element
□ Verify form labels are associated with inputs
□ Check link text is descriptive
□ Ensure tables have proper headers
□ Verify video has captions
□ Check audio has transcripts

Test with actual screen readers to understand the user experience:

NVDA (Windows): Free, open-source, widely used
JAWS (Windows): Most popular commercial screen reader
VoiceOver (Mac/iOS): Built into Apple devices
TalkBack (Android): Built into Android devices
Narrator (Windows): Built into Windows

VoiceOver Quick Start (Mac)

voiceover-commands.txt

VoiceOver Commands:

Turn on/off: Cmd + F5
VoiceOver key: Control + Option (VO)

Basic Navigation:
VO + Right Arrow: Next item
VO + Left Arrow: Previous item
VO + Shift + Down: Enter group/link
VO + Shift + Up: Exit group

Web Navigation:
VO + U: Open rotor (headings, links, landmarks)
VO + Cmd + H: Next heading
VO + Cmd + L: Next link
VO + Cmd + J: Jump to...

Reading:
VO + A: Start reading
Control: Stop reading

NVDA Quick Start (Windows)

nvda-commands.txt

NVDA Commands:

Start NVDA: Control + Alt + N
NVDA key: Insert or Caps Lock

Basic Navigation:
Down Arrow: Next line
Up Arrow: Previous line
Tab: Next focusable element

Web Navigation:
H: Next heading
K: Next link
D: Next landmark
F: Next form field
T: Next table
Insert + F7: Elements list

Reading:
Insert + Down: Start reading
Control: Stop reading

Testing Workflow

Follow this workflow for comprehensive accessibility testing:

Development Phase:
- Run automated tools (Lighthouse, axe) regularly
- Test keyboard navigation during development
- Use browser DevTools accessibility panel
Before Release:
- Complete full manual checklist
- Test with at least one screen reader
- Verify color contrast on all pages
- Test zoom to 200%
Ongoing Monitoring:
- Set up automated testing in CI/CD
- Regular audits of new features
- User testing with people with disabilities

Integrating Testing into CI/CD

github-actions.yml

# .github/workflows/accessibility.yml
name: Accessibility Tests

on: [push, pull_request]

jobs:
  a11y-tests:
    runs-on: ubuntu-latest
    
    steps:
      - uses: actions/checkout@v2
      
      - name: Setup Node
        uses: actions/setup-node@v2
        with:
          node-version: '16'
      
      - name: Install dependencies
        run: npm install
      
      - name: Build site
        run: npm run build
      
      - name: Run Pa11y
        run: |
          npm install -g pa11y-ci
          pa11y-ci --config .pa11yci.json
      
      - name: Run Lighthouse CI
        run: |
          npm install -g @lhci/cli
          lhci autorun

Mobile Accessibility Testing

Don't forget to test on mobile devices:

Test with VoiceOver on iOS devices
Test with TalkBack on Android devices
Verify touch targets are at least 44x44 pixels
Check mobile zoom and pinch-to-zoom works
Test with device in portrait and landscape
Verify mobile navigation is keyboard accessible

Common Issues Found During Testing

common-issues.html

<!-- Issue 1: Missing alt text -->
<!-- ❌ Before -->
<img src="chart.jpg">

<!-- ✅ After -->
<img src="chart.jpg" alt="Sales increased 40% in Q2">

<!-- Issue 2: Poor color contrast -->
<!-- ❌ Before -->
<p style="color: #999;">This text is hard to read</p>

<!-- ✅ After -->
<p style="color: #333;">This text is readable</p>

<!-- Issue 3: Missing form labels -->
<!-- ❌ Before -->
<input type="text" placeholder="Email">

<!-- ✅ After -->
<label for="email">Email</label>
<input type="text" id="email">

<!-- Issue 4: Empty links -->
<!-- ❌ Before -->
<a href="/next"><img src="arrow.svg"></a>

<!-- ✅ After -->
<a href="/next">
  <img src="arrow.svg" alt="Next page">
</a>

<!-- Issue 5: Non-descriptive link text -->
<!-- ❌ Before -->
<a href="/article">Click here</a>

<!-- ✅ After -->
<a href="/article">Read our accessibility guide</a>

<!-- Issue 6: Heading skipping levels -->
<!-- ❌ Before -->
<h1>Title</h1>
<h3>Subtitle</h3>

<!-- ✅ After -->
<h1>Title</h1>
<h2>Subtitle</h2>

Testing Tools Summary

Tool	Type	Best For
Lighthouse	Automated	Quick overview, CI/CD
axe DevTools	Automated	Detailed issue detection
WAVE	Automated	Visual feedback
Pa11y	Automated	CLI, CI/CD integration
Keyboard	Manual	Interaction testing
Screen Readers	Manual	Real user experience
Contrast Checker	Manual	Color verification

User Testing with Real Users

The best way to understand accessibility is to test with actual users who have disabilities:

Recruit users with various disabilities
Observe how they interact with your site
Ask about pain points and barriers
Learn about their assistive technology
Incorporate feedback into improvements

Testing Best Practices

Test early and often: Don't wait until the end
Use multiple tools: No single tool catches everything
Test with real devices: Not just emulators
Include manual testing: Automated tools miss ~60% of issues
Learn screen readers: Even basic usage helps
Document findings: Track issues and fixes
Make it part of process: Integrate into workflow
Educate the team: Everyone should understand basics

Key Takeaways

Combine automated tools, manual testing, and assistive technology testing
Automated tools only catch 30-40% of accessibility issues
Use Lighthouse, axe DevTools, WAVE, and Pa11y for automated testing
Always test keyboard navigation without a mouse
Learn at least one screen reader (VoiceOver or NVDA)
Test zoom to 200% and check content reflows properly
Verify color contrast with actual contrast checking tools
Integrate accessibility testing into your CI/CD pipeline
Test on real mobile devices, not just desktop
User testing with people with disabilities provides best insights

What's Next?

You now have the tools and knowledge to test your websites for accessibility. In the next lesson, we'll move to the Best Practices and SEO section, starting with HTML best practices for writing clean, maintainable code.

The Three Layers of Testing

Effective accessibility testing requires three complementary approaches:

Automated Testing: Tools that scan your code and catch common issues (catches ~30-40% of problems)
Manual Testing: Human review of functionality, content, and user experience (catches issues tools miss)
Assistive Technology Testing: Testing with screen readers and other tools that users actually use

Automated Testing Tools

Start with automated tools to catch obvious issues quickly:

Browser Developer Tools

Built-in accessibility features in browser DevTools:

browser-testing.js

// Chrome DevTools
// 1. Open DevTools (F12 or Cmd+Option+I)
// 2. Go to "Lighthouse" tab
// 3. Select "Accessibility" category
// 4. Click "Generate report"

// Chrome also has an Accessibility panel
// DevTools > More Tools > Accessibility

// Firefox DevTools
// 1. Open DevTools (F12)
// 2. Go to "Accessibility" tab
// 3. Enable accessibility features
// 4. Inspect elements for ARIA, roles, etc.

Lighthouse

Google's Lighthouse is built into Chrome DevTools:

Audits pages for accessibility issues
Provides scores from 0-100
Lists specific problems with guidance
Can be run from command line or CI/CD

lighthouse-cli.sh

# Install Lighthouse CLI
npm install -g lighthouse

# Run accessibility audit
lighthouse https://example.com --only-categories=accessibility

# Generate JSON report
lighthouse https://example.com --output=json --output-path=./report.json

# Run in CI/CD
lighthouse https://example.com --chrome-flags="--headless" --quiet

axe DevTools

One of the most popular accessibility testing extensions:

Browser extension for Chrome, Firefox, Edge
Catches more issues than Lighthouse
Provides detailed explanations and solutions
Shows exactly where issues occur in the page

axe-core.js

// axe-core can be integrated into your test suite
npm install --save-dev axe-core

// Example with Jest
const { axe, toHaveNoViolations } = require('jest-axe');

expect.extend(toHaveNoViolations);

test('page should be accessible', async () => {
  const html = '<html>...</html>';
  const results = await axe(html);
  
  expect(results).toHaveNoViolations();
});

WAVE (Web Accessibility Evaluation Tool)

Visual feedback tool that shows issues directly on your page:

Browser extension and web service
Shows icons on page indicating issues
Color-coded feedback (errors, alerts, features)
Great for beginners to visualize problems

Pa11y

Command-line tool and dashboard for automated testing:

pa11y.sh

# Install Pa11y
npm install -g pa11y

# Test a URL
pa11y https://example.com

# Test with specific standard
pa11y --standard WCAG2AA https://example.com

# Output as JSON
pa11y --reporter json https://example.com

# Test multiple pages
pa11y https://example.com/page1 https://example.com/page2

# Integrate with CI
pa11y-ci --config .pa11yci.json

Manual Testing Checklist

Automated tools can't catch everything. Perform these manual checks:

1. Keyboard Navigation

keyboard-checklist.txt

Keyboard Testing Steps:

□ Unplug mouse and use only keyboard
□ Press Tab to move through interactive elements
□ Verify focus indicator is visible on all elements
□ Check tab order follows logical reading order
□ Test Shift+Tab to move backwards
□ Press Enter/Space to activate buttons and links
□ Press Escape to close dialogs and menus
□ Use Arrow keys in custom widgets (dropdowns, tabs)
□ Ensure no keyboard traps (can exit all elements)
□ Check skip links appear and work
□ Test all functionality is keyboard accessible

2. Zoom and Reflow Testing

zoom-checklist.txt

Zoom Testing Steps:

□ Zoom to 200% (Cmd/Ctrl + +)
□ Check all content remains visible
□ Verify no horizontal scrolling appears
□ Ensure content reflows properly
□ Test at 400% zoom for severe vision issues
□ Check text remains readable at all zoom levels
□ Verify images scale appropriately
□ Ensure interactive elements remain clickable

3. Color and Contrast Testing

color-checklist.txt

Color Testing Steps:

□ Use contrast checker on all text
□ Verify 4.5:1 ratio for normal text
□ Verify 3:1 ratio for large text and UI components
□ Check links are distinguishable without color
□ Test with grayscale to ensure clarity
□ Verify error messages don't rely on color alone
□ Check focus indicators have sufficient contrast
□ Test with color blindness simulators

4. Content Testing

content-checklist.txt

Content Testing Steps:

□ Check all images have alt text
□ Verify alt text is descriptive and meaningful
□ Ensure decorative images have empty alt=""
□ Check heading hierarchy (h1, h2, h3 in order)
□ Verify page has meaningful title
□ Check lang attribute on html element
□ Verify form labels are associated with inputs
□ Check link text is descriptive
□ Ensure tables have proper headers
□ Verify video has captions
□ Check audio has transcripts

Test with actual screen readers to understand the user experience:

NVDA (Windows): Free, open-source, widely used
JAWS (Windows): Most popular commercial screen reader
VoiceOver (Mac/iOS): Built into Apple devices
TalkBack (Android): Built into Android devices
Narrator (Windows): Built into Windows

VoiceOver Quick Start (Mac)

voiceover-commands.txt

VoiceOver Commands:

Turn on/off: Cmd + F5
VoiceOver key: Control + Option (VO)

Basic Navigation:
VO + Right Arrow: Next item
VO + Left Arrow: Previous item
VO + Shift + Down: Enter group/link
VO + Shift + Up: Exit group

Web Navigation:
VO + U: Open rotor (headings, links, landmarks)
VO + Cmd + H: Next heading
VO + Cmd + L: Next link
VO + Cmd + J: Jump to...

Reading:
VO + A: Start reading
Control: Stop reading

NVDA Quick Start (Windows)

nvda-commands.txt

NVDA Commands:

Start NVDA: Control + Alt + N
NVDA key: Insert or Caps Lock

Basic Navigation:
Down Arrow: Next line
Up Arrow: Previous line
Tab: Next focusable element

Web Navigation:
H: Next heading
K: Next link
D: Next landmark
F: Next form field
T: Next table
Insert + F7: Elements list

Reading:
Insert + Down: Start reading
Control: Stop reading

Testing Workflow

Follow this workflow for comprehensive accessibility testing:

Development Phase:
- Run automated tools (Lighthouse, axe) regularly
- Test keyboard navigation during development
- Use browser DevTools accessibility panel
Before Release:
- Complete full manual checklist
- Test with at least one screen reader
- Verify color contrast on all pages
- Test zoom to 200%
Ongoing Monitoring:
- Set up automated testing in CI/CD
- Regular audits of new features
- User testing with people with disabilities

Integrating Testing into CI/CD

github-actions.yml

# .github/workflows/accessibility.yml
name: Accessibility Tests

on: [push, pull_request]

jobs:
  a11y-tests:
    runs-on: ubuntu-latest
    
    steps:
      - uses: actions/checkout@v2
      
      - name: Setup Node
        uses: actions/setup-node@v2
        with:
          node-version: '16'
      
      - name: Install dependencies
        run: npm install
      
      - name: Build site
        run: npm run build
      
      - name: Run Pa11y
        run: |
          npm install -g pa11y-ci
          pa11y-ci --config .pa11yci.json
      
      - name: Run Lighthouse CI
        run: |
          npm install -g @lhci/cli
          lhci autorun

Mobile Accessibility Testing

Don't forget to test on mobile devices:

Test with VoiceOver on iOS devices
Test with TalkBack on Android devices
Verify touch targets are at least 44x44 pixels
Check mobile zoom and pinch-to-zoom works
Test with device in portrait and landscape
Verify mobile navigation is keyboard accessible

Common Issues Found During Testing

common-issues.html

<!-- Issue 1: Missing alt text -->
<!-- ❌ Before -->
<img src="chart.jpg">

<!-- ✅ After -->
<img src="chart.jpg" alt="Sales increased 40% in Q2">

<!-- Issue 2: Poor color contrast -->
<!-- ❌ Before -->
<p style="color: #999;">This text is hard to read</p>

<!-- ✅ After -->
<p style="color: #333;">This text is readable</p>

<!-- Issue 3: Missing form labels -->
<!-- ❌ Before -->
<input type="text" placeholder="Email">

<!-- ✅ After -->
<label for="email">Email</label>
<input type="text" id="email">

<!-- Issue 4: Empty links -->
<!-- ❌ Before -->
<a href="/next"><img src="arrow.svg"></a>

<!-- ✅ After -->
<a href="/next">
  <img src="arrow.svg" alt="Next page">
</a>

<!-- Issue 5: Non-descriptive link text -->
<!-- ❌ Before -->
<a href="/article">Click here</a>

<!-- ✅ After -->
<a href="/article">Read our accessibility guide</a>

<!-- Issue 6: Heading skipping levels -->
<!-- ❌ Before -->
<h1>Title</h1>
<h3>Subtitle</h3>

<!-- ✅ After -->
<h1>Title</h1>
<h2>Subtitle</h2>

Testing Tools Summary

Tool	Type	Best For
Lighthouse	Automated	Quick overview, CI/CD
axe DevTools	Automated	Detailed issue detection
WAVE	Automated	Visual feedback
Pa11y	Automated	CLI, CI/CD integration
Keyboard	Manual	Interaction testing
Screen Readers	Manual	Real user experience
Contrast Checker	Manual	Color verification

User Testing with Real Users

The best way to understand accessibility is to test with actual users who have disabilities:

Recruit users with various disabilities
Observe how they interact with your site
Ask about pain points and barriers
Learn about their assistive technology
Incorporate feedback into improvements

Testing Best Practices

Test early and often: Don't wait until the end
Use multiple tools: No single tool catches everything
Test with real devices: Not just emulators
Include manual testing: Automated tools miss ~60% of issues
Learn screen readers: Even basic usage helps
Document findings: Track issues and fixes
Make it part of process: Integrate into workflow
Educate the team: Everyone should understand basics

Key Takeaways

Combine automated tools, manual testing, and assistive technology testing
Automated tools only catch 30-40% of accessibility issues
Use Lighthouse, axe DevTools, WAVE, and Pa11y for automated testing
Always test keyboard navigation without a mouse
Learn at least one screen reader (VoiceOver or NVDA)
Test zoom to 200% and check content reflows properly
Verify color contrast with actual contrast checking tools
Integrate accessibility testing into your CI/CD pipeline
Test on real mobile devices, not just desktop
User testing with people with disabilities provides best insights

The Three Layers of Testing

Automated Testing Tools

Browser Developer Tools

Lighthouse

axe DevTools

WAVE (Web Accessibility Evaluation Tool)

Pa11y

Manual Testing Checklist

1. Keyboard Navigation

2. Zoom and Reflow Testing

3. Color and Contrast Testing

4. Content Testing

Screen Reader Testing

Popular Screen Readers

VoiceOver Quick Start (Mac)

NVDA Quick Start (Windows)

Testing Workflow

Integrating Testing into CI/CD

Mobile Accessibility Testing

Common Issues Found During Testing

Testing Tools Summary

User Testing with Real Users

Testing Best Practices

Key Takeaways

What's Next?

Know someone who'd find this guide helpful? Please share!

Never Miss a New HTML Tutorial

You might also like

UI Components

Developer Tools

HTML Game

Join Our Web Development Training Program

Join Our Social Communities

Menu

Testing for Accessibility

The Three Layers of Testing

Automated Testing Tools

Browser Developer Tools

Lighthouse

axe DevTools

WAVE (Web Accessibility Evaluation Tool)

Pa11y

Manual Testing Checklist

1. Keyboard Navigation

2. Zoom and Reflow Testing

3. Color and Contrast Testing

4. Content Testing

Screen Reader Testing

Popular Screen Readers

VoiceOver Quick Start (Mac)

NVDA Quick Start (Windows)

Testing Workflow

Integrating Testing into CI/CD

Mobile Accessibility Testing

Common Issues Found During Testing

Testing Tools Summary

User Testing with Real Users

Testing Best Practices

Key Takeaways

What's Next?

Know someone who'd find this guide helpful? Please share!

Never Miss a New HTML Tutorial

You might also like

UI Components

Developer Tools

HTML Game

Join Our Web Development Training Program

Join Our Social Communities

Menu