WCAG 2.2 compliance testing, screen reader validation, and inclusive design verification. Use when ensuring legal compliance (ADA, Section 508), testing for disabilities, or building accessible applications for 1 billion disabled users globally.
WCAG 2.2 compliance testing, screen reader validation, and inclusive design verification. Use when ensuring legal compliance (ADA, Section 508), testing for disabilities, or building accessible applications for 1 billion disabled users globally.
Consolidated: For comprehensive WCAG auditing with multi-tool testing (axe-core + pa11y + Lighthouse), video accessibility, and remediation, prefer /a11y-ally. This skill provides a quick reference card for basic accessibility testing patterns.
<default_to_action>
When testing accessibility or ensuring compliance:
APPLY POUR principles: Perceivable, Operable, Understandable, Robust
TEST with keyboard-only navigation (Tab, Enter, Escape)
VALIDATE with screen readers (VoiceOver, NVDA, JAWS)
CHECK color contrast (4.5:1 for text, 3:1 for large text)
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 keyboardtest('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 indicatortest('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');
});
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.
