First of all, Let us understand What is a modal. Modal is something that interrupts your current work flow on your main page and usually, user navigation is limited within the modal element itself. In other words, users cannot access the background content when modal is displayed. Even though visually the background content is inert/grade out, it is high chance that screen reader users can access the background content, which is a problem.
To address this problem, what we have been doing is that we use aria-hidden=”true” attribute to hide the background content from the screen reader users. When modal is closed, we flip the aria-hidden value from true to false, so that screen reader users can access the content when they are returned to the actual web page. These are the techniques that we have been following to hide/unhide the background content from the screen reader users.
Aria 1.1 introduced the aria-modal attribute to hide the background content directly instead of using aria-hidden attribute. Authors should use aria-modal attribute in conjunction with dialog/alertdialog role. When aria-modal is set to true in the dialog/alertdialog container then the expectation is that:
- Assistive technologies do not expose the background content
- User navigation is limited to the modal elements itself
- Assistive technology should place the focus on the modal element when it is displayed unless the focus has explicitly been placed else where
all these things are being taken care automatically when aria-modal=”true” is used. Imagine’, how cool it is. Hence, we don’t need to use aria-hidden attribute any more.
- Author should use aria-modal attribute in conjunction with dialog/alertdialog role.
- When a modal element is displayed, authors MUST ensure the interface can be controlled using only descendants of the modal element. In other words, if a modal dialog has a close button, the button should be a descendant of the dialog.
Sample code snippet
<h1 id=”Test2″>Modal Dialog Box Test</h1>
<div role=”dialog” aria-modal=”true” id=”test”>
<input type=”button” value=”ok”/>
then the element with role=”dialog” and id=”test” exposes aria-modal=”true”