accessibility-testing

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 | - |

---

```javascript

// 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');

});

```

---

```javascript

import { test, expect } from '@playwright/test';

import AxeBuilder from '@axe-core/playwright';

test('page has no accessibility violations', async ({ page }) => {

await page.goto('/');

const results = await new AxeBuilder({ page })

.withTags(['wcag2a', 'wcag2aa', 'wcag22aa'])

.analyze();

expect(results.violations).toEqual([]);

});

// CI/CD integration

test('checkout flow accessible', async ({ page }) => {

await page.goto('/checkout');

const results = await new AxeBuilder({ page })

.include('#checkout-form')

.disableRules(['color-contrast']) // Fix in next sprint

.analyze();

expect(results.violations.filter(v =>

v.impact === 'critical' || v.impact === 'serious'

)).toHaveLength(0);

});

```

---

```markdown

• [ ] Page title announced on load
• [ ] Headings hierarchy correct (h1 → h2 → h3)
• [ ] Landmarks present (nav, main, footer)
• [ ] Images have descriptive alt text
• [ ] Form labels read correctly
• [ ] Error messages announced
• [ ] Dynamic content updates announced (aria-live)

```

---

```typescript

// Comprehensive a11y validation

await Task("Accessibility Validation", {

url: 'https://example.com/checkout',

standard: 'WCAG2.2',

level: 'AA',

checks: ['keyboard', 'screen-reader', 'color-contrast'],

includeScreenReaderSimulation: true

}, "qe-visual-tester");

// Fleet coordination for comprehensive testing

const a11yFleet = await FleetManager.coordinate({

strategy: 'comprehensive-accessibility',

agents: [

'qe-visual-tester', // Visual & keyboard checks

'qe-test-generator', // Generate a11y tests

'qe-quality-gate' // Enforce compliance

],

topology: 'parallel'

});

```

---

Memory Namespace

```

aqe/accessibility/

├── wcag-results/* - WCAG audit results

├── screen-reader/* - Screen reader test logs

├── remediation/* - Fix recommendations

└── compliance/* - Compliance reports

```

Fleet Coordination

```typescript

const a11yFleet = await FleetManager.coordinate({

strategy: 'accessibility-testing',

agents: [

'qe-visual-tester', // axe-core, keyboard, focus

'qe-test-generator', // Generate a11y test cases

'qe-quality-gate' // Block non-compliant builds

],

topology: 'parallel'

});

```

---

• [visual-testing-advanced](../visual-testing-advanced/) - Visual a11y checks
• [mobile-testing](../mobile-testing/) - Mobile a11y (VoiceOver, TalkBack)
• [compliance-testing](../compliance-testing/) - Legal compliance

---

1 billion people have disabilities. Inaccessible software excludes 15% of humanity. Legal requirements: ADA, Section 508, EU Directive 2016/2102. $13T purchasing power. 250%+ increase in lawsuits.

Automated testing catches only 30-50% of issues. Combine with manual keyboard testing, screen reader testing, and real user testing with people with disabilities.

With Agents: Agents automate WCAG 2.2 compliance checking, screen reader simulation, and focus management validation. Use agents to enforce accessibility standards in CI/CD and catch violations before production.