Modal Windows for Everyone
summary
Uses the native dialog + role="dialog" with aria-modal="true" and a labeled heading or aria-label, buttons with aria-controls and a visible close button, plus a scrim button behind the modal to catch outside clicks. JavaScript toggles open and sets aria-hidden + inert (polyfill where needed), focuses the title/tabindex=0, traps Tab and Shift+Tab, closes on Escape, and restores focus to the opener via the aria-controls selector. CSS hides with [aria-hidden] and visibility:hidden, animates with opacity/transform, respects prefers-reduced-motion, and keeps scrolling inside a modal container; progressive enhancement uses a separate page fallback.
AI-written summary · about
