Accessibility & WCAG 2.2 Compliance

1. Semantic HTML — use <button>, <nav>, <main>, <label> not <div onClick> 2. Keyboard navigation — every interactive element must be focusable and operable - Tab order follows visual order (no positive tabindex) - Enter/Space activates buttons, Escape closes dialogs 3. ARIA — only when semantic HTML is insufficient - aria-label for icon-only buttons - aria-expanded for collapsible sections - role="dialog" + aria-modal="true" for modals 4. Color contrast — minimum 4.5:1 for text, 3:1 for large text and UI components 5. Focus management — trap focus in modals, restore focus on close 6. Test — axe-core in CI, manual screen reader testing with NVDA/VoiceOver

// Accessible modal dialog function Modal({ open, onClose, title, children }: ModalProps) { const dialogRef = useRef<HTMLDivElement>(null); useEffect(() => { if (!open) return; // Trap focus + restore on close const previouslyFocused = document.activeElement as HTMLElement; dialogRef.current?.focus(); const handleKeyDown = (e: KeyboardEvent) => { if (e.key === "Escape") onClose(); // Focus trap logic here... }; document.addEventListener("keydown", handleKeyDown); return () => { document.removeEventListener("keydown", handleKeyDown); previouslyFocused?.focus(); // restore focus }; }, [open, onClose]); if (!open) return null; return ( <div role="dialog" aria-modal="true" aria-labelledby="modal-title" ref={dialogRef} tabIndex={-1} className="fixed inset-0 z-50"> <h2 id="modal-title">{title}</h2> {children} <button onClick={onClose} aria-label="Close dialog">X</button> </div> ); }