aria-modal (property)

aria-modal is a new property introduced in ARIA 1.1. It indicates if an element is a modal when displayed.

Modal window  or simply modal is used only in specific situations where the entire work flow is blocked until the content in the overlay window gets attention. These are typically used to grab complete user attention and do not allow the user to interact with the parent page until an action is taken or the window is closed.

Before the aria-modal property is introduced in WAI ARIA 1.1, content authors depend on aria-hidden property to hide content for screen reader users on modal windows too. This means use of aria-modal property restricts the screen reader user interaction is limited to the modal window until it is closed or dismissed. To ensure that all the elements of the modal are exposed to screen readers the aria-modal property has to be set to the outer most container of the modal. In other words all the user interface components of the modal need to be the descendants of the container where aria-modal is set.

Aria-modal used in roles

It is used in the elements that acts as window and inherits into


Values of aria-modal

Aria-modal has two possible values true and false.

Value Description
Aria-modal=”false” The window is not a modal.
Aria-modal=”true” Window is a modal

Related links

Comments are closed.