Modal dialog (conceptual)
This page is under construction
- While opened the name of the modal must be announced.
- When opened focus goes to the modal. Exact position depends on content. Consider different ways a modal is introduced, i.e.:
- By an action of the user such as clicking a button.
- By an action where the user did something like making a mistake.
- By the web application when a session time out might occur.
- A close button (when an action can be cancelled) and no close button when an action is really needed.
- Use an if the modal can be cancelled or closed.
- When using or + the focus stays in the modal.
- Also screen reader users should not "see" the content underneath the modal. (Use
- When the modal is closed the focus goes back to where the user was when the modal appeared. If the content isn't there anymore find the nearest or most logical place.
visibility: hiddento hide the modal
<body> <div class="all-content-container"> ... </div> <dialog> ... </dialog> </body>
Be aware of browser support of
dialog: Can I use Dialog?.