Popups and Modal Windows

Popups

Popups are not a good user experience for keyboard-only users and screen reader users and as a rule of thumb should be avoided.

When an automatic popup appears it does not by default have keyboard focus which means that keyboard only and screen reader users are unable to use the TAB key on the keyboard to immediately access the content within the popup and close the popup. Screen reader and keyboard-only users can easily become distracted and disoriented.

When a popup unexpectedly appears it does not have keyboard focus which means that screen reader users are unable to use the TAB key on the keyboard to navigate to the content within the popup. They cannot visually see the popup on the screen, unless it's automatically programmed to completely shift the focus away from the main window. However, this would be very disorienting to screen reader users.

Unexpected and automatic popup windows should not appear without warning or notification.

Users should be provided with a mechanism, such as a link or button, to activate a new window.

Ensure that keyboard focus is visible and not obscured when a new window is opened, so users can easily identify where they are within the content. Sighted keyboard only users navigate web pages by using the TAB key on the keyboard through actionable items such as links, buttons and form controls. They rely on keyboard focus indicators (a border or outline) to let them know what item has keyboard focus. Keyboard focus indicators cannot be obscured by a popup window.

New windows should not automatically be launched, and change context, when a component receives focus.

If there is 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 modal window.
The keyboard user needs to have the ability to close the modal window.
Once the modal window has been closed the keyboard focus needs to be restored to the main webpage

Add ARIA Attributes to Help Screen Reader Users

Add the role="alertdialog" and aria-modal="true" attributes to the modal window container to let screen reader users know that they are viewing a modal dialog and that the content underneath the dialog is not interactive.

Add an “aria-labelledby” attribute to provide screen reader users with a dialog name.

Add a “aria-describedby” attribute that describes the main purpose of the alert dialog.

Example:

<div id="backdrop" class="no-scroll">
  <div
    role="alertdialog"
    aria-modal="true"
    aria-labelledby="dialog_label"
    aria-describedby="dialog_desc">
    <h2 id="dialog_label">Confirmation</h2>
    <div id="dialog_desc">
      <p>Are you sure you want to delete this file?</p>
    </div>
    <button type="button" onclick="closeDialog(this)">
      No. Close this popup.
    </button>
    <button type="button" onclick="deleteFile(this)">
      Yes. Delete the file.
    </button>
  </div>
</div>

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-modal