modal-readability-outside
Description
If screen readers read elements outside the modal when a modal is open, users can get confused about performing the required action on the modal.
This rule ensures that screen readers can’t read any content outside the modal when a modal is open.
To comply with this rule, you can assign aria-hidden=true
to the elements outside the modal and aria-modal="true"
to the element containing the modal when the modal is open. When the modal is closed, remove aria-hidden=true
from the elements for screen readers to access them.
Example
Consider the following example in which a modal is opened without setting aria-hidden=true
to the elements outside the modal or setting aria-modal="true"
to the element containing the modal.
Without dynamically handling aria-hidden
or aria-modal
attributes, screen readers can read elements outside the modal even when the modal is open. This breaks the modal-readability-outside
rule.
In contrast, the following example dynamically sets aria-hidden=true
to the elements outside the modal and aria-modal="true"
to the element containing the modal when the modal is open. When the modal is closed, the aria-hidden
attribute is hidden.
Screen readers can’t read elements outside the modal in this scenario when the modal is open. Thus, this modified code does not violate the modal-readability-outside
rule.
How to fix?
Follow these steps to fix the modal-readability-outside
rule if it gets flagged:
- Identify any modals used on your webpage.
- Check if you have programmed
aria-hidden=true
to the elements outside the modal andaria-modal="true"
to the element containing the modal when the modal is open. - If not, modify the JavaScript code to dynamically assign
aria-hidden=true
to the elements outside the modal andaria-modal="true"
to the element containing the modal when the modal is open. - Modify the JavaScript code to dynamically remove
aria-hidden=true
from the elements when the modal is closed so that screen readers can access them.
Reference
We're sorry to hear that. Please share your feedback so we can do better
Contact our Support team for immediate help while we work on improving our docs.
We're continuously improving our docs. We'd love to know what you liked
We're sorry to hear that. Please share your feedback so we can do better
Contact our Support team for immediate help while we work on improving our docs.
We're continuously improving our docs. We'd love to know what you liked
Thank you for your valuable feedback!