ARIA for modal dialogs

Hey ,

I'm thrilled to help you learn JavaScript. Unfortunately, you've landed on a page where you cannot access with your current purchase.

Please upgrade (use this link) access this content.

I'm super eager to help you learn more!

ARIA for modal dialogs

A dialog is a popup that prompts a user to respond to some information. There are two kinds of dialogs:

  1. Modal dialogs
  2. Non-modal dialogs

Modal means you cannot interact with things outside the dialog when the dialog is open.

If you have a Modal dialog, you need to prevent users from interacting with things outside of the dialog. You can do this with aria-modal.

Aria-modal

aria-modal tells a screen reader whether the element is a modal dialog. It can be true or false.

  • true: Element is a modal dialog
  • false: Element is not a modal dialog

If a modal with aria-modal="true" is shown, screen readers should only be able to interact with that modal.

Unfortunately, not all screen readers support aria-modal at the moment.

Support for aria-modal.

Emulating aria-modal

We can emulate aria-modal behavior by adding aria-hidden to other elements when the modal is opened.