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.
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.
The Modal Dialog IGT can be turned into an automated workflow with the new Auto Replay feature.
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-modal=trueon the dialog itself oraria-hidden=trueoutside of the dialog)
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.
Running in Automated Mode
When automated IGT mode is enabled, the Modal Dialog IGT keeps the same setup steps you use in the standard test, then hands off to AI to evaluate dismissal and focus restoration automatically.
Step 1: Identify and launch the modal
Just like the standard test, you'll first tell the IGT how your modal is launched:
- If the modal has a launcher, select Yes, my modal has a launcher and choose the launching control.
- If the modal is triggered some other way (such as a session-timeout dialog), select No, my modal is triggered by something else and trigger the modal yourself so the IGT can capture it.
If the modal can't be detected automatically, you'll be asked to select it.
Step 2: AI analyzes your modal
Once the modal is captured, AI takes over the parts of the test that normally require manual interaction:
- Dismissal: AI determines whether the modal should be dismissible, then automatically attempts to close it — first with the ESC key, and then using dismiss controls it identifies (such as a close button or the backdrop).
- Focus restoration: After the modal is dismissed, AI checks whether focus returned to a logical element, such as the launcher.
The remaining modal checks — correct dialog role, focus trapped within the dialog, and content outside the modal hidden from screen readers — continue to run automatically as part of the test.
When analysis is complete, you'll review AI's findings, make any corrections, and finalize your test. See Automated IGTs for details on reviewing results, making corrections, and completing your test.
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)
