Accessible Modal Dialogs from Scratch
This document demonstrates a working modal dialog developed with no external dependencies. It includes the minimal amount of HTML, JavaScript and CSS to power the modal, and nothing else.
You can spawn the modal by clicking the following link, which simulates a prompt to close the current document (regardless of how you respond to the modal, the document will not closed).
Features Include...
- Upon opening the modal, focus should move to the "cancel" button - the safest button for a user to accidentially click.
- Upon closing the modal, focus should return to the "Close Window" link above.
- While the modal is open, focus is trapped and cannot return to the main document. The main content is also hidden with
aria-hidden="true", while the document itself hasaria-hidden="false"andaria-modal="true"applied to it. - The modal is decorated with
role="alertdialog"which triggers a system-level alert - The modal is described by a hidden element containing a more detailed explanation than the text that appears for sighted users. When the modal appears, the screenreader should announce:
"You are in a modal window prompting you to abandon your unsaved changes. You may click "ok" to abandon your chagnes or "cancel" to return tot he parent document."
- The modal can be dismissed with the Escape key, or by clicking the backdrop
Source Code
The source is availble in Github: https://github.com/meagar/accessibility/tree/master/modal/js