Popups and Modal Windows

Popups

Popups are not a good user experience for keyboard-only/screen reader users and as a rule of thumb we should steer away from using them.

When a popup appears it does not have keyboard focus which means that keyboard only/screen reader users are unable to tab to the content within the popup. Screen reader and keyboard-only users can easily become distracted and disoriented. 

If there is absolutely no other solution than a popup use a modal window. It must be programmed in a way that allows for the following.

  • The modal dialog needs to trap the keyboard. When a modal dialog/popup box is triggered, the keyboard focus needs to immediately move to the first actionable element in the popup/modal.

  • The keyboard user needs to be able to access all controls in the popup/modal window.

  • The keyboard user needs to have the ability to close the popup/modal window.

  • Once the popup has been closed the keyboard focus needs to be restored to the main webpage