Worked Example: Build the Modal Focus Loop

A modal settings panel appears over the page, but keyboard focus can still leave the panel and reach dimmed background links. A modal dialog must create a truthful temporary focus scope: named dialog, managed entry, contained tab order, inert background, and logical return. Setting aria-modal="true" without preventing background interaction creates a false promise. Some users are told the background is unavailable while the code still lets focus move there. Step 1 Give the container role="dialog", aria-modal="true", and aria-labelledby pointing at the visible dialog title. The role and name let assistive technology announce the active context. The modal property must match…

Sign up free — one personalized lesson every day, matched to your role and goals.

Already have an account? Sign in