Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 4 Next »

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. 

Modal Windows

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

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

  • No labels