Screen readers can read parent page content outside the modal
- Rule ID:
- reading-order-browse-outside-modal
- User Impact:
- Serious
- WCAG :
- 1.3.2.a
Rule
The reading and navigation order MUST be logical and intuitive.
Background
Modal dialogs overlay page content and prevent users from interacting with the content behind the modal dialog until it is dismissed. If screen reader users can read content behind a modal dialog window, they may become disoriented or confused. Both keyboard focus and screen reader focus must be trapped within a modal dialog until it is dismissed. When both keyboard focus and browsing are trapped within a modal dialog, screen reader users are able to interact with it as intended.
How To Fix
To fix this issue:
Important note: If you do not place the modal dialog container as a direct child element of the <body> element in the DOM, handling the aria-hidden attribute becomes MUCH more difficult. You will be responsible for correctly adding the aria-hidden="true" attribute to many more elements.
Fix this issue by adding the aria-hidden="true" attribute to the modal dialog container’s sibling elements within the <body> element. (You do not need to add aria-hidden="true" to <script> and <style> or the page overlay <div> elements as screen readers do not read content in those tags.) This will prevent screen reader users from browsing outside the modal dialog. When the modal dialog is dismissed it is extremely important that the aria-hidden="true" attribute is removed to expose the page content to screen reader users again.