Accessibility Testing

Even the best knowledge of accessibility cannot replace practical testing. Just as archaeologists systematically search excavation sites, we must systematically test our pages for accessibility using various tools and methods.

Automated Tools

Lighthouse (built into Chrome DevTools)

Lighthouse is a free Google tool that can be run directly from Chrome DevTools:

1. Open DevTools (F12)
2. Go to the "Lighthouse" tab
3. Check "Accessibility"
4. Click "Analyze page load"

Lighthouse checks, among other things:

• Whether images have alt text
• Whether color contrast is sufficient
• Whether form elements have labels
• Whether the page has correct heading hierarchy

axe DevTools

axe is one of the most popular accessibility testing tools:

1<!-- An axe test result might look like this: -->
2<!--
3  Violation: Images must have alternate text
4  Element: <img src="pharaoh.jpg">
5  Fix: Add an alt attribute to the image
6  Impact: Critical
7  WCAG: 1.1.1 (Level A)
8-->

HTML Validator (W3C)

Correct HTML is the foundation of accessibility:

1<!-- Errors detected by the validator: -->
2
3<!-- Error: Missing alt attribute -->
4<img src="photo.jpg">
5
6<!-- Error: Duplicate ID -->
7<input id="name">
8<label id="name">
9
10<!-- Error: Incorrect nesting -->
11<p>Text <div>in a div</div> in a paragraph</p>

Manual Testing

Keyboard Test

The simplest manual test - navigate the page using ONLY the keyboard:

1Keyboard navigation checklist:
2[ ] Can every interactive element be reached with Tab?
3[ ] Is the focus order logical?
4[ ] Is focus always visible?
5[ ] Do modal dialogs trap focus?
6[ ] Can a modal be closed with the Escape key?
7[ ] Does the skip link work correctly?
8[ ] Can forms be submitted with Enter?
9[ ] Can dropdown menus be navigated with arrow keys?

Screen Reader Test

Popular screen readers:

• NVDA (Windows, free) - www.nvaccess.org
• VoiceOver (macOS/iOS, built-in) - Cmd + F5
• JAWS (Windows, paid) - professional standard
• TalkBack (Android, built-in)

Zoom Test

1Zoom test checklist:
2[ ] Zoom the page to 200% - is all content visible?
3[ ] Zoom to 400% - does the page still work?
4[ ] Does text not get cut off or overlap?
5[ ] Is scrolling only in one direction?

Chrome DevTools - Accessibility

Accessibility Panel

1Chrome DevTools > Elements > Accessibility:
2- Name: "Close" (from aria-label)
3- Role: button
4- Keyboard-focusable: true
5- Description: "Close dialog"

Vision Deficiency Simulation

Chrome DevTools > Rendering > Emulate vision deficiencies:

• Protanopia (no red)
• Deuteranopia (no green)
• Tritanopia (no blue)
• Blurred vision

Contrast Inspection

1Chrome DevTools > Elements > Computed:
2- Click on the text color
3- The tool will show the contrast ratio
4- Green icon = meets WCAG AA
5- Orange icon = meets WCAG A
6- Red icon = does not meet requirements

Automating a11y Tests

eslint-plugin-jsx-a11y (React)

1{
2  "plugins": ["jsx-a11y"],
3  "rules": {
4    "jsx-a11y/alt-text": "error",
5    "jsx-a11y/anchor-has-content": "error",
6    "jsx-a11y/label-has-associated-control": "error",
7    "jsx-a11y/no-noninteractive-element-interactions": "warn"
8  }
9}

axe-core in Tests

1<!-- Example of an axe-core test result: -->
2<!--
3  Rule: color-contrast
4  Description: Elements must have sufficient color contrast
5  Help: Fix any of the following:
6    Element has insufficient color contrast of 2.5:1
7    Expected minimum: 4.5:1
8  Target: .subtitle
9-->

Accessibility Checklist - Complete List

1<!-- HTML Structure -->
2<!-- [ ] Correct heading hierarchy (h1-h6) -->
3<!-- [ ] Semantic tags (header, nav, main, footer) -->
4<!-- [ ] Page language (lang="en") -->
5
6<!-- Images -->
7<!-- [ ] Alt text for informational images -->
8<!-- [ ] Empty alt="" for decorative images -->
9
10<!-- Navigation -->
11<!-- [ ] Skip link -->
12<!-- [ ] Visible focus -->
13<!-- [ ] Logical Tab order -->
14
15<!-- Forms -->
16<!-- [ ] Label for every field -->
17<!-- [ ] Error messages -->
18<!-- [ ] aria-required for required fields -->
19
20<!-- Color and Contrast -->
21<!-- [ ] Contrast minimum 4.5:1 -->
22<!-- [ ] Information not conveyed by color alone -->
23
24<!-- Multimedia -->
25<!-- [ ] Captions for video -->
26<!-- [ ] Transcripts for audio -->
27
28<!-- ARIA -->
29<!-- [ ] aria-label for icon buttons -->
30<!-- [ ] aria-live for dynamic content -->
31<!-- [ ] aria-expanded for expandable elements -->

Accessibility testing is like verifying that every corridor in the pyramid leads where it should - systematically checking every element to ensure that every visitor reaches their destination.