Accessibility Patterns

Accessibility Patterns

WCAG 2.2 AA Requirements

Perceivable

Operable

Understandable

ARIA Patterns

htmlCopy code
<!-- Dialog -->
<div role="dialog" aria-modal="true" aria-labelledby="title">
  <h2 id="title">Confirm</h2>
  <button aria-label="Close dialog">×</button>
</div>

<!-- Tabs -->
<div role="tablist">
  <button role="tab" aria-selected="true" aria-controls="panel1">Tab 1</button>
  <button role="tab" aria-selected="false" aria-controls="panel2">Tab 2</button>
</div>
<div role="tabpanel" id="panel1">Content 1</div>

<!-- Live region (dynamic updates) -->
<div aria-live="polite" aria-atomic="true">
  3 new messages
</div>

Keyboard Navigation

typescriptCopy code
// Focus trap (modal/dialog)
function useFocusTrap(ref: RefObject<HTMLElement>) {
  useEffect(() => {
    const focusable = ref.current?.querySelectorAll(
      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
    )
    const first = focusable?.[0] as HTMLElement
    const last = focusable?.[focusable.length - 1] as HTMLElement

    function handleKeyDown(e: KeyboardEvent) {
      if (e.key !== 'Tab') return
      if (e.shiftKey && document.activeElement === first) {
        e.preventDefault(); last.focus()
      } else if (!e.shiftKey && document.activeElement === last) {
        e.preventDefault(); first.focus()
      }
    }
    ref.current?.addEventListener('keydown', handleKeyDown)
    first?.focus()
    return () => ref.current?.removeEventListener('keydown', handleKeyDown)
  }, [ref])
}

Skip Links

htmlCopy code
<a href="#main-content" class="skip-link">Skip to main content</a>
<!-- ... navigation ... -->
<main id="main-content">...</main>

<style>
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  z-index: 100;
}
.skip-link:focus { top: 0; }
</style>

Motion Preferences

cssCopy code
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

Testing

bashCopy code
# axe-core (automated)
npx @axe-core/cli https://localhost:3000

# Lighthouse accessibility audit
lighthouse --only-categories=accessibility https://localhost:3000

Checklist

• Semantic HTML (headings, landmarks, lists)
• Alt text on all images
• Color contrast 4.5:1 (text), 3:1 (UI)
• Keyboard navigable (tab order logical)
• Focus visible indicator
• Skip link to main content
• Form labels and error messages
• ARIA roles where needed
• prefers-reduced-motion respected
• axe-core test pass

Anti-Patterns

• <div onclick> instead of <button>
• Color-only information (add icon/text)
• Auto-playing video/audio
• Removing focus outline without replacement
• Using ARIA when native HTML suffices