Web Accessibility (WCAG 2.1)

Build accessible web applications that work for everyone.

ARIA Patterns

Button

tsx
1<button
2  type="button"
3  aria-pressed={isPressed}
4  aria-disabled={isDisabled}
5  onClick={handleClick}
6>
7  Toggle Feature
8</button>

Modal Dialog

tsx
1<div
2  role="dialog"
3  aria-modal="true"
4  aria-labelledby="modal-title"
5  aria-describedby="modal-description"
6>
7  <h2 id="modal-title">Confirm Action</h2>
8  <p id="modal-description">Are you sure you want to proceed?</p>
9  <button onClick={onConfirm}>Confirm</button>
10  <button onClick={onCancel}>Cancel</button>
11</div>

Navigation Menu

tsx
1<nav aria-label="Main navigation">
2  <ul role="menubar">
3    <li role="none">
4      <a role="menuitem" href="/home">Home</a>
5    </li>
6    <li role="none">
7      <button
8        role="menuitem"
9        aria-haspopup="true"
10        aria-expanded={isOpen}
11      >
12        Products
13      </button>
14      {isOpen && (
15        <ul role="menu" aria-label="Products submenu">
16          <li role="none">
17            <a role="menuitem" href="/products/new">New</a>
18          </li>
19        </ul>
20      )}
21    </li>
22  </ul>
23</nav>

Keyboard Navigation

Focus Management

tsx
1import { useEffect, useRef } from 'react';
2
3function Modal({ isOpen, onClose, children }) {
4  const modalRef = useRef<HTMLDivElement>(null);
5  const previousFocus = useRef<HTMLElement | null>(null);
6
7  useEffect(() => {
8    if (isOpen) {
9      previousFocus.current = document.activeElement as HTMLElement;
10      modalRef.current?.focus();
11    } else {
12      previousFocus.current?.focus();
13    }
14  }, [isOpen]);
15
16  // Trap focus within modal
17  const handleKeyDown = (e: React.KeyboardEvent) => {
18    if (e.key === 'Escape') {
19      onClose();
20    }
21    
22    if (e.key === 'Tab') {
23      const focusable = modalRef.current?.querySelectorAll(
24        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
25      );
26      
27      if (focusable && focusable.length > 0) {
28        const first = focusable[0] as HTMLElement;
29        const last = focusable[focusable.length - 1] as HTMLElement;
30        
31        if (e.shiftKey && document.activeElement === first) {
32          e.preventDefault();
33          last.focus();
34        } else if (!e.shiftKey && document.activeElement === last) {
35          e.preventDefault();
36          first.focus();
37        }
38      }
39    }
40  };
41
42  if (!isOpen) return null;
43
44  return (
45    <div
46      ref={modalRef}
47      role="dialog"
48      aria-modal="true"
49      tabIndex={-1}
50      onKeyDown={handleKeyDown}
51    >
52      {children}
53    </div>
54  );
55}

Color Contrast

Minimum contrast ratios (WCAG AA):

• Normal text: 4.5:1
• Large text (18pt+): 3:1
• UI components: 3:1

typescript
1function getContrastRatio(color1: string, color2: string): number {
2  const lum1 = getLuminance(color1);
3  const lum2 = getLuminance(color2);
4  const lighter = Math.max(lum1, lum2);
5  const darker = Math.min(lum1, lum2);
6  return (lighter + 0.05) / (darker + 0.05);
7}
8
9function getLuminance(hex: string): number {
10  const rgb = hexToRgb(hex);
11  const [r, g, b] = rgb.map((c) => {
12    c = c / 255;
13    return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
14  });
15  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
16}

Accessible Forms

tsx
1<form onSubmit={handleSubmit}>
2  <div>
3    <label htmlFor="email">
4      Email address
5      <span aria-hidden="true">*</span>
6      <span className="sr-only">(required)</span>
7    </label>
8    <input
9      id="email"
10      type="email"
11      aria-required="true"
12      aria-invalid={errors.email ? 'true' : 'false'}
13      aria-describedby={errors.email ? 'email-error' : undefined}
14    />
15    {errors.email && (
16      <p id="email-error" role="alert" className="error">
17        {errors.email}
18      </p>
19    )}
20  </div>
21  
22  <button type="submit">Submit</button>
23</form>

Screen Reader Only Content

css
1.sr-only {
2  position: absolute;
3  width: 1px;
4  height: 1px;
5  padding: 0;
6  margin: -1px;
7  overflow: hidden;
8  clip: rect(0, 0, 0, 0);
9  white-space: nowrap;
10  border: 0;
11}

Testing

bash
1# Automated testing
2npm install -D axe-core @axe-core/react
3
4# In tests
5import { axe, toHaveNoViolations } from 'jest-axe';
6expect.extend(toHaveNoViolations);
7
8test('component is accessible', async () => {
9  const { container } = render(<MyComponent />);
10  const results = await axe(container);
11  expect(results).toHaveNoViolations();
12});

Resources

• WCAG 2.1 Guidelines: https://www.w3.org/WAI/WCAG21/quickref/
• ARIA Authoring Practices: https://www.w3.org/WAI/ARIA/apg/