Important: This website does not attempt to establish a standard for how assistive technologies must behave. Read the FAQ for more information. Additionally, this is a work in progress. Please submit feedback or suggestions.

Test: APG modal dialog example

Screen Reader support level: partial (32/44)

Voice Control support level: unknown

On this page

About this test

This example implements a modal dialog.

Submit new test results

Age of results

Results in this test range from 2 years ago to 2 years ago. See detailed information about test dates and versions for more information.

Caution

Failing or partial results may be out of date. The oldest result is from 2 years ago. Consider running this test and contributing results.

Test HTML

view the external test

Summary of Screen Reader support by expectation

* means that some support is hidden behind settings

Summary of Voice Control support by expectation

aria-modal attribute
ExpectationDragon Naturally SpeakingVoice Access (Android)Voice Control (iOS)Voice Control (MacOS)Windows Speech RecognitionWindows Voice Access
ChromeChromeSafariSafariEdgeChromeEdgeChrome
Not applicable
dialog role
ExpectationDragon Naturally SpeakingVoice Access (Android)Voice Control (iOS)Voice Control (MacOS)Windows Speech RecognitionWindows Voice Access
ChromeChromeSafariSafariEdgeChromeEdgeChrome
Not applicable

* means that some support is hidden behind settings

Summary of Keyboard support by expectation

aria-modal attribute
ExpectationWindows KeyboardMac KeyboardiOS KeyboardAndroid Keyboard
ChromeFirefoxEdgeChromeSafariSafariChrome
Not applicable
dialog role
ExpectationWindows KeyboardMac KeyboardiOS KeyboardAndroid Keyboard
ChromeFirefoxEdgeChromeSafariSafariChrome
Not applicable

* means that some support is hidden behind settings

Detailed support results by expectation

Expectation for the aria-modal attribute: convey the presence of aria-modal=true - applied to the dialog role

This expectation is applied to the dialog role. Expectations and results might differ when the the feature is applied to different roles.

This expectation is from the aria-modal attribute feature.

Rationale:

Users need to be aware that other content is obscured by the modal.

Strength of this expectation for different types of assistive technologies:

  • Screen Readers: MUST
  • Voice Control: NA

Examples:

  • Screen readers might convey the modal state when entering the modal
  • Screen readers might imply the modal state by restricting reading and navigation to the modal content

Grading method:

Just one of the listed commands must pass for the expectation to pass.

ATBrowserHas SupportOutput
Dragon Naturally SpeakingChromenot applicable-
JAWSChromeyes
  • Result: (pass)
    • Test Case: open the dialog using Activate Button (Enter or Space)
      1. Launch JAWS and Chrome.
      2. Navigate to the test page.
      3. set mode to auto (do not explicitly change the mode)
      4. issue command
        • summary: navigate forward to the button to open the dialog
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" aria-modal="true"]`
          • keyboard focus location: button
          • virtual cursor location: button
      5. issue command
        • Using the command: "Enter or Space" (Activate Button)
        • Observe: dialog will open and focus will be moved to the target
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" aria-modal="true"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      6. is the expectation met?
    • Output: "add delivery address, dialog, (dialog content), street: edit, type in text"
    • Result Notes: conveyed implicitly by not being able to access content behind the modal.
JAWSEdgeyes
  • Result: (pass)
    • Test Case: open the dialog using Activate Button (Enter or Space)
      1. Launch JAWS and Edge.
      2. Navigate to the test page.
      3. set mode to auto (do not explicitly change the mode)
      4. issue command
        • summary: navigate forward to the button to open the dialog
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" aria-modal="true"]`
          • keyboard focus location: button
          • virtual cursor location: button
      5. issue command
        • Using the command: "Enter or Space" (Activate Button)
        • Observe: dialog will open and focus will be moved to the target
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" aria-modal="true"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      6. is the expectation met?
    • Output: "add delivery address, dialog, (dialog content), street: edit, type in text"
    • Result Notes: conveyed implicitly by not being able to access content behind the modal.
JAWSFirefoxyes
  • Result: (pass)
    • Test Case: open the dialog using Activate Button (Enter or Space)
      1. Launch JAWS and Firefox.
      2. Navigate to the test page.
      3. set mode to auto (do not explicitly change the mode)
      4. issue command
        • summary: navigate forward to the button to open the dialog
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" aria-modal="true"]`
          • keyboard focus location: button
          • virtual cursor location: button
      5. issue command
        • Using the command: "Enter or Space" (Activate Button)
        • Observe: dialog will open and focus will be moved to the target
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" aria-modal="true"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      6. is the expectation met?
    • Output: "add delivery address, dialog (modal content) street: edit, type in text"
    • Result Notes: conveyed implicitly by not being able to access content behind the modal.
NarratorEdgenone
  • Result: (fail)
    • Test Case: open the dialog using Activate Item (primary action) (Enter or Space Bar)
      1. Launch Narrator and Edge.
      2. Navigate to the test page.
      3. set mode to auto (do not explicitly change the mode)
      4. issue command
        • summary: navigate forward to the button to open the dialog
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" aria-modal="true"]`
          • keyboard focus location: button
          • virtual cursor location: button
      5. issue command
        • Using the command: "Enter or Space Bar" (Activate Item (primary action))
        • Observe: dialog will open and focus will be moved to the target
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" aria-modal="true"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      6. is the expectation met?
    • Output: "Add delivery address, dialog, street, edit, Scan off"
    • Result Notes: Not implied by content being limited to the modal. See other expectations for details.
    • Grading note: This command may be expected to fail. This result simply indicates that it did not yield support.
Grading Note: There is no known/documented support. There may still be support for this expectation, but it is undocumented. If this is the case, please report this issue.
NVDAChromeyes
  • Result: (pass)
    • Test Case: open the dialog using Activate Button (Enter or Space)
      1. Launch NVDA and Chrome.
      2. Navigate to the test page.
      3. set mode to auto (do not explicitly change the mode)
      4. issue command
        • summary: navigate forward to the button to open the dialog
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" aria-modal="true"]`
          • keyboard focus location: button
          • virtual cursor location: button
      5. issue command
        • Using the command: "Enter or Space" (Activate Button)
        • Observe: dialog will open and focus will be moved to the target
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" aria-modal="true"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      6. is the expectation met?
    • Output: "Add delivery address, dialog, street, edit, blank"
    • Result Notes: Modal state was not conveyed but non-modal content was obscured which implies the modal state. See other expectations for details.
NVDAEdgeyes
  • Result: (pass)
    • Test Case: open the dialog using Activate Button (Enter or Space)
      1. Launch NVDA and Edge.
      2. Navigate to the test page.
      3. set mode to auto (do not explicitly change the mode)
      4. issue command
        • summary: navigate forward to the button to open the dialog
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" aria-modal="true"]`
          • keyboard focus location: button
          • virtual cursor location: button
      5. issue command
        • Using the command: "Enter or Space" (Activate Button)
        • Observe: dialog will open and focus will be moved to the target
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" aria-modal="true"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      6. is the expectation met?
    • Output: "Add delivery address, dialog, street, edit, blank"
    • Result Notes: Modal state was not conveyed but non-modal content was obscured which implies the modal state. See other expectations for details.
NVDAFirefoxyes
  • Result: (pass)
    • Test Case: open the dialog using Activate Button (Enter or Space)
      1. Launch NVDA and Firefox.
      2. Navigate to the test page.
      3. set mode to auto (do not explicitly change the mode)
      4. issue command
        • summary: navigate forward to the button to open the dialog
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" aria-modal="true"]`
          • keyboard focus location: button
          • virtual cursor location: button
      5. issue command
        • Using the command: "Enter or Space" (Activate Button)
        • Observe: dialog will open and focus will be moved to the target
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" aria-modal="true"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      6. is the expectation met?
    • Output: "Add delivery address, dialog, street, edit, has auto complete, blank."
    • Result Notes: Modal state was not conveyed but non-modal content was obscured which implies the modal state. See other expectations for details.
OrcaFirefoxnone
  • Result: (fail)
    • Test Case: attempt to navigate backwards to content behind the open modal using Read previous item (up arrow)
      1. Launch Orca and Firefox.
      2. Navigate to the test page.
      3. set mode to auto (do not explicitly change the mode)
      4. issue command
        • summary: navigate forward to the button to open the dialog
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • keyboard focus location: button
          • virtual cursor location: button
      5. issue command
        • summary: dialog will open and focus will be moved to the target
        • Using the command: "Enter or Space" (Activate Button)
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      6. issue command
        • summary: attempt to navigate backwards past the start of the dialog
        • Using the command: "up arrow" (Read previous item)
        • You may need to issue this command multiple times
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • keyboard focus location: before target
          • virtual cursor location: before target
      7. is the expectation met?
    • Output: content outside could be found ("add delivery address push button")
    • Grading note: This command may be expected to fail. This result simply indicates that it did not yield support.
  • Result: (fail)
    • Test Case: attempt to navigate backwards to content behind the open modal using Previous link (shift+ k)
      1. Launch Orca and Firefox.
      2. Navigate to the test page.
      3. set mode to auto (do not explicitly change the mode)
      4. issue command
        • summary: navigate forward to the button to open the dialog
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • keyboard focus location: button
          • virtual cursor location: button
      5. issue command
        • summary: dialog will open and focus will be moved to the target
        • Using the command: "Enter or Space" (Activate Button)
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      6. issue command
        • summary: attempt to navigate backwards past the start of the dialog
        • Using the command: "shift+ k" (Previous link)
        • You may need to issue this command multiple times
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • keyboard focus location: before target
          • virtual cursor location: before target
      7. is the expectation met?
    • Output: "date picker dialog example, link"
    • Grading note: This command may be expected to fail. This result simply indicates that it did not yield support.
Grading Note: There is no known/documented support. There may still be support for this expectation, but it is undocumented. If this is the case, please report this issue.
TalkBackChromenone
  • Result: (fail)
    • Test Case: open the dialog using Activate button (double tap (or alt+enter))
      1. Launch TalkBack and Chrome.
      2. Navigate to the test page.
      3. issue command
        • summary: navigate forward to the button to open the dialog
        • Using the command: "Swipe right (or alt+right arrow)" (Read next item)
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" aria-modal="true"]`
          • virtual cursor location: button
      4. issue command
        • Using the command: "double tap (or alt+enter)" (Activate button)
        • Observe: dialog will open and focus will be moved to the target
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" aria-modal="true"]`
          • virtual cursor location: within target
      5. is the expectation met?
    • Output: "edit box, street, english (US) qwerty shown"
    • Result Notes: Modal state was not conveyed but non-modal content was not obscured. See other expectations for details.
    • Grading note: This command may be expected to fail. This result simply indicates that it did not yield support.
Grading Note: There is no known/documented support. There may still be support for this expectation, but it is undocumented. If this is the case, please report this issue.
Voice Access (Android)Chromenot applicable-
Voice Control (iOS)Safarinot applicable-
Voice Control (MacOS)Safarinot applicable-
VoiceOver (iOS)Safariyes
  • Result: (pass)
    • Test Case: open the dialog using Activate Button (Double tap)
      1. Launch VoiceOver (iOS) and Safari.
      2. Navigate to the test page.
      3. issue command
        • summary: navigate forward to the button to open the dialog
        • Using the command: "Swipe Right" (Next item)
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" aria-modal="true"]`
          • virtual cursor location: button
      4. issue command
        • Using the command: "Double tap" (Activate Button)
        • Observe: dialog will open and focus will be moved to the target
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" aria-modal="true"]`
          • virtual cursor location: within target
      5. is the expectation met?
    • Output: "(earcon indicating button was activated), street, text field"
    • Result Notes: Modal state was implied by not being able to navigate to content outside the modal.
VoiceOver (macOS)Safaripartial
  • Result: (partial)
    • Test Case: open the dialog using Activate Button (VO + space)
      1. Launch VoiceOver (macOS) and Safari.
      2. Navigate to the test page.
      3. set mode to auto (do not explicitly change the mode)
      4. issue command
        • summary: navigate forward to the button to open the dialog
        • Using the command: "next_button"
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" aria-modal="true"]`
          • keyboard focus location: button
          • virtual cursor location: button
      5. issue command
        • Using the command: "VO + space" (Activate Button)
        • Observe: dialog will open and focus will be moved to the target
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" aria-modal="true"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      6. is the expectation met?
    • Output: "street, edit text with autofill menu"
    • Result Notes: Modal state was not conveyed but non-modal content was partially obscured which partially implies the modal state. See other expectations for details.
Windows Speech RecognitionEdgenot applicable-
Windows Speech RecognitionChromenot applicable-
Windows Voice AccessEdgenot applicable-
Windows Voice AccessChromenot applicable-
Windows KeyboardChromenot applicable-
Windows KeyboardFirefoxnot applicable-
Windows KeyboardEdgenot applicable-
Mac KeyboardChromenot applicable-
Mac KeyboardSafarinot applicable-
iOS KeyboardSafarinot applicable-
Android KeyboardChromenot applicable-

Extended Support for: aria-modal attribute: convey the presence of aria-modal=true

These are less common combinations

ATBrowserHas SupportOutput
Dragon Naturally SpeakingIEnot applicable-
Dragon Naturally SpeakingFirefoxnot applicable-
JAWS 2021.2012.57IE 11yes
  • Result: (pass)
    • Test Case: open the dialog using Activate Button (Enter or Space)
      1. Launch JAWS and IE.
      2. Navigate to the test page.
      3. set mode to auto (do not explicitly change the mode)
      4. issue command
        • summary: navigate forward to the button to open the dialog
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" aria-modal="true"]`
          • keyboard focus location: button
          • virtual cursor location: button
      5. issue command
        • Using the command: "Enter or Space" (Activate Button)
        • Observe: dialog will open and focus will be moved to the target
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" aria-modal="true"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      6. is the expectation met?
    • Output: "add delivery address, dialog, street: edit, type in text"
    • Result Notes: The modal state was not explicitly conveyed, but content outside the modal was obscured, which implies the dialog state.
NarratorFirefoxunknown-
NarratorChromeunknown-
NarratorIEunknown-
NVDAIEunknown-
TalkBackFirefoxunknown-
Voice Access (Android)Firefoxnot applicable-
VoiceOver (iOS)Chromeunknown-
VoiceOver (macOS)Chromeunknown-
VoiceOver (macOS)Firefoxunknown-
OrcaChromeunknown-
Voice Control (MacOS)Chromenot applicable-
Voice Control (MacOS)Firefoxnot applicable-
Mac KeyboardFirefoxnot applicable-
Android KeyboardFirefoxnot applicable-
Back to top

Expectation for the aria-modal attribute: limit reading to children of aria-modal=true - applied to the dialog role

This expectation is applied to the dialog role. Expectations and results might differ when the the feature is applied to different roles.

This expectation is from the aria-modal attribute feature.

Rationale:

Users should not be able to access content outside of the modal. However, AT are not required to implement this functionality per the ARIA spec, and authors may implement this on their own.

Strength of this expectation for different types of assistive technologies:

  • Screen Readers: SHOULD
  • Voice Control: NA

Grading method:

All of the listed commands must pass for the expectation to pass.

ATBrowserHas SupportOutput
Dragon Naturally SpeakingChromenot applicable-
JAWSChromeyes
  • Result: (pass)
    • Test Case: attempt to navigate backwards to content behind the open modal using Read previous item (Up arrow)
      1. Launch JAWS and Chrome.
      2. Navigate to the test page.
      3. set mode to auto (do not explicitly change the mode)
      4. issue command
        • summary: navigate forward to the button to open the dialog
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • keyboard focus location: button
          • virtual cursor location: button
      5. issue command
        • summary: dialog will open and focus will be moved to the target
        • Using the command: "Enter or Space" (Activate Button)
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      6. issue command
        • summary: attempt to navigate backwards past the start of the dialog
        • Using the command: "Up arrow" (Read previous item)
        • You may need to issue this command multiple times
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • keyboard focus location: before target
          • virtual cursor location: before target
      7. is the expectation met?
    • Output: not able to move outside of the modal
JAWSEdgeyes
  • Result: (pass)
    • Test Case: attempt to navigate backwards to content behind the open modal using Read previous item (Up arrow)
      1. Launch JAWS and Edge.
      2. Navigate to the test page.
      3. set mode to auto (do not explicitly change the mode)
      4. issue command
        • summary: navigate forward to the button to open the dialog
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • keyboard focus location: button
          • virtual cursor location: button
      5. issue command
        • summary: dialog will open and focus will be moved to the target
        • Using the command: "Enter or Space" (Activate Button)
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      6. issue command
        • summary: attempt to navigate backwards past the start of the dialog
        • Using the command: "Up arrow" (Read previous item)
        • You may need to issue this command multiple times
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • keyboard focus location: before target
          • virtual cursor location: before target
      7. is the expectation met?
    • Output: not able to move outside of the modal
JAWSFirefoxyes
  • Result: (pass)
    • Test Case: attempt to navigate backwards to content behind the open modal using Read previous item (Up arrow)
      1. Launch JAWS and Firefox.
      2. Navigate to the test page.
      3. set mode to auto (do not explicitly change the mode)
      4. issue command
        • summary: navigate forward to the button to open the dialog
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • keyboard focus location: button
          • virtual cursor location: button
      5. issue command
        • summary: dialog will open and focus will be moved to the target
        • Using the command: "Enter or Space" (Activate Button)
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      6. issue command
        • summary: attempt to navigate backwards past the start of the dialog
        • Using the command: "Up arrow" (Read previous item)
        • You may need to issue this command multiple times
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • keyboard focus location: before target
          • virtual cursor location: before target
      7. is the expectation met?
    • Output: not able to move outside of the modal
    • Result Notes: The title of the window was announced
NarratorEdgenone
  • Result: (fail)
    • Test Case: attempt to navigate backwards to content behind the open modal using Jump to previous item (scan mode) (Up arrow)
      1. Launch Narrator and Edge.
      2. Navigate to the test page.
      3. set mode to auto (do not explicitly change the mode)
      4. issue command
        • summary: navigate forward to the button to open the dialog
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • keyboard focus location: button
          • virtual cursor location: button
      5. issue command
        • summary: dialog will open and focus will be moved to the target
        • Using the command: "Enter or Space Bar" (Activate Item (primary action))
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      6. issue command
        • summary: attempt to navigate backwards past the start of the dialog
        • Using the command: "Up arrow" (Jump to previous item (scan mode))
        • You may need to issue this command multiple times
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • keyboard focus location: before target
          • virtual cursor location: before target
      7. is the expectation met?
    • Output: elements outside the modal were found
Grading Note: There is no known/documented support. There may still be support for this expectation, but it is undocumented. If this is the case, please report this issue.
NVDAChromeyes
  • Result: (pass)
    • Test Case: attempt to navigate backwards to content behind the open modal using Read previous item (up arrow)
      1. Launch NVDA and Chrome.
      2. Navigate to the test page.
      3. set mode to auto (do not explicitly change the mode)
      4. issue command
        • summary: navigate forward to the button to open the dialog
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • keyboard focus location: button
          • virtual cursor location: button
      5. issue command
        • summary: dialog will open and focus will be moved to the target
        • Using the command: "Enter or Space" (Activate Button)
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      6. issue command
        • summary: attempt to navigate backwards past the start of the dialog
        • Using the command: "up arrow" (Read previous item)
        • You may need to issue this command multiple times
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • keyboard focus location: before target
          • virtual cursor location: before target
      7. is the expectation met?
    • Output: not able to move outside of the modal
NVDAEdgeyes
  • Result: (pass)
    • Test Case: attempt to navigate backwards to content behind the open modal using Read previous item (up arrow)
      1. Launch NVDA and Edge.
      2. Navigate to the test page.
      3. set mode to auto (do not explicitly change the mode)
      4. issue command
        • summary: navigate forward to the button to open the dialog
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • keyboard focus location: button
          • virtual cursor location: button
      5. issue command
        • summary: dialog will open and focus will be moved to the target
        • Using the command: "Enter or Space" (Activate Button)
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      6. issue command
        • summary: attempt to navigate backwards past the start of the dialog
        • Using the command: "up arrow" (Read previous item)
        • You may need to issue this command multiple times
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • keyboard focus location: before target
          • virtual cursor location: before target
      7. is the expectation met?
    • Output: not able to move outside of the modal
NVDAFirefoxyes
  • Result: (pass)
    • Test Case: attempt to navigate backwards to content behind the open modal using Read previous item (up arrow)
      1. Launch NVDA and Firefox.
      2. Navigate to the test page.
      3. set mode to auto (do not explicitly change the mode)
      4. issue command
        • summary: navigate forward to the button to open the dialog
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • keyboard focus location: button
          • virtual cursor location: button
      5. issue command
        • summary: dialog will open and focus will be moved to the target
        • Using the command: "Enter or Space" (Activate Button)
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      6. issue command
        • summary: attempt to navigate backwards past the start of the dialog
        • Using the command: "up arrow" (Read previous item)
        • You may need to issue this command multiple times
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • keyboard focus location: before target
          • virtual cursor location: before target
      7. is the expectation met?
    • Output: not able to move outside of the modal
    • Result Notes: If you click content outside of the modal with a mouse, it is then possible to navigate that content behind the modal. This does not appear to be possible when using keyboard-alone.
OrcaFirefoxnone
  • Result: (fail)
    • Test Case: attempt to navigate backwards to content behind the open modal using Read previous item (up arrow)
      1. Launch Orca and Firefox.
      2. Navigate to the test page.
      3. set mode to auto (do not explicitly change the mode)
      4. issue command
        • summary: navigate forward to the button to open the dialog
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • keyboard focus location: button
          • virtual cursor location: button
      5. issue command
        • summary: dialog will open and focus will be moved to the target
        • Using the command: "Enter or Space" (Activate Button)
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      6. issue command
        • summary: attempt to navigate backwards past the start of the dialog
        • Using the command: "up arrow" (Read previous item)
        • You may need to issue this command multiple times
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • keyboard focus location: before target
          • virtual cursor location: before target
      7. is the expectation met?
    • Output: content outside could be found ("add delivery address push button")
  • Result: (fail)
    • Test Case: attempt to navigate backwards to content behind the open modal using Previous link (shift+ k)
      1. Launch Orca and Firefox.
      2. Navigate to the test page.
      3. set mode to auto (do not explicitly change the mode)
      4. issue command
        • summary: navigate forward to the button to open the dialog
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • keyboard focus location: button
          • virtual cursor location: button
      5. issue command
        • summary: dialog will open and focus will be moved to the target
        • Using the command: "Enter or Space" (Activate Button)
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      6. issue command
        • summary: attempt to navigate backwards past the start of the dialog
        • Using the command: "shift+ k" (Previous link)
        • You may need to issue this command multiple times
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • keyboard focus location: before target
          • virtual cursor location: before target
      7. is the expectation met?
    • Output: "date picker dialog example, link"
Grading Note: There is no known/documented support. There may still be support for this expectation, but it is undocumented. If this is the case, please report this issue.
TalkBackChromenone
  • Result: (fail)
    • Test Case: attempt to navigate backwards to content behind the open modal using Read previous item (Swipe left (or alt+left arrow))
      1. Launch TalkBack and Chrome.
      2. Navigate to the test page.
      3. issue command
        • summary: navigate forward to the button to open the dialog
        • Using the command: "Swipe right (or alt+right arrow)" (Read next item)
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • virtual cursor location: button
      4. issue command
        • summary: dialog will open and focus will be moved to the target
        • Using the command: "double tap (or alt+enter)" (Activate button)
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • virtual cursor location: within target
      5. issue command
        • summary: attempt to navigate backwards past the start of the dialog
        • Using the command: "Swipe left (or alt+left arrow)" (Read previous item)
        • You may need to issue this command multiple times
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • virtual cursor location: before target
      6. is the expectation met?
    • Output: "add delivery address, button"
Grading Note: There is no known/documented support. There may still be support for this expectation, but it is undocumented. If this is the case, please report this issue.
Voice Access (Android)Chromenot applicable-
Voice Control (iOS)Safarinot applicable-
Voice Control (MacOS)Safarinot applicable-
VoiceOver (iOS)Safaripartial
  • Result: (partial)
    • Test Case: attempt to navigate backwards to content behind the open modal using Previous item (Swipe Left)
      1. Launch VoiceOver (iOS) and Safari.
      2. Navigate to the test page.
      3. issue command
        • summary: navigate forward to the button to open the dialog
        • Using the command: "Swipe Right" (Next item)
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • virtual cursor location: button
      4. issue command
        • summary: dialog will open and focus will be moved to the target
        • Using the command: "Double tap" (Activate Button)
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • virtual cursor location: within target
      5. issue command
        • summary: attempt to navigate backwards past the start of the dialog
        • Using the command: "Swipe Left" (Previous item)
        • You may need to issue this command multiple times
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • virtual cursor location: before target
      6. is the expectation met?
    • Output: "street, text field"
    • Result Notes: announced some quotations marks and the main landmark, but not other content
  • Result: (partial)
    • Test Case: attempt to navigate forwards to content behind the open modal using Next item (Swipe Right)
      1. Launch VoiceOver (iOS) and Safari.
      2. Navigate to the test page.
      3. issue command
        • summary: navigate forward to the button to open the dialog
        • Using the command: "Swipe Right" (Next item)
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • virtual cursor location: button
      4. issue command
        • summary: dialog will open and focus will be moved to the target
        • Using the command: "Double tap" (Activate Button)
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • virtual cursor location: within target
      5. issue command
        • summary: attempt to navigate forwards past the end of the dialog
        • Using the command: "Swipe Right" (Next item)
        • You may need to issue this command multiple times
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • virtual cursor location: after target
      6. is the expectation met?
    • Output: content was not found except for some quotation marks
    • Result Notes: announced some quotations marks and the main landmark, but not other content
VoiceOver (macOS)Safaripartial
  • Result: (partial)
    • Test Case: attempt to navigate backwards to content behind the open modal using Read previous item (VO + Left Arrow)
      1. Launch VoiceOver (macOS) and Safari.
      2. Navigate to the test page.
      3. set mode to auto (do not explicitly change the mode)
      4. issue command
        • summary: navigate forward to the button to open the dialog
        • Using the command: "next_button"
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • keyboard focus location: button
          • virtual cursor location: button
      5. issue command
        • summary: dialog will open and focus will be moved to the target
        • Using the command: "VO + space" (Activate Button)
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      6. issue command
        • summary: navigate to the dialog container
        • Using the command: "VO + Shift + Up Arrow" (Exit an object (such as an iframe))
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. issue command
        • summary: attempt to navigate backwards past the start of the dialog
        • Using the command: "VO + Left Arrow" (Read previous item)
        • You may need to issue this command multiple times
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • keyboard focus location: before target
          • virtual cursor location: before target
      8. is the expectation met?
    • Output: some quotes could be found but not other content
    • Result Notes: Only partial content was found, even after navigating out of the dialog via VO+shift+up arrow
Windows Speech RecognitionEdgenot applicable-
Windows Speech RecognitionChromenot applicable-
Windows Voice AccessEdgenot applicable-
Windows Voice AccessChromenot applicable-
Windows KeyboardChromenot applicable-
Windows KeyboardFirefoxnot applicable-
Windows KeyboardEdgenot applicable-
Mac KeyboardChromenot applicable-
Mac KeyboardSafarinot applicable-
iOS KeyboardSafarinot applicable-
Android KeyboardChromenot applicable-

Extended Support for: aria-modal attribute: limit reading to children of aria-modal=true

These are less common combinations

ATBrowserHas SupportOutput
Dragon Naturally SpeakingIEnot applicable-
Dragon Naturally SpeakingFirefoxnot applicable-
JAWS 2021.2012.57IE 11yes
  • Result: (pass)
    • Test Case: attempt to navigate backwards to content behind the open modal using Read previous item (Up arrow)
      1. Launch JAWS and IE.
      2. Navigate to the test page.
      3. set mode to auto (do not explicitly change the mode)
      4. issue command
        • summary: navigate forward to the button to open the dialog
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • keyboard focus location: button
          • virtual cursor location: button
      5. issue command
        • summary: dialog will open and focus will be moved to the target
        • Using the command: "Enter or Space" (Activate Button)
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      6. issue command
        • summary: attempt to navigate backwards past the start of the dialog
        • Using the command: "Up arrow" (Read previous item)
        • You may need to issue this command multiple times
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • keyboard focus location: before target
          • virtual cursor location: before target
      7. is the expectation met?
    • Output: not able to move outside of the modal
NarratorFirefoxunknown-
NarratorChromeunknown-
NarratorIEunknown-
NVDAIEunknown-
TalkBackFirefoxunknown-
Voice Access (Android)Firefoxnot applicable-
VoiceOver (iOS)Chromeunknown-
VoiceOver (macOS)Chromeunknown-
VoiceOver (macOS)Firefoxunknown-
OrcaChromeunknown-
Voice Control (MacOS)Chromenot applicable-
Voice Control (MacOS)Firefoxnot applicable-
Mac KeyboardFirefoxnot applicable-
Android KeyboardFirefoxnot applicable-
Back to top

Expectation for the aria-modal attribute: remove outside content from navigational shortcuts when aria-modal=true - applied to the dialog role

This expectation is applied to the dialog role. Expectations and results might differ when the the feature is applied to different roles.

This expectation is from the aria-modal attribute feature.

Rationale:

Users should not be able to access content outside of the modal. However, AT are not required to implement this functionality per the ARIA spec, and authors may implement this on their own.

Strength of this expectation for different types of assistive technologies:

  • Screen Readers: SHOULD
  • Voice Control: NA

Examples:

  • Screen readers must not allow allow users to jump to the next element type if that element is outside of the modal
  • Screen readers must not include outside content in the list of elements

Grading method:

All of the listed commands must pass for the expectation to pass.

ATBrowserHas SupportOutput
Dragon Naturally SpeakingChromenot applicable-
JAWSChromeyes
  • Result: (pass)
    • Test Case: Open the element list while the modal is open using Open element list (Insert + F3)
      1. Launch JAWS and Chrome.
      2. Navigate to the test page.
      3. set mode to auto (do not explicitly change the mode)
      4. issue command
        • summary: navigate forward to the button to open the dialog
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `*[aria-modal=true]`
          • keyboard focus location: button
          • virtual cursor location: button
      5. issue command
        • summary: dialog will open and focus will be moved to the target
        • Using the command: "Enter or Space" (Activate Button)
        • Ensure AT location after executing the command
          • Target: `*[aria-modal=true]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      6. set mode to browse
      7. issue command
        • summary: attempt to navigate to content behind the modal via the element list
        • Using the command: "Insert + F3" (Open element list)
      8. is the expectation met?
    • Output: outside content was displayed in content lists, such as the of links, etc. Note: not possible to move to an item in the list.
  • Result: (pass)
    • Test Case: attempt to navigate backwards to content behind the open modal using Previous unvisited link (shift+u)
      1. Launch JAWS and Chrome.
      2. Navigate to the test page.
      3. set mode to auto (do not explicitly change the mode)
      4. issue command
        • summary: navigate forward to the button to open the dialog
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • keyboard focus location: button
          • virtual cursor location: button
      5. issue command
        • summary: dialog will open and focus will be moved to the target
        • Using the command: "Enter or Space" (Activate Button)
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      6. issue command
        • summary: attempt to navigate backwards past the start of the dialog
        • Using the command: "shift+u" (Previous unvisited link)
        • You may need to issue this command multiple times
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • keyboard focus location: before target
          • virtual cursor location: before target
      7. is the expectation met?
    • Output: no links were found
    • Result Notes: This is sort of fragile. If you use the mouse to click outside of the modal content, the modal stays open but shortcuts can be used to jump to outside content. It appears to work fine if keyboard was used exclusively.
JAWSEdgeyes
  • Result: (pass)
    • Test Case: Open the element list while the modal is open using Open element list (Insert + F3)
      1. Launch JAWS and Edge.
      2. Navigate to the test page.
      3. set mode to auto (do not explicitly change the mode)
      4. issue command
        • summary: navigate forward to the button to open the dialog
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `*[aria-modal=true]`
          • keyboard focus location: button
          • virtual cursor location: button
      5. issue command
        • summary: dialog will open and focus will be moved to the target
        • Using the command: "Enter or Space" (Activate Button)
        • Ensure AT location after executing the command
          • Target: `*[aria-modal=true]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      6. set mode to browse
      7. issue command
        • summary: attempt to navigate to content behind the modal via the element list
        • Using the command: "Insert + F3" (Open element list)
      8. is the expectation met?
    • Output: outside content was displayed in content lists, such as the of links, etc. Note: not possible to move to an item in the list.
  • Result: (pass)
    • Test Case: attempt to navigate backwards to content behind the open modal using Previous unvisited link (shift+u)
      1. Launch JAWS and Edge.
      2. Navigate to the test page.
      3. set mode to auto (do not explicitly change the mode)
      4. issue command
        • summary: navigate forward to the button to open the dialog
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • keyboard focus location: button
          • virtual cursor location: button
      5. issue command
        • summary: dialog will open and focus will be moved to the target
        • Using the command: "Enter or Space" (Activate Button)
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      6. issue command
        • summary: attempt to navigate backwards past the start of the dialog
        • Using the command: "shift+u" (Previous unvisited link)
        • You may need to issue this command multiple times
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • keyboard focus location: before target
          • virtual cursor location: before target
      7. is the expectation met?
    • Output: no links were found
    • Result Notes: This is sort of fragile. If you use the mouse to click outside of the modal content, the modal stays open but shortcuts can be used to jump to outside content. It appears to work fine if keyboard was used exclusively.
JAWSFirefoxpartial
  • Result: (fail)
    • Test Case: Open the element list while the modal is open using Open element list (Insert + F3)
      1. Launch JAWS and Firefox.
      2. Navigate to the test page.
      3. set mode to auto (do not explicitly change the mode)
      4. issue command
        • summary: navigate forward to the button to open the dialog
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `*[aria-modal=true]`
          • keyboard focus location: button
          • virtual cursor location: button
      5. issue command
        • summary: dialog will open and focus will be moved to the target
        • Using the command: "Enter or Space" (Activate Button)
        • Ensure AT location after executing the command
          • Target: `*[aria-modal=true]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      6. set mode to browse
      7. issue command
        • summary: attempt to navigate to content behind the modal via the element list
        • Using the command: "Insert + F3" (Open element list)
      8. is the expectation met?
    • Output: outside content was displayed in content lists, such as the of links, etc.
  • Result: (pass)
    • Test Case: attempt to navigate backwards to content behind the open modal using Previous unvisited link (shift+u)
      1. Launch JAWS and Firefox.
      2. Navigate to the test page.
      3. set mode to auto (do not explicitly change the mode)
      4. issue command
        • summary: navigate forward to the button to open the dialog
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • keyboard focus location: button
          • virtual cursor location: button
      5. issue command
        • summary: dialog will open and focus will be moved to the target
        • Using the command: "Enter or Space" (Activate Button)
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      6. issue command
        • summary: attempt to navigate backwards past the start of the dialog
        • Using the command: "shift+u" (Previous unvisited link)
        • You may need to issue this command multiple times
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • keyboard focus location: before target
          • virtual cursor location: before target
      7. is the expectation met?
    • Output: no links were found
    • Result Notes: This is sort of fragile. If you use the mouse to click outside of the modal content, the modal stays open but shortcuts can be used to jump to outside content. It appears to work fine if keyboard was used exclusively.
NarratorEdgenone
  • Result: (fail)
    • Test Case: attempt to navigate backwards to content behind the open modal using Previous heading (shift + h)
      1. Launch Narrator and Edge.
      2. Navigate to the test page.
      3. set mode to auto (do not explicitly change the mode)
      4. issue command
        • summary: navigate forward to the button to open the dialog
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • keyboard focus location: button
          • virtual cursor location: button
      5. issue command
        • summary: dialog will open and focus will be moved to the target
        • Using the command: "Enter or Space Bar" (Activate Item (primary action))
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      6. issue command
        • summary: attempt to navigate backwards past the start of the dialog
        • Using the command: "shift + h" (Previous heading)
        • You may need to issue this command multiple times
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • keyboard focus location: before target
          • virtual cursor location: before target
      7. is the expectation met?
    • Output: headings were found outside of the modal
Grading Note: There is no known/documented support. There may still be support for this expectation, but it is undocumented. If this is the case, please report this issue.
NVDAChromeyes
  • Result: (pass)
    • Test Case: attempt to navigate backwards to content behind the open modal using previous form field (shift + f)
      1. Launch NVDA and Chrome.
      2. Navigate to the test page.
      3. set mode to auto (do not explicitly change the mode)
      4. issue command
        • summary: navigate forward to the button to open the dialog
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • keyboard focus location: button
          • virtual cursor location: button
      5. issue command
        • summary: dialog will open and focus will be moved to the target
        • Using the command: "Enter or Space" (Activate Button)
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      6. issue command
        • summary: attempt to navigate backwards past the start of the dialog
        • Using the command: "shift + f" (previous form field)
        • You may need to issue this command multiple times
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • keyboard focus location: before target
          • virtual cursor location: before target
      7. is the expectation met?
    • Output: no outside form fields were found
  • Result: (pass)
    • Test Case: attempt to navigate backwards to content behind the open modal using Previous link (shift+ k)
      1. Launch NVDA and Chrome.
      2. Navigate to the test page.
      3. set mode to auto (do not explicitly change the mode)
      4. issue command
        • summary: navigate forward to the button to open the dialog
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • keyboard focus location: button
          • virtual cursor location: button
      5. issue command
        • summary: dialog will open and focus will be moved to the target
        • Using the command: "Enter or Space" (Activate Button)
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      6. issue command
        • summary: attempt to navigate backwards past the start of the dialog
        • Using the command: "shift+ k" (Previous link)
        • You may need to issue this command multiple times
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • keyboard focus location: before target
          • virtual cursor location: before target
      7. is the expectation met?
    • Output: no outside links were found
  • Result: (pass)
    • Test Case: Open the element list while the modal is open using Open Elements List (NVDA + F7)
      1. Launch NVDA and Chrome.
      2. Navigate to the test page.
      3. set mode to auto (do not explicitly change the mode)
      4. issue command
        • summary: navigate forward to the button to open the dialog
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `*[aria-modal=true]`
          • keyboard focus location: button
          • virtual cursor location: button
      5. issue command
        • summary: dialog will open and focus will be moved to the target
        • Using the command: "Enter or Space" (Activate Button)
        • Ensure AT location after executing the command
          • Target: `*[aria-modal=true]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      6. set mode to browse
      7. issue command
        • summary: attempt to navigate to content behind the modal via the element list
        • Using the command: "NVDA + F7" (Open Elements List)
      8. is the expectation met?
    • Output: only content within the modal was included in the lists
NVDAEdgeyes
  • Result: (pass)
    • Test Case: attempt to navigate backwards to content behind the open modal using previous form field (shift + f)
      1. Launch NVDA and Edge.
      2. Navigate to the test page.
      3. set mode to auto (do not explicitly change the mode)
      4. issue command
        • summary: navigate forward to the button to open the dialog
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • keyboard focus location: button
          • virtual cursor location: button
      5. issue command
        • summary: dialog will open and focus will be moved to the target
        • Using the command: "Enter or Space" (Activate Button)
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      6. issue command
        • summary: attempt to navigate backwards past the start of the dialog
        • Using the command: "shift + f" (previous form field)
        • You may need to issue this command multiple times
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • keyboard focus location: before target
          • virtual cursor location: before target
      7. is the expectation met?
    • Output: no outside form fields were found
  • Result: (pass)
    • Test Case: attempt to navigate backwards to content behind the open modal using Previous link (shift+ k)
      1. Launch NVDA and Edge.
      2. Navigate to the test page.
      3. set mode to auto (do not explicitly change the mode)
      4. issue command
        • summary: navigate forward to the button to open the dialog
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • keyboard focus location: button
          • virtual cursor location: button
      5. issue command
        • summary: dialog will open and focus will be moved to the target
        • Using the command: "Enter or Space" (Activate Button)
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      6. issue command
        • summary: attempt to navigate backwards past the start of the dialog
        • Using the command: "shift+ k" (Previous link)
        • You may need to issue this command multiple times
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • keyboard focus location: before target
          • virtual cursor location: before target
      7. is the expectation met?
    • Output: no outside links were found
  • Result: (pass)
    • Test Case: Open the element list while the modal is open using Open Elements List (NVDA + F7)
      1. Launch NVDA and Edge.
      2. Navigate to the test page.
      3. set mode to auto (do not explicitly change the mode)
      4. issue command
        • summary: navigate forward to the button to open the dialog
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `*[aria-modal=true]`
          • keyboard focus location: button
          • virtual cursor location: button
      5. issue command
        • summary: dialog will open and focus will be moved to the target
        • Using the command: "Enter or Space" (Activate Button)
        • Ensure AT location after executing the command
          • Target: `*[aria-modal=true]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      6. set mode to browse
      7. issue command
        • summary: attempt to navigate to content behind the modal via the element list
        • Using the command: "NVDA + F7" (Open Elements List)
      8. is the expectation met?
    • Output: only content within the modal was included in the lists
NVDAFirefoxyes
  • Result: (pass)
    • Test Case: attempt to navigate backwards to content behind the open modal using previous form field (shift + f)
      1. Launch NVDA and Firefox.
      2. Navigate to the test page.
      3. set mode to auto (do not explicitly change the mode)
      4. issue command
        • summary: navigate forward to the button to open the dialog
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • keyboard focus location: button
          • virtual cursor location: button
      5. issue command
        • summary: dialog will open and focus will be moved to the target
        • Using the command: "Enter or Space" (Activate Button)
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      6. issue command
        • summary: attempt to navigate backwards past the start of the dialog
        • Using the command: "shift + f" (previous form field)
        • You may need to issue this command multiple times
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • keyboard focus location: before target
          • virtual cursor location: before target
      7. is the expectation met?
    • Output: no outside form fields were found
  • Result: (pass)
    • Test Case: attempt to navigate backwards to content behind the open modal using Previous link (shift+ k)
      1. Launch NVDA and Firefox.
      2. Navigate to the test page.
      3. set mode to auto (do not explicitly change the mode)
      4. issue command
        • summary: navigate forward to the button to open the dialog
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • keyboard focus location: button
          • virtual cursor location: button
      5. issue command
        • summary: dialog will open and focus will be moved to the target
        • Using the command: "Enter or Space" (Activate Button)
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      6. issue command
        • summary: attempt to navigate backwards past the start of the dialog
        • Using the command: "shift+ k" (Previous link)
        • You may need to issue this command multiple times
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • keyboard focus location: before target
          • virtual cursor location: before target
      7. is the expectation met?
    • Output: no outside links were found
  • Result: (pass)
    • Test Case: Open the element list while the modal is open using Open Elements List (NVDA + F7)
      1. Launch NVDA and Firefox.
      2. Navigate to the test page.
      3. set mode to auto (do not explicitly change the mode)
      4. issue command
        • summary: navigate forward to the button to open the dialog
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `*[aria-modal=true]`
          • keyboard focus location: button
          • virtual cursor location: button
      5. issue command
        • summary: dialog will open and focus will be moved to the target
        • Using the command: "Enter or Space" (Activate Button)
        • Ensure AT location after executing the command
          • Target: `*[aria-modal=true]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      6. set mode to browse
      7. issue command
        • summary: attempt to navigate to content behind the modal via the element list
        • Using the command: "NVDA + F7" (Open Elements List)
      8. is the expectation met?
    • Output: only content within the modal was included in the lists
OrcaFirefoxpartial
  • Result: (pass)
    • Test Case: attempt to navigate backwards to content behind the open modal using previous form field (shift + tab)
      1. Launch Orca and Firefox.
      2. Navigate to the test page.
      3. set mode to auto (do not explicitly change the mode)
      4. issue command
        • summary: navigate forward to the button to open the dialog
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • keyboard focus location: button
          • virtual cursor location: button
      5. issue command
        • summary: dialog will open and focus will be moved to the target
        • Using the command: "Enter or Space" (Activate Button)
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      6. issue command
        • summary: attempt to navigate backwards past the start of the dialog
        • Using the command: "shift + tab" (previous form field)
        • You may need to issue this command multiple times
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • keyboard focus location: before target
          • virtual cursor location: before target
      7. is the expectation met?
    • Output: no outside form fields were found
  • Result: (fail)
    • Test Case: attempt to navigate backwards to content behind the open modal using Previous link (shift+ k)
      1. Launch Orca and Firefox.
      2. Navigate to the test page.
      3. set mode to auto (do not explicitly change the mode)
      4. issue command
        • summary: navigate forward to the button to open the dialog
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • keyboard focus location: button
          • virtual cursor location: button
      5. issue command
        • summary: dialog will open and focus will be moved to the target
        • Using the command: "Enter or Space" (Activate Button)
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      6. issue command
        • summary: attempt to navigate backwards past the start of the dialog
        • Using the command: "shift+ k" (Previous link)
        • You may need to issue this command multiple times
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • keyboard focus location: before target
          • virtual cursor location: before target
      7. is the expectation met?
    • Output: "date picker dialog example, link"
  • Result: (partial)
    • Test Case: Open the element list while the modal is open using Open a list of links (alt + shift+ k)
      1. Launch Orca and Firefox.
      2. Navigate to the test page.
      3. set mode to auto (do not explicitly change the mode)
      4. issue command
        • summary: navigate forward to the button to open the dialog
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `*[aria-modal=true]`
          • keyboard focus location: button
          • virtual cursor location: button
      5. issue command
        • summary: dialog will open and focus will be moved to the target
        • Using the command: "Enter or Space" (Activate Button)
        • Ensure AT location after executing the command
          • Target: `*[aria-modal=true]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      6. set mode to browse
      7. issue command
        • summary: attempt to navigate to content behind the modal via the element list
        • Using the command: "alt + shift+ k" (Open a list of links)
      8. is the expectation met?
    • Output: outside links are listed. When jumping to those links, focus is redirected back to the open dialog.
    • Result Notes: partial because outside links are listed but its not possible to jump to them.
TalkBackChromenone
  • Result: (fail)
    • Test Case: attempt to navigate backwards to content behind the open modal using previous link (correct reading control must be selected) (Swipe up (alt+shift+L))
      1. Launch TalkBack and Chrome.
      2. Navigate to the test page.
      3. issue command
        • summary: navigate forward to the button to open the dialog
        • Using the command: "Swipe right (or alt+right arrow)" (Read next item)
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • virtual cursor location: button
      4. issue command
        • summary: dialog will open and focus will be moved to the target
        • Using the command: "double tap (or alt+enter)" (Activate button)
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • virtual cursor location: within target
      5. issue command
        • summary: attempt to navigate backwards past the start of the dialog
        • Using the command: "Swipe up (alt+shift+L)" (previous link (correct reading control must be selected))
        • You may need to issue this command multiple times
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • virtual cursor location: before target
      6. is the expectation met?
    • Output: content outside of the modal was announced
Grading Note: There is no known/documented support. There may still be support for this expectation, but it is undocumented. If this is the case, please report this issue.
Voice Access (Android)Chromenot applicable-
Voice Control (iOS)Safarinot applicable-
Voice Control (MacOS)Safarinot applicable-
VoiceOver (iOS)Safariyes
  • Result: (pass)
    • Test Case: attempt to navigate backwards to content behind the open modal using previous link (correct item type must be selected) (Swipe up)
      1. Launch VoiceOver (iOS) and Safari.
      2. Navigate to the test page.
      3. issue command
        • summary: navigate forward to the button to open the dialog
        • Using the command: "Swipe Right" (Next item)
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • virtual cursor location: button
      4. issue command
        • summary: dialog will open and focus will be moved to the target
        • Using the command: "Double tap" (Activate Button)
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • virtual cursor location: within target
      5. issue command
        • summary: attempt to navigate backwards past the start of the dialog
        • Using the command: "Swipe up" (previous link (correct item type must be selected))
        • You may need to issue this command multiple times
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • virtual cursor location: before target
      6. is the expectation met?
    • Output: "link not found"
VoiceOver (macOS)Safariyes
  • Result: (pass)
    • Test Case: attempt to navigate backwards to content behind the open modal using Previous Heading (VO + Shift + Command + H)
      1. Launch VoiceOver (macOS) and Safari.
      2. Navigate to the test page.
      3. set mode to auto (do not explicitly change the mode)
      4. issue command
        • summary: navigate forward to the button to open the dialog
        • Using the command: "next_button"
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • keyboard focus location: button
          • virtual cursor location: button
      5. issue command
        • summary: dialog will open and focus will be moved to the target
        • Using the command: "VO + space" (Activate Button)
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      6. issue command
        • summary: navigate to the dialog container
        • Using the command: "VO + Shift + Up Arrow" (Exit an object (such as an iframe))
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. issue command
        • summary: attempt to navigate backwards past the start of the dialog
        • Using the command: "VO + Shift + Command + H" (Previous Heading)
        • You may need to issue this command multiple times
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • keyboard focus location: before target
          • virtual cursor location: before target
      8. is the expectation met?
    • Output: "First heading, Heading level 2, add delivery address"
  • Result: (pass)
    • Test Case: Open the element list while the modal is open using Open Rotor (VO + U)
      1. Launch VoiceOver (macOS) and Safari.
      2. Navigate to the test page.
      3. set mode to auto (do not explicitly change the mode)
      4. issue command
        • summary: navigate forward to the button to open the dialog
        • Using the command: "next_button"
        • Ensure AT location after executing the command
          • Target: `*[aria-modal=true]`
          • keyboard focus location: button
          • virtual cursor location: button
      5. issue command
        • summary: dialog will open and focus will be moved to the target
        • Using the command: "VO + space" (Activate Button)
        • Ensure AT location after executing the command
          • Target: `*[aria-modal=true]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      6. set mode to browse
      7. issue command
        • summary: attempt to navigate to content behind the modal via the element list
        • Using the command: "VO + U" (Open Rotor)
      8. is the expectation met?
    • Output: only content within the modal was listed
Windows Speech RecognitionEdgenot applicable-
Windows Speech RecognitionChromenot applicable-
Windows Voice AccessEdgenot applicable-
Windows Voice AccessChromenot applicable-
Windows KeyboardChromenot applicable-
Windows KeyboardFirefoxnot applicable-
Windows KeyboardEdgenot applicable-
Mac KeyboardChromenot applicable-
Mac KeyboardSafarinot applicable-
iOS KeyboardSafarinot applicable-
Android KeyboardChromenot applicable-

Extended Support for: aria-modal attribute: remove outside content from navigational shortcuts when aria-modal=true

These are less common combinations

ATBrowserHas SupportOutput
Dragon Naturally SpeakingIEnot applicable-
Dragon Naturally SpeakingFirefoxnot applicable-
JAWS 2021.2012.57IE 11partial
  • Result: (fail)
    • Test Case: Open the element list while the modal is open using Open element list (Insert + F3)
      1. Launch JAWS and IE.
      2. Navigate to the test page.
      3. set mode to auto (do not explicitly change the mode)
      4. issue command
        • summary: navigate forward to the button to open the dialog
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `*[aria-modal=true]`
          • keyboard focus location: button
          • virtual cursor location: button
      5. issue command
        • summary: dialog will open and focus will be moved to the target
        • Using the command: "Enter or Space" (Activate Button)
        • Ensure AT location after executing the command
          • Target: `*[aria-modal=true]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      6. set mode to browse
      7. issue command
        • summary: attempt to navigate to content behind the modal via the element list
        • Using the command: "Insert + F3" (Open element list)
      8. is the expectation met?
    • Output: outside content was displayed in content lists, such as the of links, etc. Note: it IS possible to navigate to headings in this list and break free from the modal.
  • Result: (pass)
    • Test Case: attempt to navigate backwards to content behind the open modal using Previous unvisited link (shift+u)
      1. Launch JAWS and IE.
      2. Navigate to the test page.
      3. set mode to auto (do not explicitly change the mode)
      4. issue command
        • summary: navigate forward to the button to open the dialog
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • keyboard focus location: button
          • virtual cursor location: button
      5. issue command
        • summary: dialog will open and focus will be moved to the target
        • Using the command: "Enter or Space" (Activate Button)
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      6. issue command
        • summary: attempt to navigate backwards past the start of the dialog
        • Using the command: "shift+u" (Previous unvisited link)
        • You may need to issue this command multiple times
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • keyboard focus location: before target
          • virtual cursor location: before target
      7. is the expectation met?
    • Output: no links were found
NarratorFirefoxunknown-
NarratorChromeunknown-
NarratorIEunknown-
NVDAIEunknown-
TalkBackFirefoxunknown-
Voice Access (Android)Firefoxnot applicable-
VoiceOver (iOS)Chromeunknown-
VoiceOver (macOS)Chromeunknown-
VoiceOver (macOS)Firefoxunknown-
OrcaChromeunknown-
Voice Control (MacOS)Chromenot applicable-
Voice Control (MacOS)Firefoxnot applicable-
Mac KeyboardFirefoxnot applicable-
Android KeyboardFirefoxnot applicable-
Back to top

Expectation for the dialog role: convey the name of the dialog

This expectation is from the dialog role feature.

Rationale:

Users need to know the purpose of the dialog.

Strength of this expectation for different types of assistive technologies:

  • Screen Readers: MUST
  • Voice Control: NA

Grading method:

Just one of the listed commands must pass for the expectation to pass.

ATBrowserHas SupportOutput
Dragon Naturally SpeakingChromenot applicable-
JAWSChromeyes
  • Result: (pass)
    • Test Case: open the dialog using Activate Button (Enter or Space)
      1. Launch JAWS and Chrome.
      2. Navigate to the test page.
      3. set mode to auto (do not explicitly change the mode)
      4. issue command
        • summary: navigate forward to the button to open the dialog
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" aria-modal="true"]`
          • keyboard focus location: button
          • virtual cursor location: button
      5. issue command
        • Using the command: "Enter or Space" (Activate Button)
        • Observe: dialog will open and focus will be moved to the target
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" aria-modal="true"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      6. is the expectation met?
    • Output: "add delivery address, dialog, (dialog content), street: edit, type in text"
    • Result Notes: The name and role were conveyed when entering the dialog for the first time.
JAWSEdgeyes
  • Result: (pass)
    • Test Case: open the dialog using Activate Button (Enter or Space)
      1. Launch JAWS and Edge.
      2. Navigate to the test page.
      3. set mode to auto (do not explicitly change the mode)
      4. issue command
        • summary: navigate forward to the button to open the dialog
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" aria-modal="true"]`
          • keyboard focus location: button
          • virtual cursor location: button
      5. issue command
        • Using the command: "Enter or Space" (Activate Button)
        • Observe: dialog will open and focus will be moved to the target
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" aria-modal="true"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      6. is the expectation met?
    • Output: "add delivery address, dialog, (dialog content), street: edit, type in text"
    • Result Notes: The name and role were conveyed when entering the dialog for the first time.
JAWSFirefoxyes
  • Result: (pass)
    • Test Case: open the dialog using Activate Button (Enter or Space)
      1. Launch JAWS and Firefox.
      2. Navigate to the test page.
      3. set mode to auto (do not explicitly change the mode)
      4. issue command
        • summary: navigate forward to the button to open the dialog
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" aria-modal="true"]`
          • keyboard focus location: button
          • virtual cursor location: button
      5. issue command
        • Using the command: "Enter or Space" (Activate Button)
        • Observe: dialog will open and focus will be moved to the target
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" aria-modal="true"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      6. is the expectation met?
    • Output: "add delivery address, dialog (modal content) street: edit, type in text"
    • Result Notes: The name and role were conveyed when entering the dialog for the first time.
NarratorEdgeyes
  • Result: (pass)
    • Test Case: open the dialog using Activate Item (primary action) (Enter or Space Bar)
      1. Launch Narrator and Edge.
      2. Navigate to the test page.
      3. set mode to auto (do not explicitly change the mode)
      4. issue command
        • summary: navigate forward to the button to open the dialog
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" aria-modal="true"]`
          • keyboard focus location: button
          • virtual cursor location: button
      5. issue command
        • Using the command: "Enter or Space Bar" (Activate Item (primary action))
        • Observe: dialog will open and focus will be moved to the target
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" aria-modal="true"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      6. is the expectation met?
    • Output: "Add delivery address, dialog, street, edit, Scan off"
NVDAChromeyes
  • Result: (pass)
    • Test Case: open the dialog using Activate Button (Enter or Space)
      1. Launch NVDA and Chrome.
      2. Navigate to the test page.
      3. set mode to auto (do not explicitly change the mode)
      4. issue command
        • summary: navigate forward to the button to open the dialog
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" aria-modal="true"]`
          • keyboard focus location: button
          • virtual cursor location: button
      5. issue command
        • Using the command: "Enter or Space" (Activate Button)
        • Observe: dialog will open and focus will be moved to the target
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" aria-modal="true"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      6. is the expectation met?
    • Output: "Add delivery address, dialog, street, edit, blank"
NVDAEdgeyes
  • Result: (pass)
    • Test Case: open the dialog using Activate Button (Enter or Space)
      1. Launch NVDA and Edge.
      2. Navigate to the test page.
      3. set mode to auto (do not explicitly change the mode)
      4. issue command
        • summary: navigate forward to the button to open the dialog
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" aria-modal="true"]`
          • keyboard focus location: button
          • virtual cursor location: button
      5. issue command
        • Using the command: "Enter or Space" (Activate Button)
        • Observe: dialog will open and focus will be moved to the target
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" aria-modal="true"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      6. is the expectation met?
    • Output: "Add delivery address, dialog, street, edit, blank"
NVDAFirefoxyes
  • Result: (pass)
    • Test Case: open the dialog using Activate Button (Enter or Space)
      1. Launch NVDA and Firefox.
      2. Navigate to the test page.
      3. set mode to auto (do not explicitly change the mode)
      4. issue command
        • summary: navigate forward to the button to open the dialog
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" aria-modal="true"]`
          • keyboard focus location: button
          • virtual cursor location: button
      5. issue command
        • Using the command: "Enter or Space" (Activate Button)
        • Observe: dialog will open and focus will be moved to the target
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" aria-modal="true"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      6. is the expectation met?
    • Output: "Add delivery address, dialog, street, edit, has auto complete, blank."
OrcaFirefoxyes
  • Result: (pass)
    • Test Case: open the dialog using Activate Button (Enter or Space)
      1. Launch Orca and Firefox.
      2. Navigate to the test page.
      3. set mode to auto (do not explicitly change the mode)
      4. issue command
        • summary: navigate forward to the button to open the dialog
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" aria-modal="true"]`
          • keyboard focus location: button
          • virtual cursor location: button
      5. issue command
        • Using the command: "Enter or Space" (Activate Button)
        • Observe: dialog will open and focus will be moved to the target
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" aria-modal="true"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      6. is the expectation met?
    • Output: "Add delivery address dialog, street, entry, focus mode"
TalkBackChromenone
  • Result: (fail)
    • Test Case: open the dialog using Activate button (double tap (or alt+enter))
      1. Launch TalkBack and Chrome.
      2. Navigate to the test page.
      3. issue command
        • summary: navigate forward to the button to open the dialog
        • Using the command: "Swipe right (or alt+right arrow)" (Read next item)
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" aria-modal="true"]`
          • virtual cursor location: button
      4. issue command
        • Using the command: "double tap (or alt+enter)" (Activate button)
        • Observe: dialog will open and focus will be moved to the target
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" aria-modal="true"]`
          • virtual cursor location: within target
      5. is the expectation met?
    • Output: "edit box, street, english (US) qwerty shown"
    • Result Notes: not conveyed when first entering the dialog
    • Grading note: This command may be expected to fail. This result simply indicates that it did not yield support.
Grading Note: There is no known/documented support. There may still be support for this expectation, but it is undocumented. If this is the case, please report this issue.
Voice Access (Android)Chromenot applicable-
Voice Control (iOS)Safarinot applicable-
Voice Control (MacOS)Safarinot applicable-
VoiceOver (iOS)Safarinone
  • Result: (fail)
    • Test Case: open the dialog using Activate Button (Double tap)
      1. Launch VoiceOver (iOS) and Safari.
      2. Navigate to the test page.
      3. issue command
        • summary: navigate forward to the button to open the dialog
        • Using the command: "Swipe Right" (Next item)
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" aria-modal="true"]`
          • virtual cursor location: button
      4. issue command
        • Using the command: "Double tap" (Activate Button)
        • Observe: dialog will open and focus will be moved to the target
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" aria-modal="true"]`
          • virtual cursor location: within target
      5. is the expectation met?
    • Output: "(earcon indicating button was activated), street, text field"
    • Grading note: This command may be expected to fail. This result simply indicates that it did not yield support.
Grading Note: There is no known/documented support. There may still be support for this expectation, but it is undocumented. If this is the case, please report this issue.
VoiceOver (macOS)Safariyes
  • Result: (fail)
    • Test Case: open the dialog using Activate Button (VO + space)
      1. Launch VoiceOver (macOS) and Safari.
      2. Navigate to the test page.
      3. set mode to auto (do not explicitly change the mode)
      4. issue command
        • summary: navigate forward to the button to open the dialog
        • Using the command: "next_button"
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" aria-modal="true"]`
          • keyboard focus location: button
          • virtual cursor location: button
      5. issue command
        • Using the command: "VO + space" (Activate Button)
        • Observe: dialog will open and focus will be moved to the target
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" aria-modal="true"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      6. is the expectation met?
    • Output: "street, edit text with autofill menu"
    • Grading note: This command may be expected to fail. This result simply indicates that it did not yield support.
  • Result: (pass)
    • Test Case: navigate to modal container using Exit an object (such as an iframe) (VO + Shift + Up Arrow)
      1. Launch VoiceOver (macOS) and Safari.
      2. Navigate to the test page.
      3. set mode to auto (do not explicitly change the mode)
      4. issue command
        • summary: navigate forward to the button to open the dialog
        • Using the command: "next_button"
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • keyboard focus location: button
          • virtual cursor location: button
      5. issue command
        • summary: dialog will open and focus will be moved to the target
        • Using the command: "VO + space" (Activate Button)
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      6. issue command
        • summary: navigate to the modal container
        • Using the command: "VO + Shift + Up Arrow" (Exit an object (such as an iframe))
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. is the expectation met?
    • Output: "out of add delivery address, web dialog, with 9 items"
Windows Speech RecognitionEdgenot applicable-
Windows Speech RecognitionChromenot applicable-
Windows Voice AccessEdgenot applicable-
Windows Voice AccessChromenot applicable-
Windows KeyboardChromenot applicable-
Windows KeyboardFirefoxnot applicable-
Windows KeyboardEdgenot applicable-
Mac KeyboardChromenot applicable-
Mac KeyboardSafarinot applicable-
iOS KeyboardSafarinot applicable-
Android KeyboardChromenot applicable-

Extended Support for: dialog role: convey the name of the dialog

These are less common combinations

ATBrowserHas SupportOutput
Dragon Naturally SpeakingIEnot applicable-
Dragon Naturally SpeakingFirefoxnot applicable-
JAWS 2021.2012.57IE 11yes
  • Result: (pass)
    • Test Case: open the dialog using Activate Button (Enter or Space)
      1. Launch JAWS and IE.
      2. Navigate to the test page.
      3. set mode to auto (do not explicitly change the mode)
      4. issue command
        • summary: navigate forward to the button to open the dialog
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" aria-modal="true"]`
          • keyboard focus location: button
          • virtual cursor location: button
      5. issue command
        • Using the command: "Enter or Space" (Activate Button)
        • Observe: dialog will open and focus will be moved to the target
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" aria-modal="true"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      6. is the expectation met?
    • Output: "add delivery address, dialog, street: edit, type in text"
    • Result Notes: The name and role were conveyed when entering the dialog for the first time. The modal state was not
NarratorFirefoxunknown-
NarratorChromeunknown-
NarratorIEunknown-
NVDAIEunknown-
TalkBackFirefoxunknown-
Voice Access (Android)Firefoxnot applicable-
VoiceOver (iOS)Chromeunknown-
VoiceOver (macOS)Chromeunknown-
VoiceOver (macOS)Firefoxunknown-
OrcaChromeunknown-
Voice Control (MacOS)Chromenot applicable-
Voice Control (MacOS)Firefoxnot applicable-
Mac KeyboardFirefoxnot applicable-
Android KeyboardFirefoxnot applicable-
Back to top

Expectation for the dialog role: convey its role

This expectation is from the dialog role feature.

Rationale:

Users must be made aware of the dialog context.

Strength of this expectation for different types of assistive technologies:

  • Screen Readers: MUST
  • Voice Control: NA

Examples:

  • A screen reader might announce an element as something like "<name>, <role>"
  • A screen reader might imply the role by the presence of certain context roles
  • Voice Control software might let the user say something like "click, <role>".
  • Voice Control software might let the user say something like "show numbers", and interactive roles will be flagged with numbers.

Grading method:

Just one of the listed commands must pass for the expectation to pass.

ATBrowserHas SupportOutput
Dragon Naturally SpeakingChromenot applicable-
JAWSChromeyes
  • Result: (pass)
    • Test Case: open the dialog using Activate Button (Enter or Space)
      1. Launch JAWS and Chrome.
      2. Navigate to the test page.
      3. set mode to auto (do not explicitly change the mode)
      4. issue command
        • summary: navigate forward to the button to open the dialog
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" aria-modal="true"]`
          • keyboard focus location: button
          • virtual cursor location: button
      5. issue command
        • Using the command: "Enter or Space" (Activate Button)
        • Observe: dialog will open and focus will be moved to the target
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" aria-modal="true"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      6. is the expectation met?
    • Output: "add delivery address, dialog, (dialog content), street: edit, type in text"
    • Result Notes: The name and role were conveyed when entering the dialog for the first time.
JAWSEdgeyes
  • Result: (pass)
    • Test Case: open the dialog using Activate Button (Enter or Space)
      1. Launch JAWS and Edge.
      2. Navigate to the test page.
      3. set mode to auto (do not explicitly change the mode)
      4. issue command
        • summary: navigate forward to the button to open the dialog
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" aria-modal="true"]`
          • keyboard focus location: button
          • virtual cursor location: button
      5. issue command
        • Using the command: "Enter or Space" (Activate Button)
        • Observe: dialog will open and focus will be moved to the target
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" aria-modal="true"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      6. is the expectation met?
    • Output: "add delivery address, dialog, (dialog content), street: edit, type in text"
    • Result Notes: The name and role were conveyed when entering the dialog for the first time.
JAWSFirefoxyes
  • Result: (pass)
    • Test Case: open the dialog using Activate Button (Enter or Space)
      1. Launch JAWS and Firefox.
      2. Navigate to the test page.
      3. set mode to auto (do not explicitly change the mode)
      4. issue command
        • summary: navigate forward to the button to open the dialog
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" aria-modal="true"]`
          • keyboard focus location: button
          • virtual cursor location: button
      5. issue command
        • Using the command: "Enter or Space" (Activate Button)
        • Observe: dialog will open and focus will be moved to the target
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" aria-modal="true"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      6. is the expectation met?
    • Output: "add delivery address, dialog (modal content) street: edit, type in text"
    • Result Notes: The name and role were conveyed when entering the dialog for the first time.
NarratorEdgeyes
  • Result: (pass)
    • Test Case: open the dialog using Activate Item (primary action) (Enter or Space Bar)
      1. Launch Narrator and Edge.
      2. Navigate to the test page.
      3. set mode to auto (do not explicitly change the mode)
      4. issue command
        • summary: navigate forward to the button to open the dialog
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" aria-modal="true"]`
          • keyboard focus location: button
          • virtual cursor location: button
      5. issue command
        • Using the command: "Enter or Space Bar" (Activate Item (primary action))
        • Observe: dialog will open and focus will be moved to the target
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" aria-modal="true"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      6. is the expectation met?
    • Output: "Add delivery address, dialog, street, edit, Scan off"
NVDAChromeyes
  • Result: (pass)
    • Test Case: open the dialog using Activate Button (Enter or Space)
      1. Launch NVDA and Chrome.
      2. Navigate to the test page.
      3. set mode to auto (do not explicitly change the mode)
      4. issue command
        • summary: navigate forward to the button to open the dialog
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" aria-modal="true"]`
          • keyboard focus location: button
          • virtual cursor location: button
      5. issue command
        • Using the command: "Enter or Space" (Activate Button)
        • Observe: dialog will open and focus will be moved to the target
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" aria-modal="true"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      6. is the expectation met?
    • Output: "Add delivery address, dialog, street, edit, blank"
NVDAEdgeyes
  • Result: (pass)
    • Test Case: open the dialog using Activate Button (Enter or Space)
      1. Launch NVDA and Edge.
      2. Navigate to the test page.
      3. set mode to auto (do not explicitly change the mode)
      4. issue command
        • summary: navigate forward to the button to open the dialog
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" aria-modal="true"]`
          • keyboard focus location: button
          • virtual cursor location: button
      5. issue command
        • Using the command: "Enter or Space" (Activate Button)
        • Observe: dialog will open and focus will be moved to the target
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" aria-modal="true"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      6. is the expectation met?
    • Output: "Add delivery address, dialog, street, edit, blank"
NVDAFirefoxyes
  • Result: (pass)
    • Test Case: open the dialog using Activate Button (Enter or Space)
      1. Launch NVDA and Firefox.
      2. Navigate to the test page.
      3. set mode to auto (do not explicitly change the mode)
      4. issue command
        • summary: navigate forward to the button to open the dialog
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" aria-modal="true"]`
          • keyboard focus location: button
          • virtual cursor location: button
      5. issue command
        • Using the command: "Enter or Space" (Activate Button)
        • Observe: dialog will open and focus will be moved to the target
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" aria-modal="true"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      6. is the expectation met?
    • Output: "Add delivery address, dialog, street, edit, has auto complete, blank."
OrcaFirefoxyes
  • Result: (pass)
    • Test Case: open the dialog using Activate Button (Enter or Space)
      1. Launch Orca and Firefox.
      2. Navigate to the test page.
      3. set mode to auto (do not explicitly change the mode)
      4. issue command
        • summary: navigate forward to the button to open the dialog
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" aria-modal="true"]`
          • keyboard focus location: button
          • virtual cursor location: button
      5. issue command
        • Using the command: "Enter or Space" (Activate Button)
        • Observe: dialog will open and focus will be moved to the target
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" aria-modal="true"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      6. is the expectation met?
    • Output: "Add delivery address dialog, street, entry, focus mode"
TalkBackChromenone
  • Result: (fail)
    • Test Case: open the dialog using Activate button (double tap (or alt+enter))
      1. Launch TalkBack and Chrome.
      2. Navigate to the test page.
      3. issue command
        • summary: navigate forward to the button to open the dialog
        • Using the command: "Swipe right (or alt+right arrow)" (Read next item)
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" aria-modal="true"]`
          • virtual cursor location: button
      4. issue command
        • Using the command: "double tap (or alt+enter)" (Activate button)
        • Observe: dialog will open and focus will be moved to the target
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" aria-modal="true"]`
          • virtual cursor location: within target
      5. is the expectation met?
    • Output: "edit box, street, english (US) qwerty shown"
    • Result Notes: not conveyed when first entering the dialog
    • Grading note: This command may be expected to fail. This result simply indicates that it did not yield support.
Grading Note: There is no known/documented support. There may still be support for this expectation, but it is undocumented. If this is the case, please report this issue.
Voice Access (Android)Chromenot applicable-
Voice Control (iOS)Safarinot applicable-
Voice Control (MacOS)Safarinot applicable-
VoiceOver (iOS)Safarinone
  • Result: (fail)
    • Test Case: open the dialog using Activate Button (Double tap)
      1. Launch VoiceOver (iOS) and Safari.
      2. Navigate to the test page.
      3. issue command
        • summary: navigate forward to the button to open the dialog
        • Using the command: "Swipe Right" (Next item)
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" aria-modal="true"]`
          • virtual cursor location: button
      4. issue command
        • Using the command: "Double tap" (Activate Button)
        • Observe: dialog will open and focus will be moved to the target
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" aria-modal="true"]`
          • virtual cursor location: within target
      5. is the expectation met?
    • Output: "(earcon indicating button was activated), street, text field"
    • Grading note: This command may be expected to fail. This result simply indicates that it did not yield support.
Grading Note: There is no known/documented support. There may still be support for this expectation, but it is undocumented. If this is the case, please report this issue.
VoiceOver (macOS)Safariyes
  • Result: (fail)
    • Test Case: open the dialog using Activate Button (VO + space)
      1. Launch VoiceOver (macOS) and Safari.
      2. Navigate to the test page.
      3. set mode to auto (do not explicitly change the mode)
      4. issue command
        • summary: navigate forward to the button to open the dialog
        • Using the command: "next_button"
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" aria-modal="true"]`
          • keyboard focus location: button
          • virtual cursor location: button
      5. issue command
        • Using the command: "VO + space" (Activate Button)
        • Observe: dialog will open and focus will be moved to the target
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" aria-modal="true"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      6. is the expectation met?
    • Output: "street, edit text with autofill menu"
    • Grading note: This command may be expected to fail. This result simply indicates that it did not yield support.
  • Result: (pass)
    • Test Case: navigate to modal container using Exit an object (such as an iframe) (VO + Shift + Up Arrow)
      1. Launch VoiceOver (macOS) and Safari.
      2. Navigate to the test page.
      3. set mode to auto (do not explicitly change the mode)
      4. issue command
        • summary: navigate forward to the button to open the dialog
        • Using the command: "next_button"
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • keyboard focus location: button
          • virtual cursor location: button
      5. issue command
        • summary: dialog will open and focus will be moved to the target
        • Using the command: "VO + space" (Activate Button)
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      6. issue command
        • summary: navigate to the modal container
        • Using the command: "VO + Shift + Up Arrow" (Exit an object (such as an iframe))
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. is the expectation met?
    • Output: "out of add delivery address, web dialog, with 9 items"
Windows Speech RecognitionEdgenot applicable-
Windows Speech RecognitionChromenot applicable-
Windows Voice AccessEdgenot applicable-
Windows Voice AccessChromenot applicable-
Windows KeyboardChromenot applicable-
Windows KeyboardFirefoxnot applicable-
Windows KeyboardEdgenot applicable-
Mac KeyboardChromenot applicable-
Mac KeyboardSafarinot applicable-
iOS KeyboardSafarinot applicable-
Android KeyboardChromenot applicable-

Extended Support for: dialog role: convey its role

These are less common combinations

ATBrowserHas SupportOutput
Dragon Naturally SpeakingIEnot applicable-
Dragon Naturally SpeakingFirefoxnot applicable-
JAWS 2021.2012.57IE 11yes
  • Result: (pass)
    • Test Case: open the dialog using Activate Button (Enter or Space)
      1. Launch JAWS and IE.
      2. Navigate to the test page.
      3. set mode to auto (do not explicitly change the mode)
      4. issue command
        • summary: navigate forward to the button to open the dialog
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" aria-modal="true"]`
          • keyboard focus location: button
          • virtual cursor location: button
      5. issue command
        • Using the command: "Enter or Space" (Activate Button)
        • Observe: dialog will open and focus will be moved to the target
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" aria-modal="true"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      6. is the expectation met?
    • Output: "add delivery address, dialog, street: edit, type in text"
    • Result Notes: The name and role were conveyed when entering the dialog for the first time. The modal state was not
NarratorFirefoxunknown-
NarratorChromeunknown-
NarratorIEunknown-
NVDAIEunknown-
TalkBackFirefoxunknown-
Voice Access (Android)Firefoxnot applicable-
VoiceOver (iOS)Chromeunknown-
VoiceOver (macOS)Chromeunknown-
VoiceOver (macOS)Firefoxunknown-
OrcaChromeunknown-
Voice Control (MacOS)Chromenot applicable-
Voice Control (MacOS)Firefoxnot applicable-
Mac KeyboardFirefoxnot applicable-
Android KeyboardFirefoxnot applicable-
Back to top

Expectation for the dialog role: convey the boundaries of the dialog

This expectation is from the dialog role feature.

Rationale:

Users need to know when they enter and exit a dialog.

Strength of this expectation for different types of assistive technologies:

  • Screen Readers: MUST
  • Voice Control: NA

Examples:

  • Screen readers might announce something like "entering dialog" or "leaving dialog".
  • Screen readers might imply the boundary by obscuring outside content when aria-modal=true is also present.

Grading method:

All of the listed commands must pass for the expectation to pass.

ATBrowserHas SupportOutput
Dragon Naturally SpeakingChromenot applicable-
JAWSChromeyes
  • Result: (pass)
    • Test Case: attempt to navigate backwards to content behind the open modal using Read previous item (Up arrow)
      1. Launch JAWS and Chrome.
      2. Navigate to the test page.
      3. set mode to auto (do not explicitly change the mode)
      4. issue command
        • summary: navigate forward to the button to open the dialog
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • keyboard focus location: button
          • virtual cursor location: button
      5. issue command
        • summary: dialog will open and focus will be moved to the target
        • Using the command: "Enter or Space" (Activate Button)
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      6. issue command
        • summary: attempt to navigate backwards past the start of the dialog
        • Using the command: "Up arrow" (Read previous item)
        • You may need to issue this command multiple times
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • keyboard focus location: before target
          • virtual cursor location: before target
      7. is the expectation met?
    • Output: not able to move outside of the modal
JAWSEdgeyes
  • Result: (pass)
    • Test Case: attempt to navigate backwards to content behind the open modal using Read previous item (Up arrow)
      1. Launch JAWS and Edge.
      2. Navigate to the test page.
      3. set mode to auto (do not explicitly change the mode)
      4. issue command
        • summary: navigate forward to the button to open the dialog
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • keyboard focus location: button
          • virtual cursor location: button
      5. issue command
        • summary: dialog will open and focus will be moved to the target
        • Using the command: "Enter or Space" (Activate Button)
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      6. issue command
        • summary: attempt to navigate backwards past the start of the dialog
        • Using the command: "Up arrow" (Read previous item)
        • You may need to issue this command multiple times
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • keyboard focus location: before target
          • virtual cursor location: before target
      7. is the expectation met?
    • Output: not able to move outside of the modal
JAWSFirefoxyes
  • Result: (pass)
    • Test Case: attempt to navigate backwards to content behind the open modal using Read previous item (Up arrow)
      1. Launch JAWS and Firefox.
      2. Navigate to the test page.
      3. set mode to auto (do not explicitly change the mode)
      4. issue command
        • summary: navigate forward to the button to open the dialog
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • keyboard focus location: button
          • virtual cursor location: button
      5. issue command
        • summary: dialog will open and focus will be moved to the target
        • Using the command: "Enter or Space" (Activate Button)
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      6. issue command
        • summary: attempt to navigate backwards past the start of the dialog
        • Using the command: "Up arrow" (Read previous item)
        • You may need to issue this command multiple times
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • keyboard focus location: before target
          • virtual cursor location: before target
      7. is the expectation met?
    • Output: not able to move outside of the modal
NarratorEdgenone
  • Result: (fail)
    • Test Case: navigate forward into open dialog using Jump to next item (scan mode) (Down arrow)
      1. Launch Narrator and Edge.
      2. Navigate to the test page.
      3. set mode to auto (do not explicitly change the mode)
      4. issue command
        • summary: navigate forward to the button to open the dialog
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `*[role="dialog"]`
          • keyboard focus location: button
          • virtual cursor location: button
      5. issue command
        • summary: dialog will open and focus will be moved to the target
        • Using the command: "Enter or Space Bar" (Activate Item (primary action))
        • Ensure AT location after executing the command
          • Target: `*[role="dialog"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      6. set mode to browse
      7. issue command
        • summary: navigate backwards out of the open dialog
        • Using the command: "Up arrow" (Jump to previous item (scan mode))
        • You may need to issue this command multiple times
        • Ensure AT location after executing the command
          • Target: `*[role="dialog"]`
          • keyboard focus location: before target
          • virtual cursor location: before target
      8. issue command
        • summary: navigate forwards into the open dialog
        • Using the command: "Down arrow" (Jump to next item (scan mode))
        • You may need to issue this command multiple times
        • Ensure AT location after executing the command
          • Target: `*[role="dialog"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      9. is the expectation met?
    • Output: elements outside the modal were found
  • Result: (fail)
    • Test Case: attempt to navigate backwards to content behind the open modal using Jump to previous item (scan mode) (Up arrow)
      1. Launch Narrator and Edge.
      2. Navigate to the test page.
      3. set mode to auto (do not explicitly change the mode)
      4. issue command
        • summary: navigate forward to the button to open the dialog
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • keyboard focus location: button
          • virtual cursor location: button
      5. issue command
        • summary: dialog will open and focus will be moved to the target
        • Using the command: "Enter or Space Bar" (Activate Item (primary action))
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      6. issue command
        • summary: attempt to navigate backwards past the start of the dialog
        • Using the command: "Up arrow" (Jump to previous item (scan mode))
        • You may need to issue this command multiple times
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • keyboard focus location: before target
          • virtual cursor location: before target
      7. is the expectation met?
    • Output: elements outside the modal were found
Grading Note: There is no known/documented support. There may still be support for this expectation, but it is undocumented. If this is the case, please report this issue.
NVDAChromeyes
  • Result: (pass)
    • Test Case: attempt to navigate backwards to content behind the open modal using Read previous item (up arrow)
      1. Launch NVDA and Chrome.
      2. Navigate to the test page.
      3. set mode to auto (do not explicitly change the mode)
      4. issue command
        • summary: navigate forward to the button to open the dialog
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • keyboard focus location: button
          • virtual cursor location: button
      5. issue command
        • summary: dialog will open and focus will be moved to the target
        • Using the command: "Enter or Space" (Activate Button)
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      6. issue command
        • summary: attempt to navigate backwards past the start of the dialog
        • Using the command: "up arrow" (Read previous item)
        • You may need to issue this command multiple times
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • keyboard focus location: before target
          • virtual cursor location: before target
      7. is the expectation met?
    • Output: not able to move outside of the modal
NVDAEdgeyes
  • Result: (pass)
    • Test Case: attempt to navigate backwards to content behind the open modal using Read previous item (up arrow)
      1. Launch NVDA and Edge.
      2. Navigate to the test page.
      3. set mode to auto (do not explicitly change the mode)
      4. issue command
        • summary: navigate forward to the button to open the dialog
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • keyboard focus location: button
          • virtual cursor location: button
      5. issue command
        • summary: dialog will open and focus will be moved to the target
        • Using the command: "Enter or Space" (Activate Button)
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      6. issue command
        • summary: attempt to navigate backwards past the start of the dialog
        • Using the command: "up arrow" (Read previous item)
        • You may need to issue this command multiple times
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • keyboard focus location: before target
          • virtual cursor location: before target
      7. is the expectation met?
    • Output: not able to move outside of the modal
NVDAFirefoxyes
  • Result: (pass)
    • Test Case: attempt to navigate backwards to content behind the open modal using Read previous item (up arrow)
      1. Launch NVDA and Firefox.
      2. Navigate to the test page.
      3. set mode to auto (do not explicitly change the mode)
      4. issue command
        • summary: navigate forward to the button to open the dialog
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • keyboard focus location: button
          • virtual cursor location: button
      5. issue command
        • summary: dialog will open and focus will be moved to the target
        • Using the command: "Enter or Space" (Activate Button)
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      6. issue command
        • summary: attempt to navigate backwards past the start of the dialog
        • Using the command: "up arrow" (Read previous item)
        • You may need to issue this command multiple times
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • keyboard focus location: before target
          • virtual cursor location: before target
      7. is the expectation met?
    • Output: not able to move outside of the modal
OrcaFirefoxnone
  • Result: (fail)
    • Test Case: attempt to navigate backwards to content behind the open modal using Read previous item (up arrow)
      1. Launch Orca and Firefox.
      2. Navigate to the test page.
      3. set mode to auto (do not explicitly change the mode)
      4. issue command
        • summary: navigate forward to the button to open the dialog
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • keyboard focus location: button
          • virtual cursor location: button
      5. issue command
        • summary: dialog will open and focus will be moved to the target
        • Using the command: "Enter or Space" (Activate Button)
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      6. issue command
        • summary: attempt to navigate backwards past the start of the dialog
        • Using the command: "up arrow" (Read previous item)
        • You may need to issue this command multiple times
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • keyboard focus location: before target
          • virtual cursor location: before target
      7. is the expectation met?
    • Output: content outside could be found ("add delivery address push button")
Grading Note: There is no known/documented support. There may still be support for this expectation, but it is undocumented. If this is the case, please report this issue.
TalkBackChromenone
  • Result: (fail)
    • Test Case: attempt to navigate backwards to content behind the open modal using Read previous item (Swipe left (or alt+left arrow))
      1. Launch TalkBack and Chrome.
      2. Navigate to the test page.
      3. issue command
        • summary: navigate forward to the button to open the dialog
        • Using the command: "Swipe right (or alt+right arrow)" (Read next item)
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • virtual cursor location: button
      4. issue command
        • summary: dialog will open and focus will be moved to the target
        • Using the command: "double tap (or alt+enter)" (Activate button)
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • virtual cursor location: within target
      5. issue command
        • summary: attempt to navigate backwards past the start of the dialog
        • Using the command: "Swipe left (or alt+left arrow)" (Read previous item)
        • You may need to issue this command multiple times
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • virtual cursor location: before target
      6. is the expectation met?
    • Output: "add delivery address, button"
  • Result: (fail)
    • Test Case: navigate forward into open dialog using Read next item (Swipe right (or alt+right arrow))
      1. Launch TalkBack and Chrome.
      2. Navigate to the test page.
      3. issue command
        • summary: navigate forward to the button to open the dialog
        • Using the command: "Swipe right (or alt+right arrow)" (Read next item)
        • Ensure AT location after executing the command
          • Target: `*[role="dialog"]`
          • virtual cursor location: button
      4. issue command
        • summary: dialog will open and focus will be moved to the target
        • Using the command: "double tap (or alt+enter)" (Activate button)
        • Ensure AT location after executing the command
          • Target: `*[role="dialog"]`
          • virtual cursor location: within target
      5. issue command
        • summary: navigate backwards out of the open dialog
        • Using the command: "Swipe left (or alt+left arrow)" (Read previous item)
        • You may need to issue this command multiple times
        • Ensure AT location after executing the command
          • Target: `*[role="dialog"]`
          • virtual cursor location: before target
      6. issue command
        • summary: navigate forwards into the open dialog
        • Using the command: "Swipe right (or alt+right arrow)" (Read next item)
        • You may need to issue this command multiple times
        • Ensure AT location after executing the command
          • Target: `*[role="dialog"]`
          • virtual cursor location: within target
      7. is the expectation met?
    • Output: "page, end of example, splitter"
Grading Note: There is no known/documented support. There may still be support for this expectation, but it is undocumented. If this is the case, please report this issue.
Voice Access (Android)Chromenot applicable-
Voice Control (iOS)Safarinot applicable-
Voice Control (MacOS)Safarinot applicable-
VoiceOver (iOS)Safaripartial
  • Result: (partial)
    • Test Case: attempt to navigate backwards to content behind the open modal using Previous item (Swipe Left)
      1. Launch VoiceOver (iOS) and Safari.
      2. Navigate to the test page.
      3. issue command
        • summary: navigate forward to the button to open the dialog
        • Using the command: "Swipe Right" (Next item)
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • virtual cursor location: button
      4. issue command
        • summary: dialog will open and focus will be moved to the target
        • Using the command: "Double tap" (Activate Button)
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • virtual cursor location: within target
      5. issue command
        • summary: attempt to navigate backwards past the start of the dialog
        • Using the command: "Swipe Left" (Previous item)
        • You may need to issue this command multiple times
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • virtual cursor location: before target
      6. is the expectation met?
    • Output: "street, text field"
    • Result Notes: partial because some content outside the modal was found but obviously not all content
  • Result: (partial)
    • Test Case: attempt to navigate forwards to content behind the open modal using Next item (Swipe Right)
      1. Launch VoiceOver (iOS) and Safari.
      2. Navigate to the test page.
      3. issue command
        • summary: navigate forward to the button to open the dialog
        • Using the command: "Swipe Right" (Next item)
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • virtual cursor location: button
      4. issue command
        • summary: dialog will open and focus will be moved to the target
        • Using the command: "Double tap" (Activate Button)
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • virtual cursor location: within target
      5. issue command
        • summary: attempt to navigate forwards past the end of the dialog
        • Using the command: "Swipe Right" (Next item)
        • You may need to issue this command multiple times
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • virtual cursor location: after target
      6. is the expectation met?
    • Output: content was not found except for some quotation marks
    • Result Notes: partial because some content outside the modal was found but obviously not all content
VoiceOver (macOS)Safariyes
  • Result: (pass)
    • Test Case: navigate to modal container using Exit an object (such as an iframe) (VO + Shift + Up Arrow)
      1. Launch VoiceOver (macOS) and Safari.
      2. Navigate to the test page.
      3. set mode to auto (do not explicitly change the mode)
      4. issue command
        • summary: navigate forward to the button to open the dialog
        • Using the command: "next_button"
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • keyboard focus location: button
          • virtual cursor location: button
      5. issue command
        • summary: dialog will open and focus will be moved to the target
        • Using the command: "VO + space" (Activate Button)
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      6. issue command
        • summary: navigate to the modal container
        • Using the command: "VO + Shift + Up Arrow" (Exit an object (such as an iframe))
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. is the expectation met?
    • Output: "out of add delivery address, web dialog, with 9 items"
Windows Speech RecognitionEdgenot applicable-
Windows Speech RecognitionChromenot applicable-
Windows Voice AccessEdgenot applicable-
Windows Voice AccessChromenot applicable-
Windows KeyboardChromenot applicable-
Windows KeyboardFirefoxnot applicable-
Windows KeyboardEdgenot applicable-
Mac KeyboardChromenot applicable-
Mac KeyboardSafarinot applicable-
iOS KeyboardSafarinot applicable-
Android KeyboardChromenot applicable-

Extended Support for: dialog role: convey the boundaries of the dialog

These are less common combinations

ATBrowserHas SupportOutput
Dragon Naturally SpeakingIEnot applicable-
Dragon Naturally SpeakingFirefoxnot applicable-
JAWS 2021.2012.57IE 11yes
  • Result: (pass)
    • Test Case: attempt to navigate backwards to content behind the open modal using Read previous item (Up arrow)
      1. Launch JAWS and IE.
      2. Navigate to the test page.
      3. set mode to auto (do not explicitly change the mode)
      4. issue command
        • summary: navigate forward to the button to open the dialog
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • keyboard focus location: button
          • virtual cursor location: button
      5. issue command
        • summary: dialog will open and focus will be moved to the target
        • Using the command: "Enter or Space" (Activate Button)
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      6. issue command
        • summary: attempt to navigate backwards past the start of the dialog
        • Using the command: "Up arrow" (Read previous item)
        • You may need to issue this command multiple times
        • Ensure AT location after executing the command
          • Target: `*[role="dialog" *[aria-modal="true"]`
          • keyboard focus location: before target
          • virtual cursor location: before target
      7. is the expectation met?
    • Output: not able to move outside of the modal
NarratorFirefoxunknown-
NarratorChromeunknown-
NarratorIEunknown-
NVDAIEunknown-
TalkBackFirefoxunknown-
Voice Access (Android)Firefoxnot applicable-
VoiceOver (iOS)Chromeunknown-
VoiceOver (macOS)Chromeunknown-
VoiceOver (macOS)Firefoxunknown-
OrcaChromeunknown-
Voice Control (MacOS)Chromenot applicable-
Voice Control (MacOS)Firefoxnot applicable-
Mac KeyboardFirefoxnot applicable-
Android KeyboardFirefoxnot applicable-
Back to top

Dates and Versions of tested combinations

ATAT VersionBrowserBrowser versionOS versionDate tested
JAWS2023.2212.23Chrome108Windows 11 version 22h22023-01-13
JAWS2022.2110.36Edge108Windows 11 version 22h22023-01-13
JAWS2021.2012.57Firefox108Windows 11 version 22h22023-01-13
NarratorWindows 11 version 22h2Edge108Windows 11 version 22h22023-01-13
NVDA2022.4Chrome108Windows 11 version 22h22023-01-13
NVDA2022.4Edge108Windows 11 version 22h22023-01-13
NVDA2022.4Firefox108Windows 11 version 22h22023-01-13
Orca42.0Firefox108Ubuntu 22.042023-01-13
TalkBack13.5Chrome108122023-01-13
VoiceOver (iOS)16.2Safari16.216.22023-01-13
VoiceOver (macOS)13.1Safari6.113.12023-01-13

History

  • 2019-08-13 Test created
  • 2021-02-03 re-tested all core versions, no significant changes were found
  • 2021-08-07 Added Narrator results for NVDA and JAWS, updated NVDA+Chrome results.
  • 2021-12-05 Added missing aria-modal results for JAWS+Chrome, JAWS+Edge
  • 2022-01-13 Updates results