Building Accessibility That Actually Works, Not Checkbox Compliance

Building Accessibility That Actually Works, Not Checkbox Compliance Most developer portfolios tick the accessibility checkbox with alt tags and call it done. I built mine with proper focus management, keyboard navigation, screen reader support, and motion preferences. Not because a linter told me to, but because accessibility is engineering quality. Here's what that actually looks like in code. Focus trapping in modals When a modal opens, the entire page behind it should become inert. Most implementations skip this: useEffect (() => { if ( ! isOpen ) return ; const previouslyFocused = document . activeElement as HTMLElement ; closeButtonRef . current ?. focus (); document . body . style . overflow = ' hidden ' ; const handleKeyDown = ( e : KeyboardEvent ) => { if ( e . key === ' Escape ' ) { onClose (); return ; } if ( e . key !== ' Tab ' ) return ; const focusable = modalRef . current ?. querySelectorAll ( ' button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"]) ' );