The purpose of this page is to show an example of accessible modal dialog that satisfies the requirements set by the W3C WCAG working group:

1. The role=dialog is an attribute of the container (such as a div) that is used as the custom dialog.
2. The container is inserted (or made visible) via JavaScript following a user interaction or some other event.
3. When the dialog is activated, the focus is set to an element in the container.
4. When the dialog is active, the focus is never set to an element that is not in the container.
5. When the dialog is deactivated, the focus is set to the control that originally activated the dialog.

On top of these five requirements, the modal dialog satisfies also the following:

• The modal dialog closes when the user clicks Escape.
• The modal dialog closes when the user clicks outside its visible part.

To report bugs post an issue on GitHub.

Click one of the buttons to open the modal dialog.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Volutpat sed cras ornare arcu dui vivamus arcu felis bibendum. Nibh ipsum consequat nisl vel pretium lectus. Odio tempor orci dapibus ultrices. Ornare lectus sit amet est placerat in egestas erat imperdiet. Tortor aliquam nulla facilisi cras fermentum odio eu feugiat. Elementum tempus egestas sed sed risus pretium quam vulputate. Iaculis eu non diam phasellus vestibulum lorem. Lobortis scelerisque fermentum dui faucibus in ornare quam viverra. Nisi est sit amet facilisis. Sed faucibus turpis in eu mi bibendum.

If you found this useful and would like to thank me, you can buy me a coffee.