Modal Dialog Intelligent Guided Test
The Modal Dialog IGT helps you determine if your modal dialog is accessible. Screen reader users and users who cannot use a mouse should be able to interact with the modal dialog and not confusingly access content behind the modal.
Due to lack of support and known issues in certain assistive technologies, the Modal Dialog IGT does not currently give a "pass" to usage of the aria-modal="true" attribute. Instead, it is recommended to prevent screen readers from browsing outside the modal using aria-hidden="true". View more information on screen readers being able to browse content outside of dialogs here.
How it works
The first thing you will have to do is put the page in the state you want to test. After that a few simple questions will guide you through completion of accessibility tests that determine whether your Modal Dialog has accessibility issues or not. The Modal Dialog IGT will take away all the tedium of having to know the ins and outs of issues with modal dialogs can arise when serving users who have disabilities.
Step 1: Select Modal
Does the modal you would like to test have a button that launches it?
Commonly, a modal is launched by a user's "click" interaction with a control like a button. If this is the case, select "Yes, my modal has a launcher". After that, you will be asked to select the modal's launcher.
If the modal you are testing gets launched automatically (like a session timeout modal) or triggered by something other than a user's click action, select "No, my modal is triggered by something else.". After that, you will be asked to trigger the modal and select it.
If the IGT is unable to automatically detect the modal element, you will be asked to select it.
Step 2: Modal Checks
This step is completely automated so there is nothing you have to do! During this automated step, the IGT determines the following:
- if the correct
roleis used - if focus is trapped within the dialog
- if content outside of the modal is hidden to screen readers (via
aria-hidden)
After this automated step, the IGT will ask you:
Can this modal be dismissed or closed?
If this modal can be dismissed, the IGT will attempt to close it automatically using the ESC key. If ESC did not dismiss the modal, you will be asked to dismiss it manually.
Once the modal is dismissed, you will be asked to validate that the focus returned to the launcher or some other logical element.
What it tests for
- focus is brought to the modal when launched
- correct usage of acceptable modal
role - focus is trapped within the dialog
- content outside of the dialog is hidden to screen readers
- keyboard dismissal of modal
- focus returns to the logical element (usually launcher)