Modal dialog (conceptual)

Last update: 05-12-2024

Use this resource for your popups is mdn wb docs: <dialog>: The Dialog element.

The rest of this page might be considered outdated, and will be rewritten in the future.
Note that some menus that cover the whole page or use something like grey filter to disable all other content can also be considered modals.

Conceptual

  • While opened the name of the modal must be announced to screenreaders, and if necessary some more information when an urgency of the message is high.
    • <dialog role="dialog" aria-labelledby="dialogTitle">
    • optional: aria-describedby="dialogDescription"
    • <h1 id="dialogTitle">
    • optional: <p id="dialogDescription">Some text...
  • Be aware of browser support of dialog: Can I use Dialog?.
  • When opened focus must go to the modal. Exact position where to put it depends on content. Consider different ways a modal is introduced, i.e.:
    • By an action of the user such as clicking a button.
      • The button is disabled or gone because of the modal.
      • The button stays active to close the modal for instance an menu 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 or answer is really needed.
  • Don't forget to give the close button the name "close" (or "sluiten" when the website is in Dutch).
  • Use an Esc if the modal can be cancelled or closed.
  • When using Tab or Shift+Tab the focus stays in the modal.
    • When the end of the modal is reached, focus goes to the first focusable element in the modal, and the other way around.
    • Also check after using Ctrl+L what happens if you tab into the website.
  • Do not use tabindex to control the tab order. Also do not use tabindex=0 on the dialog heading or whole dialog.
  • 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>

Resources

Looking for examples, if you know a good one, please send me the link.