Modals - When a modal is considered accessible
Series of questions and anwers in an email conversation between an accessibility adviser (AA) and an accessibility tester (AT).
Question 1 - Modals opening in a new window
AT: When there is a modal/pop up, is it accessible if it doesn't open in a new browser window?
Answer 1
AA: By default, a modal or popup dialog is part of the same page from which it pops up, so it is always going to load in the same browser window.
If it is loading in a new window, then two things are happening: a new page is loading in a new window, and then a dialog is opening within that new page. I'm not sure I understand that scenario.
Question 2 - Modals and screen reader mode
AT: When there is a modal/pop up, is it accessible if screen reader tells you that you are changing into a modal?
Answer 2
AA: There should be some indication from the screen reader that focus has moved to a new block of content, and ideally it will be identified as a dialog. It may not be clear that it is visually a pop up dialog, but by adding role="dialog" or role="alertdialog" to the dialog container, and using some additional aria attributes, you can make it so a screen reader will note that it has moved into a dialog and what the dialog's name and contents are.
A very good example of an accessible modal dialog: http://accessibility.oit.ncsu.edu/training/aria/modal-window/version-3/
Read the first blog post associated with that demo:
http://accessibility.oit.ncsu.edu/blog/2013/09/13/the-incredible-accessible-modal-dialog/
Help on the different use cases for dialog vs. alertdialog, see
Question 3 - Modals constraining keyboard focus
AT: When there is a modal/pop up, is it accessible if the keyboard isn't constrained to the modal?
Answer 3
AA: A modal dialog is a pop up dialog where keyboard focus is constrained to the dialog. In other words, you can't access or interact with the page behind the dialog until the dialog is dismissed. Keyboard access via the Tab key should only scroll through focussable elements in the dialog — you shouldn't be able to Tab to any elements in the page underneath the dialog.
The dialog needs at least one focussable element, which is usually going to be a close button, or an okay button, or similar, to dismiss the dialog.
In addition screen readers should not be able to browse or read any of the content in the page underneath the dialog. The best way to accomplish that is to include the dialog's container as a sibling to the rest of the page's content, and set aria-hidden="true" on the container(s) of the page content that doesn't include the dialog while the dialog is active. For example, <body> <div id="page_content" aria-hidden="true"> ...main page content... </div> <div role="dialog" aria-labelledby="dialog-heading" aria-describedby="dialog-content"> <h2 id="dialog-heading">My dialog</h2> <p id="dialog-content">You must read this dialog's content</p> <button>OK</button> </div> </body>
Question 4 - Closing modals
AT: When there is a modal/pop up, is it accessible if you can open and close easily?
Answer 4
AA: You must be able to open and close or dismiss the dialog, then yes. In addition to whatever close or other button there is to dismiss the dialog, it is convention that the ESC key should also close the dialog.
Question 5 - Screen reader access to modal content
AT: When there is a modal/pop up, is it accessible if text is clearly readable by screenreader? In other words, is it inaccessible even if it opens in the same browser window?
Answer 5
AA: Even if the text in the dialog isn't immediately announced by a screen reader when the dialog loads, the user should still be able to navigate and read the text in the dialog using the arrow keys or other reading commands of the screen reader.
By definition, a dialog always opens up in the same browser window.
Last updated