accessibility-testing

# Accessibility Testing ## axe-core Setup ### jest-axe (unit / component tests) ```typescript import { axe, toHaveNoViolations } from 'jest-axe' import { render } from '@testing-library/react' expect.extend(toHaveNoViolations) test('LoginForm has no a11y violations', async () => { const { container } = render(<LoginForm />) const results = await axe(container) expect(results).toHaveNoViolations() }) ``` ### playwright-axe (e2e) ```typescript import { test, expect } from '@playwright/test' import AxeBuilder from '@axe-core/playwright' test('homepage passes axe audit', async ({ page }) => { await page.goto('/') const results = await new AxeBuilder({ page }) .withTags(['wcag2a', 'wcag2aa', 'wcag21aa']) .analyze() expect(results.violations).toEqual([]) }) ``` ### cypress-axe ```javascript // cypress/support/e2e.js import 'cypress-axe' // in test cy.visit('/') cy.injectAxe() cy.checkA11y(null, { runOnly: { type: 'tag', values: ['wcag2aa'] }, }) ``` ## WCAG 2.2 AA Checklist — Top 20 Violations | # | Criterion | Check | |---|-----------|-------| | 1 | Images have alt text | `<img alt="description">` or `alt=""` for decorative | | 2 | Form inputs have labels | `<label for>` or `aria-label` or `aria-labelledby` | | 3 | Color contrast ≥ 4.5:1 | Normal text; 3:1 for large text (18pt or 14pt bold) | | 4 | Heading hierarchy | h1 → h2 → h3, no skipping levels | | 5 | Keyboard focusable | All interactive elements reachable via Tab | | 6 | Focus visible | `:foc...