Accessibility ≠ Overlay: when a modal dialog blocks keyboard navigation
A pop-up dialog can help someone confirm a purchase, sign in or read important information. But poor focus and keyboard handling can stop them completing the task.
A barrier that appears without warning
You activate Continue and a dialog opens. Visually the page changes, but the screen reader keeps reading content behind it, or the keyboard cannot reach Close. A component intended to help has interrupted the journey.
What makes a dialog modal
A modal dialog temporarily contains interaction within a particular task. While it is open, background content should not receive focus. Not every pop-up needs to be modal: the behaviour should match the purpose.
Focus should follow the interaction
When the dialog opens, focus should move to a suitable element inside it. Tab and Shift+Tab should cycle through its controls without moving into the background. On closing, focus usually returns to the trigger, unless the workflow calls for another logical destination.
Clear names and understandable controls
Give the dialog an accessible name, usually through its heading, and an appropriate description where useful. Buttons should clearly say Save changes, Cancel or Close. An X icon alone may have no accessible name.
A way to close and move on
Escape normally closes a modal dialog. Destructive actions and mandatory confirmations need careful handling, but people should always understand their available choices and how to proceed.
Common failures
Focus disappears behind the overlay, background controls remain active, status messages are not announced, dialogs close unexpectedly or buttons become unreachable when text is enlarged.
Test the full interaction
Open the dialog using only a keyboard. Check initial focus, Tab and Shift+Tab, Escape where appropriate and focus restoration. Repeat with screen readers such as NVDA, JAWS, VoiceOver and TalkBack on relevant devices.
How Blind Reader can help
Blind Reader supports orientation, goal-based navigation and interaction alongside existing screen readers. Its targeted fixes can improve some interactions. Reliable modal focus management should still be built into the dialog itself.
A dialog should help people continue
An accessible modal lets people understand what happened, make a choice and return to their task without getting lost.
Sources and references
Episode 20 · Accessibility ≠ Overlay