Accessible Modals and Pop-Ups
Modals — those overlay boxes that appear on top of a page for sign-ups, confirmations or alerts — are notorious for accessibility problems. Done badly, they trap keyboard users or leave screen-reader users unaware anything has appeared.
Done well, a modal is announced clearly, manages focus correctly, and is easy to dismiss. The difference is all in the detail.
Managing Focus
When a modal opens, focus should move into it; while it is open, focus should stay within it; and when it closes, focus should return to where it was.
- Move focus to the modal as it opens.
- Keep keyboard focus inside while it is open.
- Allow the Escape key to close it.
- Return focus to the triggering control afterwards.
Announcing the Modal
The modal needs the correct role and a clear title so screen readers announce its purpose the moment it appears, rather than leaving the user confused about what changed.
Use Them Sparingly
Even a perfectly built modal interrupts whatever someone was doing. We reserve them for moments that genuinely warrant the interruption — a critical confirmation, say — rather than firing them for marketing the instant a visitor arrives, which frustrates everyone.
If you need a hand with any of this, your Progressive Robot delivery team is ready to help. Raise a ticket from the Support area of your client portal or speak to your account manager and we will guide you through the next steps.