...
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:
| Code Block |
|---|
<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