Accessibility Testing

Issue	Problem	Fix
Poor color contrast	Unreadable for low-vision users	Ensure 4.5:1 contrast ratio
Missing alt text	Images invisible to screen readers	Add descriptive alt text
No keyboard navigation	Can't use without mouse	Use Tab key, focus indicators
Unlabeled form fields	Screen readers can't explain fields	`<label>` tags or ARIA labels
No video captions	Deaf users can't watch	Add captions/transcripts
Unclear focus indicator	Can't see where keyboard is	Add visible focus styling
Color-only information	Colorblind users miss meaning	Use icons, patterns, labels too

<!-- Inaccessible form -->
<form>
  Email: <input type="email" name="email">
  Password: <input type="password" name="password">
  <input type="checkbox"> Remember me
  <button>Login</button>
</form>

<!-- Accessible form -->
<form>
  <div class="form-group">
    <label for="email">Email address</label>
    <input type="email" id="email" name="email" required aria-describedby="email-help">
    <small id="email-help">We'll never share your email</small>
  </div>

  <div class="form-group">
    <label for="password">Password</label>
    <input type="password" id="password" name="password" required>
  </div>

  <div class="form-group">
    <input type="checkbox" id="remember" name="remember">
    <label for="remember">Remember me for 30 days</label>
  </div>

  <button type="submit">Login</button>
</form>

<!-- Accessible image -->
<img src="product.jpg" alt="Blue wireless headphones with noise cancellation">

<!-- Inaccessible heading -->
<div style="font-size: 24px; font-weight: bold;">Products</div>

<!-- Accessible heading -->
<h1>Products</h1>

<!-- Accessible link (not "Click here") -->
<a href="/about">Learn more about our company</a>

<!-- Accessible video -->
<video controls>
  <source src="demo.mp4" type="video/mp4">
  <track kind="captions" src="demo-captions.vtt" srclang="en" label="English">
  Your browser doesn't support HTML5 video.
</video>

<!-- Accessible color with pattern -->
<div style="background: #ff0000; color: white;">
  Status: <span style="color: #ff0000;">❌</span> Failed
</div>

// Automated accessibility testing with Axe
const { AxeBuilder } = require('@axe-core/playwright');
const { chromium } = require('playwright');

describe('Accessibility Tests', () => {
  it('should pass accessibility checks on homepage', async () => {
    const browser = await chromium.launch();
    const page = await browser.newPage();
    await page.goto('https://example.com');

    // Run Axe accessibility scan
    const results = await new AxeBuilder({ page }).analyze();

    // Check for violations
    expect(results.violations).toHaveLength(0);
    expect(results.passes.length).toBeGreaterThan(0);

    await browser.close();
  });

  it('should check color contrast', async () => {
    const browser = await chromium.launch();
    const page = await browser.newPage();
    await page.goto('https://example.com');

    const results = await new AxeBuilder({ page })
      .withRules(['color-contrast'])
      .analyze();

    // Ensure no color contrast violations
    expect(results.violations).toHaveLength(0);

    await browser.close();
  });
});

# Accessibility Manual Testing Checklist

## Keyboard Navigation
- [ ] Can navigate all interactive elements using Tab key
- [ ] Focus indicator is visible on every focusable element
- [ ] Can activate buttons/links with Enter key
- [ ] Can submit forms with Enter key
- [ ] No keyboard traps (focus doesn't get stuck)
- [ ] Tab order is logical and intuitive

## Screen Reader Testing (NVDA, JAWS, VoiceOver)
- [ ] All images have meaningful alt text (or marked as decorative)
- [ ] Form labels are associated with inputs
- [ ] Error messages are announced
- [ ] Page structure makes sense when read aloud
- [ ] Links have descriptive text ("Click here" is bad)
- [ ] Headings are semantic (h1, h2, etc.)

## Color and Contrast
- [ ] Text contrast is at least 4.5:1 (normal text) or 3:1 (large text)
- [ ] Information isn't conveyed by color alone
- [ ] Color picker tested with different color blindness types

## Visual Design
- [ ] Focus indicators are clearly visible
- [ ] Buttons are recognizable as clickable
- [ ] Text is not too small (at least 12px)
- [ ] Line spacing is adequate

## Content
- [ ] Captions or transcripts for audio/video
- [ ] Plain language (avoid jargon)
- [ ] Lists are semantic (not just line breaks)
- [ ] Tables have headers and structure

## Forms
- [ ] All inputs have labels
- [ ] Required fields are marked
- [ ] Error messages are clear and helpful
- [ ] Success messages are announced
- [ ] Form can be completed with keyboard alone

## Assistive Tech
- [ ] Tested with screen reader (NVDA, JAWS, VoiceOver)
- [ ] Tested with magnifier (200%+ zoom)
- [ ] Tested with voice control
- [ ] Tested with switch access (single-button navigation)

Accessibility Testing

TL;DR

Learning Objectives

Motivating Scenario

Core Concepts

WCAG 2.1 Standards

Common Accessibility Issues and Fixes

Practical Example

When to Use / When Not to Use

Patterns and Pitfalls

Accessibility Testing Best Practices and Anti-Patterns

Design Review Checklist

Self-Check Questions

Next Steps

References

Accessibility Testing

TL;DR​

Learning Objectives​

Motivating Scenario​

Core Concepts​

WCAG 2.1 Standards​

Common Accessibility Issues and Fixes​

Practical Example​

When to Use / When Not to Use​

Patterns and Pitfalls​

Accessibility Testing Best Practices and Anti-Patterns

Design Review Checklist​

Self-Check Questions​

Next Steps​

References​

TL;DR

Learning Objectives

Motivating Scenario

Core Concepts

WCAG 2.1 Standards

Common Accessibility Issues and Fixes

Practical Example

When to Use / When Not to Use

Patterns and Pitfalls

Design Review Checklist

Self-Check Questions

Next Steps

References