--- id: proffesor-for-testing/agentic-qe/qe-accessibility-testing version: "b55cb040" license: MIT install: manual updated: 2026-07-24 --- # qe-accessibility-testing — This skill provides automated accessibility validation aligned with WCAG 2.2 standards, helping teams systematically verify compliance and meet regulatory obligations. Built for quality engineering workflows, it integrates accessibility checks into your testing pipeline to catch barriers early and ensure your applications remain accessible to all users. Publisher: proffesor-for-testing · Stars: 423 · Updated: 2026-07-24 Install (manual): `git clone https://github.com/proffesor-for-testing/agentic-qe` ## SKILL.md # Accessibility Testing 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 ## 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 ```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'); }); ``` --- ## Automated Testing with axe-core ```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); }); ``` --- ## Screen Reader Testing Checklist ```markdown ## VoiceOver (macOS) Testing - [ ] 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) ``` --- ## Agent-Driven Accessibility ```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' }); ``` --- ## Agent Coordination Hints ### 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' }); ``` --- ## Related Skills - [visual-testing-advanced](../visual-testing-advanced/) - Visual a11y checks - [mobile-testing](../mobile-testing/) - Mobile a11y (VoiceOver, TalkBack) - [compliance-testing](../compliance-testing/) - Legal compliance --- ## Remember **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. [View on SkillFed](https://skillfed.io/proffesor-for-testing/agentic-qe/qe-accessibility-testing) · [View on GitHub](https://github.com/proffesor-for-testing/agentic-qe)