Testing Without Losing Your Mind

How to catch problems before your users do

The first time you try using your website with a screen reader, it’s humbling. Really humbling.

What sounds smooth and obvious to you might sound like complete gibberish when read aloud. That beautiful visual design? It might create a keyboard navigation experience like stumbling through a house in the dark.

But here’s the good news: you don’t need to become a screen reader expert to catch most problems.

The 5-Minute Accessibility Check

Before you push that code:

1. Unplug your mouse (Takes 2 minutes)

• Can you Tab to everything?
• Can you activate everything with Enter or Space?
• Can you see where you are?
• Can you escape from traps (like dropdowns)?

2. Turn on a screen reader (even if you use it badly)

• Windows: NVDA (free)
• Mac: VoiceOver (built-in, Cmd+F5)
• Mobile: TalkBack (Android) or VoiceOver (iOS)

3. Listen for:

• Are buttons announced as buttons?
• Do images have useful descriptions?
• Can you understand form fields without looking?
• Do error messages get announced?

4. Zoom to 400%

• Does text reflow?
• Can you still use everything?
• Does horizontal scrolling appear?

5. The Squint Test

Squint at your screen. Can you still:

• Tell what’s clickable?
• Read the important text?
• Understand the page structure?

6. If it fails the squint test, it probably has contrast issues.

Automated Testing: Your New Best Friend

Automated tools catch the obvious stuff. Use them, but don’t rely on them entirely.

// Example: Adding axe-core to your tests

import { axe } from 'jest-axe';

test('should not have accessibility violations', async () => {

  const { container } = render(<MyComponent />);

  const results = await axe(container);

  expect(results).toHaveNoViolations();

});

// Or in your build process

const axe = require('axe-core');

axe.run(document, (err, results) => {

  if (results.violations.length) {

    console.error('Accessibility issues found:', results.violations);

  }

});

Tools to try:

• Silktide: Browser extension and platform for comprehensive testing
• axe DevTools: Browser extension for testing
• WAVE: Visual feedback about accessibility
• Lighthouse: Built into Chrome DevTools
• Pa11y: Command-line testing
• jest-axe: Automated testing in Jest

Remember: Automated testing catches maybe 30% of accessibility issues. The rest needs human brains.

→ Testing tools that actually help:

• axe DevTools – Catch the obvious stuff
• WAVE – Visual feedback on what’s broken
• NVDA – Free screen reader for Windows