/accessible-modal-dialog

An accessible modal dialog demo

Primary LanguageHTML

ACCESSIBLE MODAL DIALOG

An accessible modal dialog demo. This ensures that when the modal dialog box is opened, one cannot interact with other contents outside the modal dialog.

DEMOS

BEFORE

Alt_Text

When the modal dialog is open, one can tab through other contents outside the modal using the TAB key which is not the desired outcome.

AFTER

Alt_Text

Now, other contents outside the modal cannot be accessed when using the TAB key. When the modal dialog is opened, it stays in focus. To close the modal dialog, one can click on the close button, press on the esc key or click outside the modal.