WCAG 2.1 AA Overview and Accessibility Testing Strategy

1// Checklist-driven approach:
2const WCAG_AA_TESTS = [
3  { criterion: '1.1.1', test: 'All img elements have non-empty alt attributes' },
4  { criterion: '1.4.3', test: 'Text/background contrast ratio >= 4.5:1' },
5  { criterion: '2.1.1', test: 'All interactive elements reachable by Tab key' },
6  { criterion: '2.4.7', test: 'Focus indicator visible on all focusable elements' },
7  { criterion: '4.1.2', test: 'Form inputs have associated label elements' },
8] as const;

1# Automated tools in the testing stack:
2# Unit: jest-axe (component-level axe-core)
3# Integration: axe-playwright (page-level, real browser)
4# CI: pa11y-ci (batch scan of all pages)
5# Manual: NVDA + Firefox, VoiceOver + Safari
6
7# Priority order:
8# 1. Automated: catches structural issues instantly
9# 2. Keyboard: navigate entire flow without mouse
10# 3. Screen reader: listen to how content is announced
11# 4. Zoom: test at 200% zoom, 400% for WCAG 1.4.10

1// Playwright keyboard navigation test
2import { test, expect } from '@playwright/test';
3
4test('login form is fully keyboard accessible', async ({ page }) => {
5  await page.goto('/login');
6
7  // Tab to email field
8  await page.keyboard.press('Tab');
9  const emailFocused = await page.evaluate(() =>
10    document.activeElement?.getAttribute('name') === 'email'
11  );
12  expect(emailFocused).toBe(true);
13
14  // Fill email
15  await page.keyboard.type('[email protected]');
16
17  // Tab to password
18  await page.keyboard.press('Tab');
19  await page.keyboard.type('Password123!');
20
21  // Tab to submit button
22  await page.keyboard.press('Tab');
23  const submitFocused = await page.evaluate(() =>
24    document.activeElement?.getAttribute('type') === 'submit'
25  );
26  expect(submitFocused).toBe(true);
27
28  // Submit with Enter
29  await page.keyboard.press('Enter');
30  await expect(page).toHaveURL(/dashboard/);
31});
32
33test('modal traps focus correctly', async ({ page }) => {
34  await page.goto('/');
35  await page.click('[data-testid="open-modal"]');
36  await expect(page.locator('[role="dialog"]')).toBeVisible();
37
38  // Tab through all focusable elements in modal
39  const initialFocus = await page.evaluate(() => document.activeElement?.tagName);
40
41  // Shift+Tab from first element should wrap to last
42  await page.keyboard.press('Shift+Tab');
43  const lastFocus = await page.evaluate(() => document.activeElement?.tagName);
44
45  // Focus should stay within modal
46  const isInModal = await page.evaluate(() => {
47    const modal = document.querySelector('[role="dialog"]');
48    return modal?.contains(document.activeElement);
49  });
50  expect(isInModal).toBe(true);
51
52  // Escape closes modal
53  await page.keyboard.press('Escape');
54  await expect(page.locator('[role="dialog"]')).not.toBeVisible();
55});

1// Playwright contrast check using browser APIs
2test('primary text meets 4.5:1 contrast ratio', async ({ page }) => {
3  await page.goto('/');
4
5  const contrastRatios = await page.evaluate(() => {
6    function getLuminance(r: number, g: number, b: number): number {
7      const a = [r, g, b].map(v => {
8        const sRGB = v / 255;
9        return sRGB <= 0.03928 ? sRGB / 12.92 : Math.pow((sRGB + 0.055) / 1.055, 2.4);
10      });
11      return 0.2126 * a[0] + 0.7152 * a[1] + 0.0722 * a[2];
12    }
13
14    function getContrastRatio(color1: number[], color2: number[]): number {
15      const l1 = getLuminance(color1[0], color1[1], color1[2]);
16      const l2 = getLuminance(color2[0], color2[1], color2[2]);
17      const lighter = Math.max(l1, l2);
18      const darker = Math.min(l1, l2);
19      return (lighter + 0.05) / (darker + 0.05);
20    }
21
22    const paragraphs = Array.from(document.querySelectorAll('p, span, a, button'));
23    return paragraphs.slice(0, 10).map(el => {
24      const style = window.getComputedStyle(el);
25      const color = style.color.match(/\d+/g)?.map(Number) || [0, 0, 0];
26      const bg = style.backgroundColor.match(/\d+/g)?.map(Number) || [255, 255, 255];
27      return {
28        text: el.textContent?.substring(0, 20),
29        ratio: getContrastRatio(color, bg),
30      };
31    });
32  });
33
34  contrastRatios.forEach(({ text, ratio }) => {
35    expect(ratio).toBeGreaterThanOrEqual(4.5);
36  });
37});

1import { render, screen } from '@testing-library/react';
2import { axe, toHaveNoViolations } from 'jest-axe';
3import userEvent from '@testing-library/user-event';
4
5expect.extend(toHaveNoViolations);
6
7describe('Navigation component accessibility', () => {
8  it('has no axe violations', async () => {
9    const { container } = render(<Navigation />);
10    const results = await axe(container);
11    expect(results).toHaveNoViolations();
12  });
13
14  it('nav landmark has accessible name', () => {
15    render(<Navigation />);
16    expect(screen.getByRole('navigation', { name: /main navigation/i })).toBeInTheDocument();
17  });
18
19  it('current page link has aria-current', () => {
20    render(<Navigation currentPath="/courses" />);
21    const coursesLink = screen.getByRole('link', { name: /courses/i });
22    expect(coursesLink).toHaveAttribute('aria-current', 'page');
23  });
24
25  it('mobile menu button has aria-expanded', async () => {
26    render(<Navigation />);
27    const menuButton = screen.getByRole('button', { name: /open menu/i });
28    expect(menuButton).toHaveAttribute('aria-expanded', 'false');
29    await userEvent.click(menuButton);
30    expect(menuButton).toHaveAttribute('aria-expanded', 'true');
31  });
32});