Modal dialog (conceptual)

This page is under construction

Conceptual

  • 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 Esc if the modal can be cancelled or closed.
  • When using Tab or Shift+Tab the focus stays in the modal.
  • Also screen reader users should not "see" the content underneath the modal. (Use aria-hidden)
  • 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.
  • Use visibility: hidden to hide the modal

Code concept


<body>
  <div class="all-content-container">
  ...
  </div>
  <dialog>
  ...
  </dialog>
</body>

Be aware of browser support of dialog: Can I use Dialog?.