Accessibility Testing WCAG Guide: Complete Handbook

Last updated: June 29, 2026 · 9 min read · By SoftwareTestPilot Editorial Team

Accessibility testing is now a legal requirement in many jurisdictions. This guide gives you the WCAG framework, testing tools, and best practices. For broader context, see our Manual Testing Tutorial and AI Testing Tools guides.

• Legal requirement — ADA, EAA, Section 508, and AODA enforce WCAG compliance.
• 15–20% of users have some form of disability.
• SEO benefit — accessible sites rank higher.
• Better UX for everyone — accessibility improves usability for all.
• Business risk — non-compliance can cost $100k+ in lawsuits.

WCAG (Web Content Accessibility Guidelines) has three conformance levels:

Most legal frameworks require AA conformance.

Perceivable

Information must be presentable in ways users can perceive.

Operable

Interface must be operable by all users.

Understandable

Information and UI must be understandable.

Robust

Content must work with assistive technologies.

Automated tools (catch 30–50% of issues)

Manual testing tools

Screen readers by platform

Step 1 — Automated scan

# Using axe-core CLI
npm install -g @axe-core/cli
axe https://example.com

# Using Lighthouse
npx lighthouse https://example.com --only-categories=accessibility

Step 2 — Keyboard testing

1. Unplug mouse (or use only keyboard).
2. Tab through every page.
3. Verify all interactive elements are reachable.
4. Verify the focus indicator is visible.
5. Verify there are no keyboard traps.
6. Test Enter/Space activation.

Step 3 — Screen reader testing

1. Enable a screen reader (NVDA on Windows, VoiceOver on Mac).
2. Navigate using screen reader only.
3. Verify all images have alt text.
4. Verify form fields have labels.
5. Verify headings are properly nested.
6. Verify dynamic content is announced.

Step 4 — Visual testing

1. Zoom to 200% — no horizontal scrolling.
2. Test with high contrast mode.
3. Test color contrast with WebAIM checker.
4. Verify focus indicators are visible.

TC_A11Y_001 — All images have alt text

1. Open browser.
2. Navigate each page.
3. Inspect every image.
4. Verify <img alt="..."> or role="img" aria-label="...".

TC_A11Y_002 — Forms have labels

1. Open each form.
2. Verify each input has an associated <label>.
3. Verify required fields have aria-required="true".

TC_A11Y_003 — Color contrast meets WCAG AA

1. Use the WebAIM contrast checker.
2. Verify normal text ≥ 4.5:1.
3. Verify large text (≥18pt) ≥ 3:1.

TC_A11Y_004 — Keyboard navigation works

1. Tab from top to bottom of the page.
2. Verify all interactive elements are reachable.
3. Verify the focus indicator is visible.
4. Press Enter/Space on each focused element.

TC_A11Y_005 — Screen reader announces dynamic content

1. Trigger a dynamic update (e.g. search results).
2. Verify the screen reader announces the update.
3. Verify aria-live="polite" or aria-live="assertive" is used appropriately.

# GitHub Actions
- name: Accessibility scan
  run: |
    npm ci
    npx pa11y-ci --config pa11y.json

# Or using axe-core in tests
- name: Run accessibility tests
  run: npm run test:a11y

For broader CI/CD patterns, see our CI/CD Pipeline Testing Tutorial and GitHub Actions for Automation Testing guide.

Mistake 1 — Adding alt text to decorative images

Decorative images should have alt="", not descriptive alt text. Screen readers will skip them.

Mistake 2 — Using color alone to convey meaning

Color-blind users can't distinguish red from green. Use icons, labels, or patterns in addition to color.

Mistake 3 — Missing form labels

<!-- BAD -->
<input type="email" placeholder="Email" />

<!-- GOOD -->
<label for="email">Email address</label>
<input id="email" type="email" />

Mistake 4 — No keyboard alternatives

Every mouse-driven action must have a keyboard equivalent. Test with Tab and arrow keys.

Mistake 5 — Low contrast colors

/* BAD */
color: #ccc;
background: #fff; /* contrast 1.6:1 */

/* GOOD */
color: #595959;
background: #fff; /* contrast 7:1 */

Mistake 6 — Auto-playing audio/video

Disorienting for screen reader users. Always provide a way to pause.

Mistake 7 — Missing skip navigation

Add a “Skip to main content” link as the first focusable element. Critical for keyboard users.

Mistake 8 — Aggressive form timeouts

Don't auto-logout users with disabilities. Warn first and allow extension.

• Manual Testing Tutorial
• CI/CD Pipeline Testing Tutorial
• Playwright Complete Guide
• Best Test Automation Tools (Enterprise)

Official references: WCAG 2.2 (W3C) · axe-core (GitHub) · WebAIM contrast checker.