Page Comparison

...

• 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>

...