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:
- Modal dialogs
- 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.
Emulating aria-modal
We can emulate aria-modal
behavior by adding aria-hidden
to other elements when the modal is opened.