accessibility-testing

Accessibility Testing

<default_to_action> When testing accessibility or ensuring compliance:

1. APPLY POUR principles: Perceivable, Operable, Understandable, Robust
2. TEST with keyboard-only navigation (Tab, Enter, Escape)
3. VALIDATE with screen readers (VoiceOver, NVDA, JAWS)
4. CHECK color contrast (4.5:1 for text, 3:1 for large text)
5. AUTOMATE with axe-core, integrate in CI/CD pipeline

Quick A11y Checklist:

• All images have alt text (or alt="" for decorative)
• All form fields have labels
• Color is never the only indicator
• Focus visible on all interactive elements
• Keyboard navigation works throughout

Critical Success Factors:

• Automated testing catches 30-50% of issues
• Manual testing with real assistive tech required
• Include users with disabilities in testing </default_to_action>

Quick Reference Card

When to Use

• Legal compliance (ADA, Section 508, EU Directive)
• New feature development
• Before release validation
• Accessibility audits

WCAG 2.2 Levels

Level	Requirement	Target
A	Basic accessibility	Minimum legal
AA	Standard (most orgs)	Industry standard
AAA	Enhanced	Specialized sites

POUR Principles

Principle	Meaning	Key Tests
Perceivable	Can perceive content	Alt text, contrast, captions
Operable	Can operate UI	Keyboard, no seizures, navigation
Understandable	Can understand	Clear labels, predictable, errors
Robust	Works with assistive tech	Valid HTML, ARIA

Color Contrast Requirements

Content	AA Ratio	AAA Ratio
Normal text	4.5:1	7:1
Large text (18pt+)	3:1	4.5:1
UI components	3:1	-

---

Keyboard Navigation Testing

// Test all interactive elements reachable via keyboard
test('all interactive elements keyboard accessible', async ({ page }) => {
  await page.goto('/');

  const focusableElements = await page.$$('button, a, input, select, textarea, [tabindex]');

  for (const element of focusableElements) {
    await element.focus();
    const isFocused = await element.evaluate(el => document.activeElement === el);
    expect(isFocused).toBe(true);
  }
});

// Verify visible focus indicator
test('focus indicator visible', async ({ page }) => {
  await page.goto('/');
  await page.keyboard.press('Tab');

  const focusedElement = await page.locator(':focus');
  const outline = await focusedElement.evaluate(el =>
    getComputedStyle(el).outline
  );

  expect(outline).not.toBe('none');
});