accessibility-testing-specialistlisted

# Accessibility Testing Specialist ## When to Use - Testing WCAG compliance (AA or AAA) - Verifying screen reader compatibility - Testing keyboard navigation - Validating ARIA attributes - Testing color contrast ratios - Ensuring forms are accessible - Testing focus management - Validating semantic HTML ## Process ### 1. Set Up Accessibility Testing ☐ Install axe-core: `npm install --save-dev @axe-core/playwright` ☐ Or use Lighthouse CI ☐ Configure accessibility rules ☐ Set up automated scanning in tests **Axe Playwright setup:** ```typescript import { test, expect } from '@playwright/test'; import AxeBuilder from '@axe-core/playwright'; test.describe('Accessibility tests', () => { test('should not have accessibility violations', async ({ page }) => { await page.goto('/'); const accessibilityScanResults = await new AxeBuilder({ page }) .analyze(); expect(accessibilityScanResults.violations).toEqual([]); }); }); ``` ### 2. Test Keyboard Navigation ☐ Test Tab key moves focus correctly ☐ Test Shift+Tab for reverse navigation ☐ Test Enter/Space activate buttons ☐ Test Escape closes modals ☐ Verify focus indicators visible **Keyboard navigation tests:** ```typescript test('keyboard navigation through form', async ({ page }) => { await page.goto('/signup'); // Tab to first field await page.keyboard.press('Tab'); await expect(page.getByLabel(/email/i)).toBeFocused(); // Tab to next field await page.keyboard.press('Tab'); await expect