Notice: This is a work in progress. Please submit feedback or suggestions.

Test: APG 1.1 Checkbox Example (Two State)

Screen Reader support level: partial (67/80)

Voice Control support level: supported

On this page

About this test

This example implements the Checkbox Design Pattern for a two state checkbox using div elements.

Run this test and and submit your results

Age of results

Results in this test range from a year ago to a year 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 a year ago. Consider running this test and contributing results.

Test HTML

view the external test

Summary of Screen Reader support by expectation

aria-checked attribute
ExpectationJAWSNarratorNVDAOrcaTalkBackVoiceOver (iOS)VoiceOver (macOS)
ChromeIEFirefoxEdgeChromeFirefoxFirefoxChromeSafariSafari
MUST convey changes in value applied to: checkbox rolesupportedsupportedsupportedsupportedsupportedsupportedsupportedsupportedsupportedsupported
MUST convey the "false" value applied to: checkbox rolesupportedsupportedsupportedsupportedsupportedsupportedsupportedsupportedsupportedsupported
MUST convey the "true" value applied to: checkbox rolesupportedsupportedsupportedsupportedsupportedsupportedsupportedsupportedsupportedsupported
aria-labelledby attribute
ExpectationJAWSNarratorNVDAOrcaTalkBackVoiceOver (iOS)VoiceOver (macOS)
ChromeIEFirefoxEdgeChromeFirefoxFirefoxChromeSafariSafari
MUST contribute to the accessible name applied to: group rolesupportedsupportedsupportedsupportedsupportedsupportedsupportednonenonesupported
checkbox role
ExpectationJAWSNarratorNVDAOrcaTalkBackVoiceOver (iOS)VoiceOver (macOS)
ChromeIEFirefoxEdgeChromeFirefoxFirefoxChromeSafariSafari
MUST convey its namesupportedsupportedsupportedsupportedsupportedsupportedsupportedsupportedsupportedsupported
MUST convey its rolesupportedsupportedsupportedsupportedsupportedsupportedsupportedsupportedsupportedsupported
group role
ExpectationJAWSNarratorNVDAOrcaTalkBackVoiceOver (iOS)VoiceOver (macOS)
ChromeIEFirefoxEdgeChromeFirefoxFirefoxChromeSafariSafari
MUST convey the name if namedsupportedsupportedsupportedpartialsupportedsupportedsupportednonenonesupported
MUST convey its rolepartialpartialpartialpartialpartialpartialsupportednonenonesupported
SHOULD convey the boundaries of the grouppartialpartialpartialpartialpartialpartialsupportednonenonesupported

* means that some support is hidden behind settings

Summary of Voice Control support by expectation

aria-checked attribute
ExpectationDragon Naturally SpeakingVoice Access (Android)Voice Control (iOS)Voice Control (MacOS)Windows Speech Recognition
ChromeChromeSafariSafariChrome
Not applicable
aria-labelledby attribute
ExpectationDragon Naturally SpeakingVoice Access (Android)Voice Control (iOS)Voice Control (MacOS)Windows Speech Recognition
ChromeChromeSafariSafariChrome
MUST contribute to the accessible name applied to: group rolenot applicablenot applicablenot applicablenot applicablenot applicable
checkbox role
ExpectationDragon Naturally SpeakingVoice Access (Android)Voice Control (iOS)Voice Control (MacOS)Windows Speech Recognition
ChromeChromeSafariSafariChrome
MUST convey its namesupportedsupportedsupportedsupportedsupported
MUST convey its rolesupportedsupportednot applicablesupportedsupported
group role
ExpectationDragon Naturally SpeakingVoice Access (Android)Voice Control (iOS)Voice Control (MacOS)Windows Speech Recognition
ChromeChromeSafariSafariChrome
Not applicable

* means that some support is hidden behind settings

Detailed support results by expectation

Expectation for the aria-checked attribute: convey changes in value - applied to the checkbox role

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

This expectation is from the aria-checked attribute feature.

Rationale:

The user needs to know what the new value is and that the change was successful

Strength of this expectation for different types of assistive technologies:

  • Screen Readers: MUST
  • Voice Control: NA

Examples:

  • The new value is announced after it is changed.

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: Use Space (Activate Form Control) on the target of `*[ara-checked="true"]`
      1. Launch JAWS and Chrome.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[ara-checked="true"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: target
        • Keyboard focus is: target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Space (Activate Form Control)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "checked"
JAWSIEyes
  • Result: (pass)
    • Test Case: Use Space (Activate Form Control) on the target of `*[ara-checked="true"]`
      1. Launch JAWS and IE.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[ara-checked="true"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: target
        • Keyboard focus is: target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Space (Activate Form Control)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "checked"
JAWSFirefoxyes
  • Result: (pass)
    • Test Case: Use Space (Activate Form Control) on the target of `*[ara-checked="true"]`
      1. Launch JAWS and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[ara-checked="true"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: target
        • Keyboard focus is: target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Space (Activate Form Control)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "checked"
NarratorEdgeyes
  • Result: (pass)
    • Test Case: Use Space (Activate Form Control) on the target of `*[ara-checked="true"]`
      1. Launch Narrator and Edge.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[ara-checked="true"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: target
        • Keyboard focus is: target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Space (Activate Form Control)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "checked"
NVDAChromeyes
  • Result: (pass)
    • Test Case: Use Space (Activate Form Control) on the target of `*[ara-checked="true"]`
      1. Launch NVDA and Chrome.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[ara-checked="true"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: target
        • Keyboard focus is: target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Space (Activate Form Control)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "checked"
NVDAFirefoxyes
  • Result: (pass)
    • Test Case: Use Space (Activate Form Control) on the target of `*[ara-checked="true"]`
      1. Launch NVDA and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[ara-checked="true"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: target
        • Keyboard focus is: target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Space (Activate Form Control)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "checked"
OrcaFirefoxyes
  • Result: (pass)
    • Test Case: Use Space (Activate Form Control) on the target of `*[ara-checked="true"]`
      1. Launch Orca and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[ara-checked="true"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: target
        • Keyboard focus is: target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Space (Activate Form Control)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "checked"
TalkBackChromeyes
  • Result: (pass)
    • Test Case: Use double tap (Activate form control) on the target of `*[ara-checked="true"]`
      1. Launch TalkBack and Chrome.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[ara-checked="true"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: target
        • Keyboard focus is: target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: double tap (Activate form control)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Not checked"
Voice Access (Android)Chromenot applicable-
Voice Control (iOS)Safarinot applicable-
Voice Control (MacOS)Safarinot applicable-
VoiceOver (iOS)Safariyes
  • Result: (pass)
    • Test Case: Use Double tap (Activate Form Control) on the target of `*[ara-checked="true"]`
      1. Launch VoiceOver (iOS) and Safari.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[ara-checked="true"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: target
        • Keyboard focus is: target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Double tap (Activate Form Control)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "checked"
VoiceOver (macOS)Safariyes
  • Result: (pass)
    • Test Case: Use Space (Activate Form Control) on the target of `*[ara-checked="true"]`
      1. Launch VoiceOver (macOS) and Safari.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[ara-checked="true"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: target
        • Keyboard focus is: target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Space (Activate Form Control)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "checked, Lettuce, checkbox"
Windows Speech RecognitionChromenot applicable-

Extended Support for: aria-checked attribute: convey changes in value

These are less common combinations

ATBrowserHas SupportOutput
Dragon Naturally SpeakingIEnot applicable-
Dragon Naturally SpeakingFirefoxnot applicable-
JAWSEdgeunknown-
NarratorFirefoxunknown-
NarratorChromeunknown-
NarratorIEunknown-
NVDAIEunknown-
NVDAEdgeunknown-
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-
Windows Speech Recognition 1903Edge 44not applicable-
Back to top

Expectation for the aria-checked attribute: convey the "false" value - applied to the checkbox role

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

This expectation is from the aria-checked attribute feature.

Rationale:

The user needs to be able to tell that the element is not checked

Strength of this expectation for different types of assistive technologies:

  • Screen Readers: MUST
  • Voice Control: NA

Examples:

  • The "false" value might be conveyed as "not checked", "unchecked", or something similar.

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: Use Down arrow (Read next item) to navigate forward to `*[ara-checked="false"]`
      1. Launch JAWS and Chrome.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[ara-checked="false"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Down arrow (Read next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Lettuce checkbox not checked"
  • Result: (pass)
    • Test Case: Use Up arrow (Read previous item) to navigate backwards to `*[ara-checked="false"]`
      1. Launch JAWS and Chrome.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[ara-checked="false"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Up arrow (Read previous item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Lettuce checkbox not checked"
  • Result: (pass)
    • Test Case: Use Tab (Read next focusable item) to navigate forward to `*[ara-checked="false"]`
      1. Launch JAWS and Chrome.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[ara-checked="false"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Lettuce checkbox not checked"
  • Result: (pass)
    • Test Case: Use Shift + Tab (Read previous focusable item) to navigate backwards to `*[ara-checked="false"]`
      1. Launch JAWS and Chrome.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[ara-checked="false"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Shift + Tab (Read previous focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Lettuce checkbox not checked"
JAWSIEyes
  • Result: (pass)
    • Test Case: Use Down arrow (Read next item) to navigate forward to `*[ara-checked="false"]`
      1. Launch JAWS and IE.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[ara-checked="false"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Down arrow (Read next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Lettuce checkbox not checked"
  • Result: (pass)
    • Test Case: Use Up arrow (Read previous item) to navigate backwards to `*[ara-checked="false"]`
      1. Launch JAWS and IE.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[ara-checked="false"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Up arrow (Read previous item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Lettuce checkbox not checked"
  • Result: (pass)
    • Test Case: Use Tab (Read next focusable item) to navigate forward to `*[ara-checked="false"]`
      1. Launch JAWS and IE.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[ara-checked="false"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Lettuce checkbox not checked"
  • Result: (pass)
    • Test Case: Use Shift + Tab (Read previous focusable item) to navigate backwards to `*[ara-checked="false"]`
      1. Launch JAWS and IE.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[ara-checked="false"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Shift + Tab (Read previous focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Lettuce checkbox not checked"
JAWSFirefoxyes
  • Result: (pass)
    • Test Case: Use Down arrow (Read next item) to navigate forward to `*[ara-checked="false"]`
      1. Launch JAWS and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[ara-checked="false"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Down arrow (Read next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Lettuce checkbox not checked"
  • Result: (pass)
    • Test Case: Use Up arrow (Read previous item) to navigate backwards to `*[ara-checked="false"]`
      1. Launch JAWS and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[ara-checked="false"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Up arrow (Read previous item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Lettuce checkbox not checked"
  • Result: (pass)
    • Test Case: Use Tab (Read next focusable item) to navigate forward to `*[ara-checked="false"]`
      1. Launch JAWS and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[ara-checked="false"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Lettuce checkbox not checked"
  • Result: (pass)
    • Test Case: Use Shift + Tab (Read previous focusable item) to navigate backwards to `*[ara-checked="false"]`
      1. Launch JAWS and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[ara-checked="false"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Shift + Tab (Read previous focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Lettuce checkbox not checked"
NarratorEdgeyes
  • Result: (pass)
    • Test Case: Use Down arrow (Read next item (scan mode)) to navigate forward to `*[ara-checked="false"]`
      1. Launch Narrator and Edge.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[ara-checked="false"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Down arrow (Read next item (scan mode))
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "checkbox unchecked. Lettuce"
  • Result: (pass)
    • Test Case: Use Up arrow (Read previous item (scan mode)) to navigate backwards to `*[ara-checked="false"]`
      1. Launch Narrator and Edge.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[ara-checked="false"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Up arrow (Read previous item (scan mode))
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "checkbox unchecked. Lettuce"
  • Result: (pass)
    • Test Case: Use Tab (Read next focusable item) to navigate forward to `*[ara-checked="false"]`
      1. Launch Narrator and Edge.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[ara-checked="false"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Sandwich Condiments. Lettuce checkbox unchecked"
  • Result: (pass)
    • Test Case: Use Shift + Tab (Read previous focusable item) to navigate backwards to `*[ara-checked="false"]`
      1. Launch Narrator and Edge.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[ara-checked="false"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Shift + Tab (Read previous focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Lettuce checkbox unchecked"
NVDAChromeyes
  • Result: (pass)
    • Test Case: Use down arrow (Read next item) to navigate forward to `*[ara-checked="false"]`
      1. Launch NVDA and Chrome.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[ara-checked="false"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: down arrow (Read next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "list with 4 items. check box not checked. Lettuce"
  • Result: (pass)
    • Test Case: Use up arrow (Read previous item) to navigate backwards to `*[ara-checked="false"]`
      1. Launch NVDA and Chrome.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[ara-checked="false"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: up arrow (Read previous item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "check box not checked. Lettuce"
  • Result: (pass)
    • Test Case: Use Tab (Read next focusable item) to navigate forward to `*[ara-checked="false"]`
      1. Launch NVDA and Chrome.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[ara-checked="false"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Lettuce checkbox not checked"
  • Result: (pass)
    • Test Case: Use Shift + Tab (Read previous focusable item) to navigate backwards to `*[ara-checked="false"]`
      1. Launch NVDA and Chrome.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[ara-checked="false"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Shift + Tab (Read previous focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Lettuce checkbox not checked"
NVDAFirefoxyes
  • Result: (pass)
    • Test Case: Use down arrow (Read next item) to navigate forward to `*[ara-checked="false"]`
      1. Launch NVDA and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[ara-checked="false"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: down arrow (Read next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "list with 4 items. check box not checked. Lettuce"
  • Result: (pass)
    • Test Case: Use up arrow (Read previous item) to navigate backwards to `*[ara-checked="false"]`
      1. Launch NVDA and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[ara-checked="false"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: up arrow (Read previous item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "check box not checked. Lettuce"
  • Result: (pass)
    • Test Case: Use Tab (Read next focusable item) to navigate forward to `*[ara-checked="false"]`
      1. Launch NVDA and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[ara-checked="false"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Lettuce checkbox not checked"
  • Result: (pass)
    • Test Case: Use Shift + Tab (Read previous focusable item) to navigate backwards to `*[ara-checked="false"]`
      1. Launch NVDA and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[ara-checked="false"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Shift + Tab (Read previous focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Lettuce checkbox not checked"
OrcaFirefoxyes
  • Result: (pass)
    • Test Case: Use down arrow (Read next item) to navigate forward to `*[ara-checked="false"]`
      1. Launch Orca and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[ara-checked="false"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: down arrow (Read next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Sandwich condiments panel, list with 4 items, lettuce checkbox not checked"
  • Result: (pass)
    • Test Case: Use Tab (Read next focusable item) to navigate forward to `*[ara-checked="false"]`
      1. Launch Orca and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[ara-checked="false"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Sandwich condiments panel, list with 4 items, lettuce checkbox not checked"
TalkBackChromeyes
  • Result: (pass)
    • Test Case: Use Swipe right (Read next item) to navigate forward into `*[ara-checked="false"]`
      1. Launch TalkBack and Chrome.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[ara-checked="false"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Swipe right (Read next item)
        • After issuing the command, virtual focus should be: within target
      6. Record results for the relevant expectations
    • Output: "Not checked, Lettuce, checkbox, in list, 4 items"
Voice Access (Android)Chromenot applicable-
Voice Control (iOS)Safarinot applicable-
Voice Control (MacOS)Safarinot applicable-
VoiceOver (iOS)Safariyes
  • Result: (pass)
    • Test Case: Use Swipe Right (Next item) to navigate forward to `*[ara-checked="false"]`
      1. Launch VoiceOver (iOS) and Safari.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[ara-checked="false"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Swipe Right (Next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Lettuce, checkbox, unchecked"
  • Result: (pass)
    • Test Case: Use Swipe Left (Previous item) to navigate backwards to `*[ara-checked="false"]`
      1. Launch VoiceOver (iOS) and Safari.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[ara-checked="false"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Swipe Left (Previous item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Lettuce, checkbox, unchecked"
VoiceOver (macOS)Safariyes
  • Result: (pass)
    • Test Case: Use VO + Right arrow (Read next item) to navigate forward to `*[ara-checked="false"]`
      1. Launch VoiceOver (macOS) and Safari.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[ara-checked="false"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: VO + Right arrow (Read next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Lettuce, unchecked, checkbox"
  • Result: (pass)
    • Test Case: Use VO + Left Arrow (Read previous item) to navigate backwards to `*[ara-checked="false"]`
      1. Launch VoiceOver (macOS) and Safari.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[ara-checked="false"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: VO + Left Arrow (Read previous item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Lettuce, unchecked, checkbox"
  • Result: (pass)
    • Test Case: Use Tab (Read next focusable item) to navigate forward to `*[ara-checked="false"]`
      1. Launch VoiceOver (macOS) and Safari.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[ara-checked="false"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Lettuce, unchecked, checkbox, Sandwich Condiments group"
  • Result: (pass)
    • Test Case: Use Shift + Tab (Read previous focusable item) to navigate backwards to `*[ara-checked="false"]`
      1. Launch VoiceOver (macOS) and Safari.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[ara-checked="false"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Shift + Tab (Read previous focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Lettuce, unchecked, checkbox"
Windows Speech RecognitionChromenot applicable-

Extended Support for: aria-checked attribute: convey the "false" value

These are less common combinations

ATBrowserHas SupportOutput
Dragon Naturally SpeakingIEnot applicable-
Dragon Naturally SpeakingFirefoxnot applicable-
JAWSEdgeunknown-
NarratorFirefoxunknown-
NarratorChromeunknown-
NarratorIEunknown-
NVDAIEunknown-
NVDAEdgeunknown-
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-
Windows Speech Recognition 1903Edge 44not applicable-
Back to top

Expectation for the aria-checked attribute: convey the "true" value - applied to the checkbox role

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

This expectation is from the aria-checked attribute feature.

Rationale:

The user needs to be able to tell that the element is checked

Strength of this expectation for different types of assistive technologies:

  • Screen Readers: MUST
  • Voice Control: NA

Examples:

  • The "true" value might be conveyed as "checked" or something similar.

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: Use Down arrow (Read next item) to navigate forward to `*[ara-checked="true"]`
      1. Launch JAWS and Chrome.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[ara-checked="true"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Down arrow (Read next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Tomato checkbox checked"
  • Result: (pass)
    • Test Case: Use Up arrow (Read previous item) to navigate backwards to `*[ara-checked="true"]`
      1. Launch JAWS and Chrome.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[ara-checked="true"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Up arrow (Read previous item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Tomato checkbox checked"
  • Result: (pass)
    • Test Case: Use Tab (Read next focusable item) to navigate forward to `*[ara-checked="true"]`
      1. Launch JAWS and Chrome.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[ara-checked="true"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Tomato checkbox checked"
  • Result: (pass)
    • Test Case: Use Shift + Tab (Read previous focusable item) to navigate backwards to `*[ara-checked="true"]`
      1. Launch JAWS and Chrome.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[ara-checked="true"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Shift + Tab (Read previous focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Tomato checkbox checked"
JAWSIEyes
  • Result: (pass)
    • Test Case: Use Down arrow (Read next item) to navigate forward to `*[ara-checked="true"]`
      1. Launch JAWS and IE.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[ara-checked="true"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Down arrow (Read next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Tomato checkbox checked"
  • Result: (pass)
    • Test Case: Use Up arrow (Read previous item) to navigate backwards to `*[ara-checked="true"]`
      1. Launch JAWS and IE.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[ara-checked="true"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Up arrow (Read previous item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Tomato checkbox checked"
  • Result: (pass)
    • Test Case: Use Tab (Read next focusable item) to navigate forward to `*[ara-checked="true"]`
      1. Launch JAWS and IE.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[ara-checked="true"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Tomato checkbox checked"
  • Result: (pass)
    • Test Case: Use Shift + Tab (Read previous focusable item) to navigate backwards to `*[ara-checked="true"]`
      1. Launch JAWS and IE.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[ara-checked="true"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Shift + Tab (Read previous focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Tomato checkbox checked"
JAWSFirefoxyes
  • Result: (pass)
    • Test Case: Use Down arrow (Read next item) to navigate forward to `*[ara-checked="true"]`
      1. Launch JAWS and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[ara-checked="true"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Down arrow (Read next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Tomato checkbox checked"
  • Result: (pass)
    • Test Case: Use Up arrow (Read previous item) to navigate backwards to `*[ara-checked="true"]`
      1. Launch JAWS and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[ara-checked="true"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Up arrow (Read previous item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Tomato checkbox checked"
  • Result: (pass)
    • Test Case: Use Tab (Read next focusable item) to navigate forward to `*[ara-checked="true"]`
      1. Launch JAWS and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[ara-checked="true"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Tomato checkbox checked"
  • Result: (pass)
    • Test Case: Use Shift + Tab (Read previous focusable item) to navigate backwards to `*[ara-checked="true"]`
      1. Launch JAWS and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[ara-checked="true"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Shift + Tab (Read previous focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Tomato checkbox checked"
NarratorEdgeyes
  • Result: (pass)
    • Test Case: Use Down arrow (Read next item (scan mode)) to navigate forward to `*[ara-checked="true"]`
      1. Launch Narrator and Edge.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[ara-checked="true"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Down arrow (Read next item (scan mode))
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "checked checkbox. Tomato"
  • Result: (pass)
    • Test Case: Use Up arrow (Read previous item (scan mode)) to navigate backwards to `*[ara-checked="true"]`
      1. Launch Narrator and Edge.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[ara-checked="true"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Up arrow (Read previous item (scan mode))
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "checked checkbox. Tomato"
  • Result: (pass)
    • Test Case: Use Tab (Read next focusable item) to navigate forward to `*[ara-checked="true"]`
      1. Launch Narrator and Edge.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[ara-checked="true"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "checked Tomato checkbox"
  • Result: (pass)
    • Test Case: Use Shift + Tab (Read previous focusable item) to navigate backwards to `*[ara-checked="true"]`
      1. Launch Narrator and Edge.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[ara-checked="true"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Shift + Tab (Read previous focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "checked Tomato checkbox"
NVDAChromeyes
  • Result: (pass)
    • Test Case: Use down arrow (Read next item) to navigate forward to `*[ara-checked="true"]`
      1. Launch NVDA and Chrome.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[ara-checked="true"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: down arrow (Read next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "check box checked. Tomato."
  • Result: (pass)
    • Test Case: Use up arrow (Read previous item) to navigate backwards to `*[ara-checked="true"]`
      1. Launch NVDA and Chrome.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[ara-checked="true"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: up arrow (Read previous item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "check box checked. Tomato."
  • Result: (pass)
    • Test Case: Use Tab (Read next focusable item) to navigate forward to `*[ara-checked="true"]`
      1. Launch NVDA and Chrome.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[ara-checked="true"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Tomato checkbox checked"
  • Result: (pass)
    • Test Case: Use Shift + Tab (Read previous focusable item) to navigate backwards to `*[ara-checked="true"]`
      1. Launch NVDA and Chrome.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[ara-checked="true"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Shift + Tab (Read previous focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Tomato checkbox checked"
NVDAFirefoxyes
  • Result: (pass)
    • Test Case: Use down arrow (Read next item) to navigate forward to `*[ara-checked="true"]`
      1. Launch NVDA and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[ara-checked="true"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: down arrow (Read next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "check box checked. Tomato."
  • Result: (pass)
    • Test Case: Use up arrow (Read previous item) to navigate backwards to `*[ara-checked="true"]`
      1. Launch NVDA and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[ara-checked="true"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: up arrow (Read previous item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "check box checked. Tomato."
  • Result: (pass)
    • Test Case: Use Tab (Read next focusable item) to navigate forward to `*[ara-checked="true"]`
      1. Launch NVDA and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[ara-checked="true"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Tomato checkbox checked"
  • Result: (pass)
    • Test Case: Use Shift + Tab (Read previous focusable item) to navigate backwards to `*[ara-checked="true"]`
      1. Launch NVDA and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[ara-checked="true"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Shift + Tab (Read previous focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Tomato checkbox checked"
OrcaFirefoxyes
  • Result: (pass)
    • Test Case: Use down arrow (Read next item) to navigate forward to `*[ara-checked="true"]`
      1. Launch Orca and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[ara-checked="true"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: down arrow (Read next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "tomato checkbox checked"
  • Result: (pass)
    • Test Case: Use Tab (Read next focusable item) to navigate forward to `*[ara-checked="true"]`
      1. Launch Orca and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[ara-checked="true"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "tomato checkbox checked"
TalkBackChromeyes
  • Result: (pass)
    • Test Case: Use Swipe right (Read next item) to navigate forward into `*[ara-checked="true"]`
      1. Launch TalkBack and Chrome.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[ara-checked="true"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Swipe right (Read next item)
        • After issuing the command, virtual focus should be: within target
      6. Record results for the relevant expectations
    • Output: "checked, Tomato, checkbox"
Voice Access (Android)Chromenot applicable-
Voice Control (iOS)Safarinot applicable-
Voice Control (MacOS)Safarinot applicable-
VoiceOver (iOS)Safariyes
  • Result: (pass)
    • Test Case: Use Swipe Right (Next item) to navigate forward to `*[ara-checked="true"]`
      1. Launch VoiceOver (iOS) and Safari.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[ara-checked="true"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Swipe Right (Next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Tomato, checkbox, checked"
  • Result: (pass)
    • Test Case: Use Swipe Left (Previous item) to navigate backwards to `*[ara-checked="true"]`
      1. Launch VoiceOver (iOS) and Safari.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[ara-checked="true"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Swipe Left (Previous item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Tomato, checkbox, checked"
VoiceOver (macOS)Safariyes
  • Result: (pass)
    • Test Case: Use VO + Right arrow (Read next item) to navigate forward to `*[ara-checked="true"]`
      1. Launch VoiceOver (macOS) and Safari.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[ara-checked="true"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: VO + Right arrow (Read next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Tomato, checked, checkbox"
  • Result: (pass)
    • Test Case: Use VO + Left Arrow (Read previous item) to navigate backwards to `*[ara-checked="true"]`
      1. Launch VoiceOver (macOS) and Safari.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[ara-checked="true"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: VO + Left Arrow (Read previous item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Tomato, checked, checkbox"
  • Result: (pass)
    • Test Case: Use Tab (Read next focusable item) to navigate forward to `*[ara-checked="true"]`
      1. Launch VoiceOver (macOS) and Safari.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[ara-checked="true"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Tomato, checked, checkbox"
  • Result: (pass)
    • Test Case: Use Shift + Tab (Read previous focusable item) to navigate backwards to `*[ara-checked="true"]`
      1. Launch VoiceOver (macOS) and Safari.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[ara-checked="true"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Shift + Tab (Read previous focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Tomato, checked, checkbox"
Windows Speech RecognitionChromenot applicable-

Extended Support for: aria-checked attribute: convey the "true" value

These are less common combinations

ATBrowserHas SupportOutput
Dragon Naturally SpeakingIEnot applicable-
Dragon Naturally SpeakingFirefoxnot applicable-
JAWSEdgeunknown-
NarratorFirefoxunknown-
NarratorChromeunknown-
NarratorIEunknown-
NVDAIEunknown-
NVDAEdgeunknown-
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-
Windows Speech Recognition 1903Edge 44not applicable-
Back to top

Expectation for the aria-labelledby attribute: contribute to the accessible name - applied to the group role

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

This expectation is from the aria-labelledby attribute feature.

Strength of this expectation for different types of assistive technologies:

  • Screen Readers: MUST
  • Voice Control: MUST

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: Use Down arrow (Read next item) to navigate forward to the start of `*[aria-labelledby]`
      1. Launch JAWS and Chrome.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[aria-labelledby]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Down arrow (Read next item)
        • After issuing the command, virtual focus should be: start of target
      6. Record results for the relevant expectations
    • Output: "Group Start, Sandwich Condiments"
  • Result: (pass)
    • Test Case: Use Up arrow (Read previous item) to navigate backwards to the start of `*[aria-labelledby]`
      1. Launch JAWS and Chrome.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[aria-labelledby]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: within target
        • Keyboard focus is: within target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Up arrow (Read previous item)
        • After issuing the command, virtual focus should be: start of target
      6. Record results for the relevant expectations
    • Output: "Group Start, Sandwich Condiments"
  • Result: (pass)
    • Test Case: Use Tab (Read next focusable item) to navigate forward into `*[aria-labelledby]`
      1. Launch JAWS and Chrome.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[aria-labelledby]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: within target
      6. Record results for the relevant expectations
    • Output: "Sandwich Condiments, Lettuce checkbox not checked"
  • Result: (pass)
    • Test Case: Use Shift + Tab (Read previous focusable item) to navigate backwards into `*[aria-labelledby]`
      1. Launch JAWS and Chrome.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[aria-labelledby]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Shift + Tab (Read previous focusable item)
        • After issuing the command, virtual focus should be: within target
      6. Record results for the relevant expectations
    • Output: "Sandwich Condiments, Sprouts checkbox not checked"
Notes: Pressing the TAB or SHIFT+TAB keys to focus the first (or last) checkbox in the group caused the group label to be announced
JAWSIEyes
  • Result: (pass)
    • Test Case: Use Down arrow (Read next item) to navigate forward to the start of `*[aria-labelledby]`
      1. Launch JAWS and IE.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[aria-labelledby]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Down arrow (Read next item)
        • After issuing the command, virtual focus should be: start of target
      6. Record results for the relevant expectations
    • Output: "Group Start, Sandwich Condiments"
  • Result: (pass)
    • Test Case: Use Up arrow (Read previous item) to navigate backwards to the start of `*[aria-labelledby]`
      1. Launch JAWS and IE.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[aria-labelledby]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: within target
        • Keyboard focus is: within target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Up arrow (Read previous item)
        • After issuing the command, virtual focus should be: start of target
      6. Record results for the relevant expectations
    • Output: "Group Start, Sandwich Condiments"
  • Result: (pass)
    • Test Case: Use Tab (Read next focusable item) to navigate forward into `*[aria-labelledby]`
      1. Launch JAWS and IE.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[aria-labelledby]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: within target
      6. Record results for the relevant expectations
    • Output: "Sandwich Condiments, Lettuce checkbox not checked"
  • Result: (pass)
    • Test Case: Use Shift + Tab (Read previous focusable item) to navigate backwards into `*[aria-labelledby]`
      1. Launch JAWS and IE.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[aria-labelledby]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Shift + Tab (Read previous focusable item)
        • After issuing the command, virtual focus should be: within target
      6. Record results for the relevant expectations
    • Output: "Sandwich Condiments, Sprouts checkbox not checked"
Notes: Pressing the TAB or SHIFT+TAB keys to focus the first (or last) checkbox in the group caused the group label to be announced
JAWSFirefoxyes
  • Result: (pass)
    • Test Case: Use Down arrow (Read next item) to navigate forward to the start of `*[aria-labelledby]`
      1. Launch JAWS and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[aria-labelledby]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Down arrow (Read next item)
        • After issuing the command, virtual focus should be: start of target
      6. Record results for the relevant expectations
    • Output: "Group Start, Sandwich Condiments"
  • Result: (pass)
    • Test Case: Use Up arrow (Read previous item) to navigate backwards to the start of `*[aria-labelledby]`
      1. Launch JAWS and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[aria-labelledby]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: within target
        • Keyboard focus is: within target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Up arrow (Read previous item)
        • After issuing the command, virtual focus should be: start of target
      6. Record results for the relevant expectations
    • Output: "Group Start, Sandwich Condiments"
  • Result: (pass)
    • Test Case: Use Tab (Read next focusable item) to navigate forward into `*[aria-labelledby]`
      1. Launch JAWS and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[aria-labelledby]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: within target
      6. Record results for the relevant expectations
    • Output: "Sandwich Condiments, Lettuce checkbox not checked"
  • Result: (pass)
    • Test Case: Use Shift + Tab (Read previous focusable item) to navigate backwards into `*[aria-labelledby]`
      1. Launch JAWS and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[aria-labelledby]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Shift + Tab (Read previous focusable item)
        • After issuing the command, virtual focus should be: within target
      6. Record results for the relevant expectations
    • Output: "Sandwich Condiments, Sprouts checkbox not checked"
Notes: Pressing the TAB or SHIFT+TAB keys to focus the first (or last) checkbox in the group caused the group label to be announced
NarratorEdgeyes
  • Result: (pass)
    • Test Case: Use Tab (Read next focusable item) to navigate forward into `*[aria-labelledby]`
      1. Launch Narrator and Edge.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[aria-labelledby]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: within target
      6. Record results for the relevant expectations
    • Output: "Sandwich Condiments. Unchecked lettuce checkbox"
  • Result: (pass)
    • Test Case: Use Shift + Tab (Read previous focusable item) to navigate backwards into `*[aria-labelledby]`
      1. Launch Narrator and Edge.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[aria-labelledby]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Shift + Tab (Read previous focusable item)
        • After issuing the command, virtual focus should be: within target
      6. Record results for the relevant expectations
    • Output: "Sandwich Condiments. Unchecked Sprouts checkbox"
NVDAChromeyes
  • Result: (pass)
    • Test Case: Use Tab (Read next focusable item) to navigate forward into `*[aria-labelledby]`
      1. Launch NVDA and Chrome.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[aria-labelledby]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: within target
      6. Record results for the relevant expectations
    • Output: "Sandwich Condiments grouping. list with 4 items. Lettuce. check box not checked"
  • Result: (pass)
    • Test Case: Use Shift + Tab (Read previous focusable item) to navigate backwards into `*[aria-labelledby]`
      1. Launch NVDA and Chrome.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[aria-labelledby]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Shift + Tab (Read previous focusable item)
        • After issuing the command, virtual focus should be: within target
      6. Record results for the relevant expectations
    • Output: "Sandwich Condiments grouping. list with 4 items. Sprouts. check box not checked"
NVDAFirefoxyes
  • Result: (pass)
    • Test Case: Use Tab (Read next focusable item) to navigate forward into `*[aria-labelledby]`
      1. Launch NVDA and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[aria-labelledby]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: within target
      6. Record results for the relevant expectations
    • Output: "Sandwich Condiments grouping. list with 4 items. Lettuce. check box not checked"
  • Result: (pass)
    • Test Case: Use Shift + Tab (Read previous focusable item) to navigate backwards into `*[aria-labelledby]`
      1. Launch NVDA and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[aria-labelledby]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Shift + Tab (Read previous focusable item)
        • After issuing the command, virtual focus should be: within target
      6. Record results for the relevant expectations
    • Output: "Sandwich Condiments grouping. list with 4 items. Sprouts. check box not checked"
OrcaFirefoxyes
  • Result: (pass)
    • Test Case: Use down arrow (Read next item) to navigate forward to `*[aria-labelledby]`
      1. Launch Orca and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[aria-labelledby]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: down arrow (Read next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Sandwich condiments panel, list with 4 items, lettuce checkbox not checked"
  • Result: (pass)
    • Test Case: Use Tab (Read next focusable item) to navigate forward to `*[aria-labelledby]`
      1. Launch Orca and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[aria-labelledby]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Sandwich condiments panel, list with 4 items, lettuce checkbox not checked"
TalkBackChromenone
  • Result: (fail)
    • Test Case: Use Swipe right (Read next item) to navigate forward into `*[aria-labelledby]`
      1. Launch TalkBack and Chrome.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[aria-labelledby]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Swipe right (Read next item)
        • After issuing the command, virtual focus should be: within target
      6. Record results for the relevant expectations
    • Output: "Not checked, Lettuce, checkbox, in list, 4 items"
Voice Access (Android)Chromenot applicable-
Voice Control (iOS)Safarinot applicable-
Voice Control (MacOS)Safarinot applicable-
VoiceOver (iOS)Safarinone
  • Result: (fail)
    • Test Case: Use Swipe Right (Next item) to navigate forward into `*[aria-labelledby]`
      1. Launch VoiceOver (iOS) and Safari.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[aria-labelledby]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Swipe Right (Next item)
        • After issuing the command, virtual focus should be: within target
      6. Record results for the relevant expectations
    • Output: "Lettuce, checkbox, unchecked"
  • Result: (fail)
    • Test Case: Use Swipe Left (Previous item) to navigate backwards into `*[aria-labelledby]`
      1. Launch VoiceOver (iOS) and Safari.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[aria-labelledby]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Swipe Left (Previous item)
        • After issuing the command, virtual focus should be: within target
      6. Record results for the relevant expectations
    • Output: "Lettuce, checkbox, unchecked"
VoiceOver (macOS)Safariyes
  • Result: (pass)
    • Test Case: Use VO + Right arrow (Read next item) to navigate forward to the start of `*[aria-labelledby]`
      1. Launch VoiceOver (macOS) and Safari.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[aria-labelledby]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: VO + Right arrow (Read next item)
        • After issuing the command, virtual focus should be: start of target
      6. Record results for the relevant expectations
    • Output: "Sandwich Condiments, group"
  • Result: (pass)
    • Test Case: Use VO + Right arrow (Read next item) to navigate forwards to the end of `*[aria-labelledby]`
      1. Launch VoiceOver (macOS) and Safari.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[aria-labelledby]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: within target
        • Keyboard focus is: within target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: VO + Right arrow (Read next item)
        • After issuing the command, virtual focus should be: end of target
      6. Record results for the relevant expectations
    • Output: "end of Sandwich Condiments, group"
  • Result: (pass)
    • Test Case: Use VO + Left Arrow (Read previous item) to navigate backwards to the end of `*[aria-labelledby]`
      1. Launch VoiceOver (macOS) and Safari.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[aria-labelledby]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: VO + Left Arrow (Read previous item)
        • After issuing the command, virtual focus should be: end of target
      6. Record results for the relevant expectations
    • Output: "end of Sandwich Condiments, group"
  • Result: (pass)
    • Test Case: Use VO + Left Arrow (Read previous item) to navigate backwards to the start of `*[aria-labelledby]`
      1. Launch VoiceOver (macOS) and Safari.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[aria-labelledby]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: within target
        • Keyboard focus is: within target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: VO + Left Arrow (Read previous item)
        • After issuing the command, virtual focus should be: start of target
      6. Record results for the relevant expectations
    • Output: "Sandwich Condiments, group"
  • Result: (pass)
    • Test Case: Use Tab (Read next focusable item) to navigate forward into `*[aria-labelledby]`
      1. Launch VoiceOver (macOS) and Safari.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[aria-labelledby]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: within target
      6. Record results for the relevant expectations
    • Output: "Lettuce, unchecked, checkbox, Sandwich Condiments, group"
  • Result: (pass)
    • Test Case: Use Shift + Tab (Read previous focusable item) to navigate backwards into `*[aria-labelledby]`
      1. Launch VoiceOver (macOS) and Safari.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[aria-labelledby]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Shift + Tab (Read previous focusable item)
        • After issuing the command, virtual focus should be: within target
      6. Record results for the relevant expectations
    • Output: "Sprouts, unchecked, checkbox, Sandwich Condiments, group"
Windows Speech RecognitionChromenot applicable-

Extended Support for: aria-labelledby attribute: contribute to the accessible name

These are less common combinations

ATBrowserHas SupportOutput
Dragon Naturally SpeakingIEnot applicable-
Dragon Naturally SpeakingFirefoxnot applicable-
JAWSEdgeunknown-
NarratorFirefoxunknown-
NarratorChromeunknown-
NarratorIEunknown-
NVDAIEunknown-
NVDAEdgeunknown-
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-
Windows Speech Recognition 1903Edge 44not applicable-
Back to top

Expectation for the checkbox role: convey its name

This expectation is from the checkbox role feature.

Rationale:

The user needs to know the purpose of the checkbox.

Strength of this expectation for different types of assistive technologies:

  • Screen Readers: MUST
  • Voice Control: MUST

Grading method:

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

Notes:

For form inputs - commands to read line by line (down and up arrows in most windows screen readers) will not always result in the name being explicitly conveyed when the virtual focus is moved to an input where the label is visually displayed and programmatically associated with the input. This is acceptable because the name is implied by the fact that it should be naturally found in the reading order. Some screen readers choose to not convey the name in these cases, likely in an effort to reduce verbosity.

ATBrowserHas SupportOutput
Dragon Naturally SpeakingChromeyes
  • Result: (pass)
    • Test Case: Use "Click <text>" (Activate item by name)
      1. Launch Dragon Naturally Speaking and Chrome.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="checkbox"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Issue the command: "Click <text>" (Activate item by name)
      5. Record results for the relevant expectations
    • Output: checkbox was flagged for disambiguation
    • Command Notes: said "click check box"
JAWSChromeyes
  • Result: (pass)
    • Test Case: Use Down arrow (Read next item) to navigate forward to `*[role="checkbox"]`
      1. Launch JAWS and Chrome.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="checkbox"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Down arrow (Read next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Lettuce checkbox not checked"
  • Result: (pass)
    • Test Case: Use Up arrow (Read previous item) to navigate backwards to `*[role="checkbox"]`
      1. Launch JAWS and Chrome.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="checkbox"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Up arrow (Read previous item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Lettuce checkbox not checked"
  • Result: (pass)
    • Test Case: Use Tab (Read next focusable item) to navigate forward to `*[role="checkbox"]`
      1. Launch JAWS and Chrome.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="checkbox"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Lettuce checkbox not checked"
  • Result: (pass)
    • Test Case: Use Shift + Tab (Read previous focusable item) to navigate backwards to `*[role="checkbox"]`
      1. Launch JAWS and Chrome.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="checkbox"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Shift + Tab (Read previous focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Lettuce checkbox not checked"
JAWSIEyes
  • Result: (pass)
    • Test Case: Use Down arrow (Read next item) to navigate forward to `*[role="checkbox"]`
      1. Launch JAWS and IE.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="checkbox"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Down arrow (Read next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Lettuce checkbox not checked"
  • Result: (pass)
    • Test Case: Use Up arrow (Read previous item) to navigate backwards to `*[role="checkbox"]`
      1. Launch JAWS and IE.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="checkbox"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Up arrow (Read previous item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Lettuce checkbox not checked"
  • Result: (pass)
    • Test Case: Use Tab (Read next focusable item) to navigate forward to `*[role="checkbox"]`
      1. Launch JAWS and IE.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="checkbox"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Lettuce checkbox not checked"
  • Result: (pass)
    • Test Case: Use Shift + Tab (Read previous focusable item) to navigate backwards to `*[role="checkbox"]`
      1. Launch JAWS and IE.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="checkbox"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Shift + Tab (Read previous focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Lettuce checkbox not checked"
JAWSFirefoxyes
  • Result: (pass)
    • Test Case: Use Down arrow (Read next item) to navigate forward to `*[role="checkbox"]`
      1. Launch JAWS and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="checkbox"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Down arrow (Read next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Lettuce checkbox not checked"
  • Result: (pass)
    • Test Case: Use Up arrow (Read previous item) to navigate backwards to `*[role="checkbox"]`
      1. Launch JAWS and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="checkbox"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Up arrow (Read previous item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Lettuce checkbox not checked"
  • Result: (pass)
    • Test Case: Use Tab (Read next focusable item) to navigate forward to `*[role="checkbox"]`
      1. Launch JAWS and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="checkbox"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Lettuce checkbox not checked"
  • Result: (pass)
    • Test Case: Use Shift + Tab (Read previous focusable item) to navigate backwards to `*[role="checkbox"]`
      1. Launch JAWS and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="checkbox"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Shift + Tab (Read previous focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Lettuce checkbox not checked"
NarratorEdgeyes
  • Result: (pass)
    • Test Case: Use Down arrow (Read next item (scan mode)) to navigate forward to `*[role="checkbox"]`
      1. Launch Narrator and Edge.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="checkbox"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Down arrow (Read next item (scan mode))
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "checkbox unchecked. Lettuce"
  • Result: (pass)
    • Test Case: Use Up arrow (Read previous item (scan mode)) to navigate backwards to `*[role="checkbox"]`
      1. Launch Narrator and Edge.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="checkbox"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Up arrow (Read previous item (scan mode))
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "checkbox unchecked. Lettuce"
  • Result: (pass)
    • Test Case: Use Tab (Read next focusable item) to navigate forward to `*[role="checkbox"]`
      1. Launch Narrator and Edge.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="checkbox"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Sandwich Condiments. Lettuce checkbox unchecked"
  • Result: (pass)
    • Test Case: Use Shift + Tab (Read previous focusable item) to navigate backwards to `*[role="checkbox"]`
      1. Launch Narrator and Edge.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="checkbox"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Shift + Tab (Read previous focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Lettuce checkbox unchecked"
NVDAChromeyes
  • Result: (pass)
    • Test Case: Use down arrow (Read next item) to navigate forward to `*[role="checkbox"]`
      1. Launch NVDA and Chrome.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="checkbox"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: down arrow (Read next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "list with 4 items. check box not checked. Lettuce"
  • Result: (pass)
    • Test Case: Use up arrow (Read previous item) to navigate backwards to `*[role="checkbox"]`
      1. Launch NVDA and Chrome.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="checkbox"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: up arrow (Read previous item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "check box not checked. Lettuce"
  • Result: (pass)
    • Test Case: Use Tab (Read next focusable item) to navigate forward to `*[role="checkbox"]`
      1. Launch NVDA and Chrome.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="checkbox"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Lettuce checkbox not checked"
  • Result: (pass)
    • Test Case: Use Shift + Tab (Read previous focusable item) to navigate backwards to `*[role="checkbox"]`
      1. Launch NVDA and Chrome.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="checkbox"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Shift + Tab (Read previous focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Lettuce checkbox not checked"
NVDAFirefoxyes
  • Result: (pass)
    • Test Case: Use down arrow (Read next item) to navigate forward to `*[role="checkbox"]`
      1. Launch NVDA and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="checkbox"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: down arrow (Read next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "list with 4 items. check box not checked. Lettuce"
  • Result: (pass)
    • Test Case: Use up arrow (Read previous item) to navigate backwards to `*[role="checkbox"]`
      1. Launch NVDA and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="checkbox"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: up arrow (Read previous item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "check box not checked. Lettuce"
  • Result: (pass)
    • Test Case: Use Tab (Read next focusable item) to navigate forward to `*[role="checkbox"]`
      1. Launch NVDA and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="checkbox"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Lettuce checkbox not checked"
  • Result: (pass)
    • Test Case: Use Shift + Tab (Read previous focusable item) to navigate backwards to `*[role="checkbox"]`
      1. Launch NVDA and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="checkbox"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Shift + Tab (Read previous focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Lettuce checkbox not checked"
OrcaFirefoxyes
  • Result: (pass)
    • Test Case: Use down arrow (Read next item) to navigate forward to `*[role="checkbox"]`
      1. Launch Orca and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="checkbox"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: down arrow (Read next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Sandwich condiments panel, list with 4 items, lettuce checkbox not checked"
  • Result: (pass)
    • Test Case: Use Tab (Read next focusable item) to navigate forward to `*[role="checkbox"]`
      1. Launch Orca and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="checkbox"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Sandwich condiments panel, list with 4 items, lettuce checkbox not checked"
TalkBackChromeyes
  • Result: (pass)
    • Test Case: Use Swipe right (Read next item) to navigate forward into `*[role="checkbox"]`
      1. Launch TalkBack and Chrome.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="checkbox"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Swipe right (Read next item)
        • After issuing the command, virtual focus should be: within target
      6. Record results for the relevant expectations
    • Output: "Not checked, Lettuce, checkbox, in list, 4 items"
Voice Access (Android)Chromeyes
  • Result: (pass)
    • Test Case: Use "Tap <text>" or just "<text>" (Activate item by name)
      1. Launch Voice Access (Android) and Chrome.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="checkbox"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Issue the command: "Tap <text>" or just "<text>" (Activate item by name)
      5. Record results for the relevant expectations
    • Output: checkbox was checked
    • Command Notes: said "tap lettuce"
Voice Control (iOS)Safariyes
  • Result: (pass)
    • Test Case: Use "Tap <text>" (Activate item by name)
      1. Launch Voice Control (iOS) and Safari.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="checkbox"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Issue the command: "Tap <text>" (Activate item by name)
      5. Record results for the relevant expectations
    • Output: checkbox was checked
    • Command Notes: said "tap lettuce"
Voice Control (MacOS)Safariyes
  • Result: (pass)
    • Test Case: Use "Click <text>" (Activate item by name)
      1. Launch Voice Control (MacOS) and Safari.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="checkbox"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Issue the command: "Click <text>" (Activate item by name)
      5. Record results for the relevant expectations
    • Output: checkbox was checked
    • Command Notes: said "click lettuce"
VoiceOver (iOS)Safariyes
  • Result: (pass)
    • Test Case: Use Swipe Right (Next item) to navigate forward to `*[role="checkbox"]`
      1. Launch VoiceOver (iOS) and Safari.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="checkbox"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Swipe Right (Next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Lettuce, checkbox, unchecked"
  • Result: (pass)
    • Test Case: Use Swipe Left (Previous item) to navigate backwards to `*[role="checkbox"]`
      1. Launch VoiceOver (iOS) and Safari.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="checkbox"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Swipe Left (Previous item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Lettuce, checkbox, unchecked"
VoiceOver (macOS)Safariyes
  • Result: (pass)
    • Test Case: Use VO + Right arrow (Read next item) to navigate forward to `*[role="checkbox"]`
      1. Launch VoiceOver (macOS) and Safari.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="checkbox"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: VO + Right arrow (Read next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Lettuce, unchecked, checkbox"
  • Result: (pass)
    • Test Case: Use VO + Left Arrow (Read previous item) to navigate backwards to `*[role="checkbox"]`
      1. Launch VoiceOver (macOS) and Safari.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="checkbox"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: VO + Left Arrow (Read previous item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Lettuce, unchecked, checkbox"
  • Result: (pass)
    • Test Case: Use Tab (Read next focusable item) to navigate forward to `*[role="checkbox"]`
      1. Launch VoiceOver (macOS) and Safari.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="checkbox"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Lettuce, unchecked, checkbox, Sandwich Condiments group"
  • Result: (pass)
    • Test Case: Use Shift + Tab (Read previous focusable item) to navigate backwards to `*[role="checkbox"]`
      1. Launch VoiceOver (macOS) and Safari.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="checkbox"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Shift + Tab (Read previous focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Lettuce, unchecked, checkbox"
Windows Speech RecognitionChromeyes
  • Result: (pass)
    • Test Case: Use "Click <text>" (Activate item by name)
      1. Launch Windows Speech Recognition and Chrome.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="checkbox"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Issue the command: "Click <text>" (Activate item by name)
      5. Record results for the relevant expectations
    • Output: checkmark was unchecked
    • Command Notes: said "click tomato"

Extended Support for: checkbox role: convey its name

These are less common combinations

ATBrowserHas SupportOutput
Dragon Naturally SpeakingIEunknown-
Dragon Naturally SpeakingFirefoxunknown-
JAWSEdgeunknown-
NarratorFirefoxunknown-
NarratorChromeunknown-
NarratorIEunknown-
NVDAIEunknown-
NVDAEdgeunknown-
TalkBackFirefoxunknown-
Voice Access (Android)Firefoxunknown-
VoiceOver (iOS)Chromeunknown-
VoiceOver (macOS)Chromeunknown-
VoiceOver (macOS)Firefoxunknown-
OrcaChromeunknown-
Voice Control (MacOS)Chromeunknown-
Voice Control (MacOS)Firefoxunknown-
Windows Speech Recognition 1903Edge 44yes
  • Result: (pass)
    • Test Case: Use "Click <text>" (Activate item by name)
      1. Launch Windows Speech Recognition and Edge.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="checkbox"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Issue the command: "Click <text>" (Activate item by name)
      5. Record results for the relevant expectations
    • Output: checkmark was unchecked
    • Command Notes: said "click tomato"
Back to top

Expectation for the checkbox role: convey its role

This expectation is from the checkbox role feature.

Rationale:

The user needs to know that the element has checkbox behavior.

Strength of this expectation for different types of assistive technologies:

  • Screen Readers: MUST
  • Voice Control: MUST

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 SpeakingChromeyes
  • Result: (pass)
    • Test Case: Use "Click <text>" (Activate item by name)
      1. Launch Dragon Naturally Speaking and Chrome.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="checkbox"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Issue the command: "Click <text>" (Activate item by name)
      5. Record results for the relevant expectations
    • Output: checkbox was flagged for disambiguation
    • Command Notes: said "click check box"
JAWSChromeyes
  • Result: (pass)
    • Test Case: Use Down arrow (Read next item) to navigate forward to `*[role="checkbox"]`
      1. Launch JAWS and Chrome.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="checkbox"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Down arrow (Read next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Lettuce checkbox not checked"
  • Result: (pass)
    • Test Case: Use Up arrow (Read previous item) to navigate backwards to `*[role="checkbox"]`
      1. Launch JAWS and Chrome.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="checkbox"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Up arrow (Read previous item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Lettuce checkbox not checked"
  • Result: (pass)
    • Test Case: Use Tab (Read next focusable item) to navigate forward to `*[role="checkbox"]`
      1. Launch JAWS and Chrome.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="checkbox"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Lettuce checkbox not checked"
  • Result: (pass)
    • Test Case: Use Shift + Tab (Read previous focusable item) to navigate backwards to `*[role="checkbox"]`
      1. Launch JAWS and Chrome.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="checkbox"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Shift + Tab (Read previous focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Lettuce checkbox not checked"
JAWSIEyes
  • Result: (pass)
    • Test Case: Use Down arrow (Read next item) to navigate forward to `*[role="checkbox"]`
      1. Launch JAWS and IE.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="checkbox"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Down arrow (Read next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Lettuce checkbox not checked"
  • Result: (pass)
    • Test Case: Use Up arrow (Read previous item) to navigate backwards to `*[role="checkbox"]`
      1. Launch JAWS and IE.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="checkbox"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Up arrow (Read previous item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Lettuce checkbox not checked"
  • Result: (pass)
    • Test Case: Use Tab (Read next focusable item) to navigate forward to `*[role="checkbox"]`
      1. Launch JAWS and IE.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="checkbox"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Lettuce checkbox not checked"
  • Result: (pass)
    • Test Case: Use Shift + Tab (Read previous focusable item) to navigate backwards to `*[role="checkbox"]`
      1. Launch JAWS and IE.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="checkbox"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Shift + Tab (Read previous focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Lettuce checkbox not checked"
JAWSFirefoxyes
  • Result: (pass)
    • Test Case: Use Down arrow (Read next item) to navigate forward to `*[role="checkbox"]`
      1. Launch JAWS and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="checkbox"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Down arrow (Read next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Lettuce checkbox not checked"
  • Result: (pass)
    • Test Case: Use Up arrow (Read previous item) to navigate backwards to `*[role="checkbox"]`
      1. Launch JAWS and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="checkbox"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Up arrow (Read previous item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Lettuce checkbox not checked"
  • Result: (pass)
    • Test Case: Use Tab (Read next focusable item) to navigate forward to `*[role="checkbox"]`
      1. Launch JAWS and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="checkbox"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Lettuce checkbox not checked"
  • Result: (pass)
    • Test Case: Use Shift + Tab (Read previous focusable item) to navigate backwards to `*[role="checkbox"]`
      1. Launch JAWS and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="checkbox"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Shift + Tab (Read previous focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Lettuce checkbox not checked"
NarratorEdgeyes
  • Result: (pass)
    • Test Case: Use Down arrow (Read next item (scan mode)) to navigate forward to `*[role="checkbox"]`
      1. Launch Narrator and Edge.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="checkbox"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Down arrow (Read next item (scan mode))
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "checkbox unchecked. Lettuce"
  • Result: (pass)
    • Test Case: Use Up arrow (Read previous item (scan mode)) to navigate backwards to `*[role="checkbox"]`
      1. Launch Narrator and Edge.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="checkbox"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Up arrow (Read previous item (scan mode))
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "checkbox unchecked. Lettuce"
  • Result: (pass)
    • Test Case: Use Tab (Read next focusable item) to navigate forward to `*[role="checkbox"]`
      1. Launch Narrator and Edge.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="checkbox"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Sandwich Condiments. Lettuce checkbox unchecked"
  • Result: (pass)
    • Test Case: Use Shift + Tab (Read previous focusable item) to navigate backwards to `*[role="checkbox"]`
      1. Launch Narrator and Edge.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="checkbox"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Shift + Tab (Read previous focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Lettuce checkbox unchecked"
NVDAChromeyes
  • Result: (pass)
    • Test Case: Use down arrow (Read next item) to navigate forward to `*[role="checkbox"]`
      1. Launch NVDA and Chrome.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="checkbox"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: down arrow (Read next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "list with 4 items. check box not checked. Lettuce"
  • Result: (pass)
    • Test Case: Use up arrow (Read previous item) to navigate backwards to `*[role="checkbox"]`
      1. Launch NVDA and Chrome.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="checkbox"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: up arrow (Read previous item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "check box not checked. Lettuce"
  • Result: (pass)
    • Test Case: Use Tab (Read next focusable item) to navigate forward to `*[role="checkbox"]`
      1. Launch NVDA and Chrome.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="checkbox"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Lettuce checkbox not checked"
  • Result: (pass)
    • Test Case: Use Shift + Tab (Read previous focusable item) to navigate backwards to `*[role="checkbox"]`
      1. Launch NVDA and Chrome.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="checkbox"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Shift + Tab (Read previous focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Lettuce checkbox not checked"
NVDAFirefoxyes
  • Result: (pass)
    • Test Case: Use down arrow (Read next item) to navigate forward to `*[role="checkbox"]`
      1. Launch NVDA and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="checkbox"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: down arrow (Read next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "list with 4 items. check box not checked. Lettuce"
  • Result: (pass)
    • Test Case: Use up arrow (Read previous item) to navigate backwards to `*[role="checkbox"]`
      1. Launch NVDA and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="checkbox"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: up arrow (Read previous item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "check box not checked. Lettuce"
  • Result: (pass)
    • Test Case: Use Tab (Read next focusable item) to navigate forward to `*[role="checkbox"]`
      1. Launch NVDA and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="checkbox"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Lettuce checkbox not checked"
  • Result: (pass)
    • Test Case: Use Shift + Tab (Read previous focusable item) to navigate backwards to `*[role="checkbox"]`
      1. Launch NVDA and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="checkbox"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Shift + Tab (Read previous focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Lettuce checkbox not checked"
OrcaFirefoxyes
  • Result: (pass)
    • Test Case: Use down arrow (Read next item) to navigate forward to `*[role="checkbox"]`
      1. Launch Orca and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="checkbox"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: down arrow (Read next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Sandwich condiments panel, list with 4 items, lettuce checkbox not checked"
  • Result: (pass)
    • Test Case: Use Tab (Read next focusable item) to navigate forward to `*[role="checkbox"]`
      1. Launch Orca and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="checkbox"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Sandwich condiments panel, list with 4 items, lettuce checkbox not checked"
TalkBackChromeyes
  • Result: (pass)
    • Test Case: Use Swipe right (Read next item) to navigate forward into `*[role="checkbox"]`
      1. Launch TalkBack and Chrome.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="checkbox"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Swipe right (Read next item)
        • After issuing the command, virtual focus should be: within target
      6. Record results for the relevant expectations
    • Output: "Not checked, Lettuce, checkbox, in list, 4 items"
Voice Access (Android)Chromeyes
  • Result: (pass)
    • Test Case: Use "Show numbers" (Turn on the numbers overlay)
      1. Launch Voice Access (Android) and Chrome.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="checkbox"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Issue the command: "Show numbers" (Turn on the numbers overlay)
      5. Record results for the relevant expectations
    • Output: role is flagged with a number
    • Command Notes: said "show numbers"
Voice Control (iOS)Safarinot applicable-
Voice Control (MacOS)Safariyes
  • Result: (pass)
    • Test Case: Use "Show numbers" (Turn on the numbers overlay)
      1. Launch Voice Control (MacOS) and Safari.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="checkbox"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Issue the command: "Show numbers" (Turn on the numbers overlay)
      5. Record results for the relevant expectations
    • Output: role is flagged with a number
    • Command Notes: said "show numbers"
VoiceOver (iOS)Safariyes
  • Result: (pass)
    • Test Case: Use Swipe Right (Next item) to navigate forward to `*[role="checkbox"]`
      1. Launch VoiceOver (iOS) and Safari.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="checkbox"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Swipe Right (Next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Lettuce, checkbox, unchecked"
  • Result: (pass)
    • Test Case: Use Swipe Left (Previous item) to navigate backwards to `*[role="checkbox"]`
      1. Launch VoiceOver (iOS) and Safari.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="checkbox"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Swipe Left (Previous item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Lettuce, checkbox, unchecked"
VoiceOver (macOS)Safariyes
  • Result: (pass)
    • Test Case: Use VO + Right arrow (Read next item) to navigate forward to `*[role="checkbox"]`
      1. Launch VoiceOver (macOS) and Safari.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="checkbox"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: VO + Right arrow (Read next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Lettuce, unchecked, checkbox"
  • Result: (pass)
    • Test Case: Use VO + Left Arrow (Read previous item) to navigate backwards to `*[role="checkbox"]`
      1. Launch VoiceOver (macOS) and Safari.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="checkbox"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: VO + Left Arrow (Read previous item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Lettuce, unchecked, checkbox"
  • Result: (pass)
    • Test Case: Use Tab (Read next focusable item) to navigate forward to `*[role="checkbox"]`
      1. Launch VoiceOver (macOS) and Safari.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="checkbox"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Lettuce, unchecked, checkbox, Sandwich Condiments group"
  • Result: (pass)
    • Test Case: Use Shift + Tab (Read previous focusable item) to navigate backwards to `*[role="checkbox"]`
      1. Launch VoiceOver (macOS) and Safari.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="checkbox"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Shift + Tab (Read previous focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Lettuce, unchecked, checkbox"
Windows Speech RecognitionChromeyes
  • Result: (pass)
    • Test Case: Use "Show numbers" (Turn on the numbers overlay)
      1. Launch Windows Speech Recognition and Chrome.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="checkbox"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Issue the command: "Show numbers" (Turn on the numbers overlay)
      5. Record results for the relevant expectations
    • Output: role was flagged with a number
    • Command Notes: said "show numbers"

Extended Support for: checkbox role: convey its role

These are less common combinations

ATBrowserHas SupportOutput
Dragon Naturally SpeakingIEunknown-
Dragon Naturally SpeakingFirefoxunknown-
JAWSEdgeunknown-
NarratorFirefoxunknown-
NarratorChromeunknown-
NarratorIEunknown-
NVDAIEunknown-
NVDAEdgeunknown-
TalkBackFirefoxunknown-
Voice Access (Android)Firefoxunknown-
VoiceOver (iOS)Chromeunknown-
VoiceOver (macOS)Chromeunknown-
VoiceOver (macOS)Firefoxunknown-
OrcaChromeunknown-
Voice Control (MacOS)Chromeunknown-
Voice Control (MacOS)Firefoxunknown-
Windows Speech Recognition 1903Edge 44yes
  • Result: (pass)
    • Test Case: Use "Show numbers" (Turn on the numbers overlay)
      1. Launch Windows Speech Recognition and Edge.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="checkbox"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Issue the command: "Show numbers" (Turn on the numbers overlay)
      5. Record results for the relevant expectations
    • Output: role was flagged with a number
    • Command Notes: said "show numbers"
Back to top

Expectation for the group role: convey the name if named

This expectation is from the group role feature.

Rationale:

A screen reader user needs to be aware of the name of group

Strength of this expectation for different types of assistive technologies:

  • Screen Readers: MUST
  • Voice Control: NA

Examples:

  • The accessible name of the group is announced when entering the group.

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: Use Down arrow (Read next item) to navigate forward to the start of `*[role="group"]`
      1. Launch JAWS and Chrome.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="group"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Down arrow (Read next item)
        • After issuing the command, virtual focus should be: start of target
      6. Record results for the relevant expectations
    • Output: "Group Start, Sandwich Condiments"
  • Result: (pass)
    • Test Case: Use Up arrow (Read previous item) to navigate backwards to the start of `*[role="group"]`
      1. Launch JAWS and Chrome.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="group"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: within target
        • Keyboard focus is: within target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Up arrow (Read previous item)
        • After issuing the command, virtual focus should be: start of target
      6. Record results for the relevant expectations
    • Output: "Group Start, Sandwich Condiments"
  • Result: (pass)
    • Test Case: Use Tab (Read next focusable item) to navigate forward into `*[role="group"]`
      1. Launch JAWS and Chrome.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="group"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: within target
      6. Record results for the relevant expectations
    • Output: "Sandwich Condiments, Lettuce checkbox not checked"
  • Result: (pass)
    • Test Case: Use Shift + Tab (Read previous focusable item) to navigate backwards into `*[role="group"]`
      1. Launch JAWS and Chrome.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="group"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Shift + Tab (Read previous focusable item)
        • After issuing the command, virtual focus should be: within target
      6. Record results for the relevant expectations
    • Output: "Sandwich Condiments, Sprouts checkbox not checked"
JAWSIEyes
  • Result: (pass)
    • Test Case: Use Down arrow (Read next item) to navigate forward to the start of `*[role="group"]`
      1. Launch JAWS and IE.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="group"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Down arrow (Read next item)
        • After issuing the command, virtual focus should be: start of target
      6. Record results for the relevant expectations
    • Output: "Group Start, Sandwich Condiments"
  • Result: (pass)
    • Test Case: Use Up arrow (Read previous item) to navigate backwards to the start of `*[role="group"]`
      1. Launch JAWS and IE.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="group"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: within target
        • Keyboard focus is: within target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Up arrow (Read previous item)
        • After issuing the command, virtual focus should be: start of target
      6. Record results for the relevant expectations
    • Output: "Group Start, Sandwich Condiments"
  • Result: (pass)
    • Test Case: Use Tab (Read next focusable item) to navigate forward into `*[role="group"]`
      1. Launch JAWS and IE.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="group"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: within target
      6. Record results for the relevant expectations
    • Output: "Sandwich Condiments, Lettuce checkbox not checked"
  • Result: (pass)
    • Test Case: Use Shift + Tab (Read previous focusable item) to navigate backwards into `*[role="group"]`
      1. Launch JAWS and IE.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="group"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Shift + Tab (Read previous focusable item)
        • After issuing the command, virtual focus should be: within target
      6. Record results for the relevant expectations
    • Output: "Sandwich Condiments, Sprouts checkbox not checked"
JAWSFirefoxyes
  • Result: (pass)
    • Test Case: Use Down arrow (Read next item) to navigate forward to the start of `*[role="group"]`
      1. Launch JAWS and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="group"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Down arrow (Read next item)
        • After issuing the command, virtual focus should be: start of target
      6. Record results for the relevant expectations
    • Output: "Group Start, Sandwich Condiments"
  • Result: (pass)
    • Test Case: Use Up arrow (Read previous item) to navigate backwards to the start of `*[role="group"]`
      1. Launch JAWS and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="group"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: within target
        • Keyboard focus is: within target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Up arrow (Read previous item)
        • After issuing the command, virtual focus should be: start of target
      6. Record results for the relevant expectations
    • Output: "Group Start, Sandwich Condiments"
  • Result: (pass)
    • Test Case: Use Tab (Read next focusable item) to navigate forward into `*[role="group"]`
      1. Launch JAWS and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="group"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: within target
      6. Record results for the relevant expectations
    • Output: "Sandwich Condiments, Lettuce checkbox not checked"
  • Result: (pass)
    • Test Case: Use Shift + Tab (Read previous focusable item) to navigate backwards into `*[role="group"]`
      1. Launch JAWS and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="group"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Shift + Tab (Read previous focusable item)
        • After issuing the command, virtual focus should be: within target
      6. Record results for the relevant expectations
    • Output: "Sandwich Condiments, Sprouts checkbox not checked"
NarratorEdgepartial
  • Result: (fail)
    • Test Case: Use Down arrow (Read next item (scan mode)) to navigate forward into `*[role="group"]`
      1. Launch Narrator and Edge.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="group"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Down arrow (Read next item (scan mode))
        • After issuing the command, virtual focus should be: within target
      6. Record results for the relevant expectations
    • Output: "1 of 4, level 2e"
  • Result: (fail)
    • Test Case: Use Up arrow (Read previous item (scan mode)) to navigate backwards into `*[role="group"]`
      1. Launch Narrator and Edge.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="group"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Up arrow (Read previous item (scan mode))
        • After issuing the command, virtual focus should be: within target
      6. Record results for the relevant expectations
    • Output: "4 of 4, level 2"
  • Result: (pass)
    • Test Case: Use Tab (Read next focusable item) to navigate forward into `*[role="group"]`
      1. Launch Narrator and Edge.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="group"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: within target
      6. Record results for the relevant expectations
    • Output: "Sandwich Condiments. Unchecked lettuce checkbox"
  • Result: (pass)
    • Test Case: Use Shift + Tab (Read previous focusable item) to navigate backwards into `*[role="group"]`
      1. Launch Narrator and Edge.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="group"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Shift + Tab (Read previous focusable item)
        • After issuing the command, virtual focus should be: within target
      6. Record results for the relevant expectations
    • Output: "Sandwich Condiments. Unchecked Sprouts checkbox"
NVDAChromeyes
  • Result: (pass)
    • Test Case: Use Tab (Read next focusable item) to navigate forward into `*[role="group"]`
      1. Launch NVDA and Chrome.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="group"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: within target
      6. Record results for the relevant expectations
    • Output: "Sandwich Condiments grouping. list with 4 items. Lettuce. check box not checked"
  • Result: (pass)
    • Test Case: Use Shift + Tab (Read previous focusable item) to navigate backwards into `*[role="group"]`
      1. Launch NVDA and Chrome.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="group"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Shift + Tab (Read previous focusable item)
        • After issuing the command, virtual focus should be: within target
      6. Record results for the relevant expectations
    • Output: "Sandwich Condiments grouping. list with 4 items. Sprouts. check box not checked"
NVDAFirefoxyes
  • Result: (pass)
    • Test Case: Use Tab (Read next focusable item) to navigate forward into `*[role="group"]`
      1. Launch NVDA and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="group"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: within target
      6. Record results for the relevant expectations
    • Output: "Sandwich Condiments grouping. list with 4 items. Lettuce. check box not checked"
  • Result: (pass)
    • Test Case: Use Shift + Tab (Read previous focusable item) to navigate backwards into `*[role="group"]`
      1. Launch NVDA and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="group"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Shift + Tab (Read previous focusable item)
        • After issuing the command, virtual focus should be: within target
      6. Record results for the relevant expectations
    • Output: "Sandwich Condiments grouping. list with 4 items. Sprouts. check box not checked"
OrcaFirefoxyes
  • Result: (pass)
    • Test Case: Use down arrow (Read next item) to navigate forward to `*[role="group"]`
      1. Launch Orca and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="group"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: down arrow (Read next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Sandwich condiments panel, list with 4 items, lettuce checkbox not checked"
  • Result: (pass)
    • Test Case: Use Tab (Read next focusable item) to navigate forward to `*[role="group"]`
      1. Launch Orca and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="group"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Sandwich condiments panel, list with 4 items, lettuce checkbox not checked"
TalkBackChromenone
  • Result: (fail)
    • Test Case: Use Swipe right (Read next item) to navigate forward into `*[role="group"]`
      1. Launch TalkBack and Chrome.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="group"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Swipe right (Read next item)
        • After issuing the command, virtual focus should be: within target
      6. Record results for the relevant expectations
    • Output: "Not checked, Lettuce, checkbox, in list, 4 items"
Voice Access (Android)Chromenot applicable-
Voice Control (iOS)Safarinot applicable-
Voice Control (MacOS)Safarinot applicable-
VoiceOver (iOS)Safarinone
  • Result: (fail)
    • Test Case: Use Swipe Right (Next item) to navigate forward into `*[role="group"]`
      1. Launch VoiceOver (iOS) and Safari.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="group"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Swipe Right (Next item)
        • After issuing the command, virtual focus should be: within target
      6. Record results for the relevant expectations
    • Output: "Lettuce, checkbox, unchecked"
  • Result: (fail)
    • Test Case: Use Swipe Left (Previous item) to navigate backwards into `*[role="group"]`
      1. Launch VoiceOver (iOS) and Safari.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="group"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Swipe Left (Previous item)
        • After issuing the command, virtual focus should be: within target
      6. Record results for the relevant expectations
    • Output: "Lettuce, checkbox, unchecked"
VoiceOver (macOS)Safariyes
  • Result: (pass)
    • Test Case: Use VO + Right arrow (Read next item) to navigate forward to the start of `*[role="group"]`
      1. Launch VoiceOver (macOS) and Safari.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="group"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: VO + Right arrow (Read next item)
        • After issuing the command, virtual focus should be: start of target
      6. Record results for the relevant expectations
    • Output: "Sandwich Condiments, group"
  • Result: (pass)
    • Test Case: Use VO + Left Arrow (Read previous item) to navigate backwards to the end of `*[role="group"]`
      1. Launch VoiceOver (macOS) and Safari.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="group"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: VO + Left Arrow (Read previous item)
        • After issuing the command, virtual focus should be: end of target
      6. Record results for the relevant expectations
    • Output: "end of Sandwich Condiments, group"
  • Result: (pass)
    • Test Case: Use Tab (Read next focusable item) to navigate forward into `*[role="group"]`
      1. Launch VoiceOver (macOS) and Safari.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="group"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: within target
      6. Record results for the relevant expectations
    • Output: "Lettuce, unchecked, checkbox, Sandwich Condiments, group"
  • Result: (pass)
    • Test Case: Use Shift + Tab (Read previous focusable item) to navigate backwards into `*[role="group"]`
      1. Launch VoiceOver (macOS) and Safari.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="group"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Shift + Tab (Read previous focusable item)
        • After issuing the command, virtual focus should be: within target
      6. Record results for the relevant expectations
    • Output: "Sprouts, unchecked, checkbox, Sandwich Condiments, group"
Windows Speech RecognitionChromenot applicable-

Extended Support for: group role: convey the name if named

These are less common combinations

ATBrowserHas SupportOutput
Dragon Naturally SpeakingIEnot applicable-
Dragon Naturally SpeakingFirefoxnot applicable-
JAWSEdgeunknown-
NarratorFirefoxunknown-
NarratorChromeunknown-
NarratorIEunknown-
NVDAIEunknown-
NVDAEdgeunknown-
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-
Windows Speech Recognition 1903Edge 44not applicable-
Back to top

Expectation for the group role: convey its role

This expectation is from the group role feature.

Rationale:

A screen reader user needs to be aware that elements are within a group

Strength of this expectation for different types of assistive technologies:

  • Screen Readers: MUST
  • Voice Control: NA

Examples:

  • The role name is announced when entering the group.
  • If focus is outside of the group, then the accessible name of the group is announced when focus jumps to a control within the group.

Grading method:

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

ATBrowserHas SupportOutput
Dragon Naturally SpeakingChromenot applicable-
JAWSChromepartial
  • Result: (pass)
    • Test Case: Use Down arrow (Read next item) to navigate forward to the start of `*[role="group"]`
      1. Launch JAWS and Chrome.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="group"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Down arrow (Read next item)
        • After issuing the command, virtual focus should be: start of target
      6. Record results for the relevant expectations
    • Output: "Group Start, Sandwich Condiments"
  • Result: (pass)
    • Test Case: Use Down arrow (Read next item) to navigate forwards to the end of `*[role="group"]`
      1. Launch JAWS and Chrome.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="group"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: within target
        • Keyboard focus is: within target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Down arrow (Read next item)
        • After issuing the command, virtual focus should be: end of target
      6. Record results for the relevant expectations
    • Output: "Group end"
  • Result: (pass)
    • Test Case: Use Up arrow (Read previous item) to navigate backwards to the end of `*[role="group"]`
      1. Launch JAWS and Chrome.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="group"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Up arrow (Read previous item)
        • After issuing the command, virtual focus should be: end of target
      6. Record results for the relevant expectations
    • Output: "Group end"
  • Result: (pass)
    • Test Case: Use Up arrow (Read previous item) to navigate backwards to the start of `*[role="group"]`
      1. Launch JAWS and Chrome.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="group"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: within target
        • Keyboard focus is: within target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Up arrow (Read previous item)
        • After issuing the command, virtual focus should be: start of target
      6. Record results for the relevant expectations
    • Output: "Group Start, Sandwich Condiments"
  • Result: (partial)
    • Test Case: Use Tab (Read next focusable item) to navigate forward into `*[role="group"]`
      1. Launch JAWS and Chrome.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="group"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: within target
      6. Record results for the relevant expectations
    • Output: "Sandwich Condiments, Lettuce checkbox not checked"
  • Result: (partial)
    • Test Case: Use Shift + Tab (Read previous focusable item) to navigate backwards into `*[role="group"]`
      1. Launch JAWS and Chrome.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="group"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Shift + Tab (Read previous focusable item)
        • After issuing the command, virtual focus should be: within target
      6. Record results for the relevant expectations
    • Output: "Sandwich Condiments, Sprouts checkbox not checked"
Notes: Pressing the TAB or SHIFT+TAB keys to focus the first (or last) checkbox in the group caused the group label to be announced, but not the group role.
JAWSIEpartial
  • Result: (pass)
    • Test Case: Use Down arrow (Read next item) to navigate forward to the start of `*[role="group"]`
      1. Launch JAWS and IE.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="group"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Down arrow (Read next item)
        • After issuing the command, virtual focus should be: start of target
      6. Record results for the relevant expectations
    • Output: "Group Start, Sandwich Condiments"
  • Result: (pass)
    • Test Case: Use Down arrow (Read next item) to navigate forwards to the end of `*[role="group"]`
      1. Launch JAWS and IE.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="group"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: within target
        • Keyboard focus is: within target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Down arrow (Read next item)
        • After issuing the command, virtual focus should be: end of target
      6. Record results for the relevant expectations
    • Output: "Group end"
  • Result: (pass)
    • Test Case: Use Up arrow (Read previous item) to navigate backwards to the end of `*[role="group"]`
      1. Launch JAWS and IE.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="group"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Up arrow (Read previous item)
        • After issuing the command, virtual focus should be: end of target
      6. Record results for the relevant expectations
    • Output: "Group end"
  • Result: (pass)
    • Test Case: Use Up arrow (Read previous item) to navigate backwards to the start of `*[role="group"]`
      1. Launch JAWS and IE.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="group"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: within target
        • Keyboard focus is: within target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Up arrow (Read previous item)
        • After issuing the command, virtual focus should be: start of target
      6. Record results for the relevant expectations
    • Output: "Group Start, Sandwich Condiments"
  • Result: (partial)
    • Test Case: Use Tab (Read next focusable item) to navigate forward into `*[role="group"]`
      1. Launch JAWS and IE.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="group"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: within target
      6. Record results for the relevant expectations
    • Output: "Sandwich Condiments, Lettuce checkbox not checked"
  • Result: (partial)
    • Test Case: Use Shift + Tab (Read previous focusable item) to navigate backwards into `*[role="group"]`
      1. Launch JAWS and IE.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="group"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Shift + Tab (Read previous focusable item)
        • After issuing the command, virtual focus should be: within target
      6. Record results for the relevant expectations
    • Output: "Sandwich Condiments, Sprouts checkbox not checked"
Notes: Pressing the TAB or SHIFT+TAB keys to focus the first (or last) checkbox in the group caused the group label to be announced, but not the group role.
JAWSFirefoxpartial
  • Result: (pass)
    • Test Case: Use Down arrow (Read next item) to navigate forward to the start of `*[role="group"]`
      1. Launch JAWS and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="group"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Down arrow (Read next item)
        • After issuing the command, virtual focus should be: start of target
      6. Record results for the relevant expectations
    • Output: "Group Start, Sandwich Condiments"
  • Result: (pass)
    • Test Case: Use Down arrow (Read next item) to navigate forwards to the end of `*[role="group"]`
      1. Launch JAWS and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="group"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: within target
        • Keyboard focus is: within target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Down arrow (Read next item)
        • After issuing the command, virtual focus should be: end of target
      6. Record results for the relevant expectations
    • Output: "Group end"
  • Result: (pass)
    • Test Case: Use Up arrow (Read previous item) to navigate backwards to the end of `*[role="group"]`
      1. Launch JAWS and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="group"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Up arrow (Read previous item)
        • After issuing the command, virtual focus should be: end of target
      6. Record results for the relevant expectations
    • Output: "Group end"
  • Result: (pass)
    • Test Case: Use Up arrow (Read previous item) to navigate backwards to the start of `*[role="group"]`
      1. Launch JAWS and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="group"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: within target
        • Keyboard focus is: within target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Up arrow (Read previous item)
        • After issuing the command, virtual focus should be: start of target
      6. Record results for the relevant expectations
    • Output: "Group Start, Sandwich Condiments"
  • Result: (partial)
    • Test Case: Use Tab (Read next focusable item) to navigate forward into `*[role="group"]`
      1. Launch JAWS and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="group"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: within target
      6. Record results for the relevant expectations
    • Output: "Sandwich Condiments, Lettuce checkbox not checked"
  • Result: (partial)
    • Test Case: Use Shift + Tab (Read previous focusable item) to navigate backwards into `*[role="group"]`
      1. Launch JAWS and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="group"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Shift + Tab (Read previous focusable item)
        • After issuing the command, virtual focus should be: within target
      6. Record results for the relevant expectations
    • Output: "Sandwich Condiments, Sprouts checkbox not checked"
Notes: Pressing the TAB or SHIFT+TAB keys to focus the first (or last) checkbox in the group caused the group label to be announced, but not the group role.
NarratorEdgepartial
  • Result: (fail)
    • Test Case: Use Down arrow (Read next item (scan mode)) to navigate forward into `*[role="group"]`
      1. Launch Narrator and Edge.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="group"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Down arrow (Read next item (scan mode))
        • After issuing the command, virtual focus should be: within target
      6. Record results for the relevant expectations
    • Output: "1 of 4, level 2e"
  • Result: (fail)
    • Test Case: Use Up arrow (Read previous item (scan mode)) to navigate backwards into `*[role="group"]`
      1. Launch Narrator and Edge.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="group"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Up arrow (Read previous item (scan mode))
        • After issuing the command, virtual focus should be: within target
      6. Record results for the relevant expectations
    • Output: "4 of 4, level 2"
  • Result: (pass)
    • Test Case: Use Tab (Read next focusable item) to navigate forward into `*[role="group"]`
      1. Launch Narrator and Edge.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="group"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: within target
      6. Record results for the relevant expectations
    • Output: "Sandwich Condiments. Unchecked lettuce checkbox"
  • Result: (pass)
    • Test Case: Use Shift + Tab (Read previous focusable item) to navigate backwards into `*[role="group"]`
      1. Launch Narrator and Edge.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="group"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Shift + Tab (Read previous focusable item)
        • After issuing the command, virtual focus should be: within target
      6. Record results for the relevant expectations
    • Output: "Sandwich Condiments. Unchecked Sprouts checkbox"
NVDAChromepartial
  • Result: (fail)
    • Test Case: Use down arrow (Read next item) to navigate forward into `*[role="group"]`
      1. Launch NVDA and Chrome.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="group"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: down arrow (Read next item)
        • After issuing the command, virtual focus should be: within target
      6. Record results for the relevant expectations
    • Output: "list with 4 items. check box not checked. Lettuce"
  • Result: (fail)
    • Test Case: Use up arrow (Read previous item) to navigate backwards into `*[role="group"]`
      1. Launch NVDA and Chrome.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="group"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: up arrow (Read previous item)
        • After issuing the command, virtual focus should be: within target
      6. Record results for the relevant expectations
    • Output: "list with 4 items. check box not checked. Sprouts"
  • Result: (pass)
    • Test Case: Use Tab (Read next focusable item) to navigate forward into `*[role="group"]`
      1. Launch NVDA and Chrome.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="group"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: within target
      6. Record results for the relevant expectations
    • Output: "Sandwich Condiments grouping. list with 4 items. Lettuce. check box not checked"
  • Result: (pass)
    • Test Case: Use Shift + Tab (Read previous focusable item) to navigate backwards into `*[role="group"]`
      1. Launch NVDA and Chrome.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="group"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Shift + Tab (Read previous focusable item)
        • After issuing the command, virtual focus should be: within target
      6. Record results for the relevant expectations
    • Output: "Sandwich Condiments grouping. list with 4 items. Sprouts. check box not checked"
NVDAFirefoxpartial
  • Result: (fail)
    • Test Case: Use down arrow (Read next item) to navigate forward into `*[role="group"]`
      1. Launch NVDA and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="group"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: down arrow (Read next item)
        • After issuing the command, virtual focus should be: within target
      6. Record results for the relevant expectations
    • Output: "list with 4 items. check box not checked. Lettuce"
  • Result: (fail)
    • Test Case: Use up arrow (Read previous item) to navigate backwards into `*[role="group"]`
      1. Launch NVDA and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="group"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: up arrow (Read previous item)
        • After issuing the command, virtual focus should be: within target
      6. Record results for the relevant expectations
    • Output: "list with 4 items. check box not checked. Sprouts"
  • Result: (pass)
    • Test Case: Use Tab (Read next focusable item) to navigate forward into `*[role="group"]`
      1. Launch NVDA and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="group"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: within target
      6. Record results for the relevant expectations
    • Output: "Sandwich Condiments grouping. list with 4 items. Lettuce. check box not checked"
  • Result: (pass)
    • Test Case: Use Shift + Tab (Read previous focusable item) to navigate backwards into `*[role="group"]`
      1. Launch NVDA and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="group"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Shift + Tab (Read previous focusable item)
        • After issuing the command, virtual focus should be: within target
      6. Record results for the relevant expectations
    • Output: "Sandwich Condiments grouping. list with 4 items. Sprouts. check box not checked"
OrcaFirefoxyes
  • Result: (pass)
    • Test Case: Use down arrow (Read next item) to navigate forward to `*[role="group"]`
      1. Launch Orca and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="group"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: down arrow (Read next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Sandwich condiments panel, list with 4 items, lettuce checkbox not checked"
  • Result: (pass)
    • Test Case: Use Tab (Read next focusable item) to navigate forward to `*[role="group"]`
      1. Launch Orca and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="group"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Sandwich condiments panel, list with 4 items, lettuce checkbox not checked"
TalkBackChromenone
  • Result: (fail)
    • Test Case: Use Swipe right (Read next item) to navigate forward into `*[role="group"]`
      1. Launch TalkBack and Chrome.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="group"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Swipe right (Read next item)
        • After issuing the command, virtual focus should be: within target
      6. Record results for the relevant expectations
    • Output: "Not checked, Lettuce, checkbox, in list, 4 items"
Voice Access (Android)Chromenot applicable-
Voice Control (iOS)Safarinot applicable-
Voice Control (MacOS)Safarinot applicable-
VoiceOver (iOS)Safarinone
  • Result: (fail)
    • Test Case: Use Swipe Right (Next item) to navigate forward into `*[role="group"]`
      1. Launch VoiceOver (iOS) and Safari.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="group"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Swipe Right (Next item)
        • After issuing the command, virtual focus should be: within target
      6. Record results for the relevant expectations
    • Output: "Lettuce, checkbox, unchecked"
  • Result: (fail)
    • Test Case: Use Swipe Left (Previous item) to navigate backwards into `*[role="group"]`
      1. Launch VoiceOver (iOS) and Safari.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="group"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Swipe Left (Previous item)
        • After issuing the command, virtual focus should be: within target
      6. Record results for the relevant expectations
    • Output: "Lettuce, checkbox, unchecked"
VoiceOver (macOS)Safariyes
  • Result: (pass)
    • Test Case: Use VO + Right arrow (Read next item) to navigate forward to the start of `*[role="group"]`
      1. Launch VoiceOver (macOS) and Safari.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="group"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: VO + Right arrow (Read next item)
        • After issuing the command, virtual focus should be: start of target
      6. Record results for the relevant expectations
    • Output: "Sandwich Condiments, group"
  • Result: (pass)
    • Test Case: Use VO + Left Arrow (Read previous item) to navigate backwards to the end of `*[role="group"]`
      1. Launch VoiceOver (macOS) and Safari.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="group"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: VO + Left Arrow (Read previous item)
        • After issuing the command, virtual focus should be: end of target
      6. Record results for the relevant expectations
    • Output: "end of Sandwich Condiments, group"
  • Result: (pass)
    • Test Case: Use Tab (Read next focusable item) to navigate forward into `*[role="group"]`
      1. Launch VoiceOver (macOS) and Safari.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="group"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: within target
      6. Record results for the relevant expectations
    • Output: "Lettuce, unchecked, checkbox, Sandwich Condiments, group"
  • Result: (pass)
    • Test Case: Use Shift + Tab (Read previous focusable item) to navigate backwards into `*[role="group"]`
      1. Launch VoiceOver (macOS) and Safari.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="group"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Shift + Tab (Read previous focusable item)
        • After issuing the command, virtual focus should be: within target
      6. Record results for the relevant expectations
    • Output: "Sprouts, unchecked, checkbox, Sandwich Condiments, group"
Windows Speech RecognitionChromenot applicable-

Extended Support for: group role: convey its role

These are less common combinations

ATBrowserHas SupportOutput
Dragon Naturally SpeakingIEnot applicable-
Dragon Naturally SpeakingFirefoxnot applicable-
JAWSEdgeunknown-
NarratorFirefoxunknown-
NarratorChromeunknown-
NarratorIEunknown-
NVDAIEunknown-
NVDAEdgeunknown-
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-
Windows Speech Recognition 1903Edge 44not applicable-
Back to top

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

This expectation is from the group role feature.

Rationale:

A screen reader user needs to be aware when they enter and exit a group

Strength of this expectation for different types of assistive technologies:

  • Screen Readers: SHOULD
  • Voice Control: NA

Examples:

  • In reading mode, there might be a stop for both the start end end of the group. When entering the group, something like "group name, group" might be announced. When leaving the group, something like "end of group" might be announced.
  • In reading mode, there might not be a stop for the start and end of the group. In this case, the screen reader might announce the group name when the user navigates to the first child and announce that the user is leaving the group when the user navigates out of the group.
  • In interaction mode, there will not be a stop for the start and end of the group. In this case, the screen reader might announce the group name when the user jumps to an interactive child and announce that the user is leaving the group when the user jumps out of the group.

Grading method:

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

ATBrowserHas SupportOutput
Dragon Naturally SpeakingChromenot applicable-
JAWSChromepartial
  • Result: (pass)
    • Test Case: Use Down arrow (Read next item) to navigate forward to the start of `*[role="group"]`
      1. Launch JAWS and Chrome.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="group"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Down arrow (Read next item)
        • After issuing the command, virtual focus should be: start of target
      6. Record results for the relevant expectations
    • Output: "Group Start, Sandwich Condiments"
  • Result: (pass)
    • Test Case: Use Down arrow (Read next item) to navigate forwards to the end of `*[role="group"]`
      1. Launch JAWS and Chrome.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="group"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: within target
        • Keyboard focus is: within target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Down arrow (Read next item)
        • After issuing the command, virtual focus should be: end of target
      6. Record results for the relevant expectations
    • Output: "Group end"
  • Result: (pass)
    • Test Case: Use Up arrow (Read previous item) to navigate backwards to the end of `*[role="group"]`
      1. Launch JAWS and Chrome.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="group"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Up arrow (Read previous item)
        • After issuing the command, virtual focus should be: end of target
      6. Record results for the relevant expectations
    • Output: "Group end"
  • Result: (pass)
    • Test Case: Use Up arrow (Read previous item) to navigate backwards to the start of `*[role="group"]`
      1. Launch JAWS and Chrome.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="group"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: within target
        • Keyboard focus is: within target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Up arrow (Read previous item)
        • After issuing the command, virtual focus should be: start of target
      6. Record results for the relevant expectations
    • Output: "Group Start, Sandwich Condiments"
  • Result: (partial)
    • Test Case: Use Tab (Read next focusable item) to navigate forward into `*[role="group"]`
      1. Launch JAWS and Chrome.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="group"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: within target
      6. Record results for the relevant expectations
    • Output: "Sandwich Condiments, Lettuce checkbox not checked"
  • Result: (partial)
    • Test Case: Use Shift + Tab (Read previous focusable item) to navigate backwards into `*[role="group"]`
      1. Launch JAWS and Chrome.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="group"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Shift + Tab (Read previous focusable item)
        • After issuing the command, virtual focus should be: within target
      6. Record results for the relevant expectations
    • Output: "Sandwich Condiments, Sprouts checkbox not checked"
JAWSIEpartial
  • Result: (pass)
    • Test Case: Use Down arrow (Read next item) to navigate forward to the start of `*[role="group"]`
      1. Launch JAWS and IE.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="group"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Down arrow (Read next item)
        • After issuing the command, virtual focus should be: start of target
      6. Record results for the relevant expectations
    • Output: "Group Start, Sandwich Condiments"
  • Result: (pass)
    • Test Case: Use Down arrow (Read next item) to navigate forwards to the end of `*[role="group"]`
      1. Launch JAWS and IE.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="group"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: within target
        • Keyboard focus is: within target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Down arrow (Read next item)
        • After issuing the command, virtual focus should be: end of target
      6. Record results for the relevant expectations
    • Output: "Group end"
  • Result: (pass)
    • Test Case: Use Up arrow (Read previous item) to navigate backwards to the end of `*[role="group"]`
      1. Launch JAWS and IE.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="group"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Up arrow (Read previous item)
        • After issuing the command, virtual focus should be: end of target
      6. Record results for the relevant expectations
    • Output: "Group end"
  • Result: (pass)
    • Test Case: Use Up arrow (Read previous item) to navigate backwards to the start of `*[role="group"]`
      1. Launch JAWS and IE.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="group"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: within target
        • Keyboard focus is: within target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Up arrow (Read previous item)
        • After issuing the command, virtual focus should be: start of target
      6. Record results for the relevant expectations
    • Output: "Group Start, Sandwich Condiments"
  • Result: (partial)
    • Test Case: Use Tab (Read next focusable item) to navigate forward into `*[role="group"]`
      1. Launch JAWS and IE.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="group"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: within target
      6. Record results for the relevant expectations
    • Output: "Sandwich Condiments, Lettuce checkbox not checked"
  • Result: (partial)
    • Test Case: Use Shift + Tab (Read previous focusable item) to navigate backwards into `*[role="group"]`
      1. Launch JAWS and IE.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="group"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Shift + Tab (Read previous focusable item)
        • After issuing the command, virtual focus should be: within target
      6. Record results for the relevant expectations
    • Output: "Sandwich Condiments, Sprouts checkbox not checked"
JAWSFirefoxpartial
  • Result: (pass)
    • Test Case: Use Down arrow (Read next item) to navigate forward to the start of `*[role="group"]`
      1. Launch JAWS and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="group"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Down arrow (Read next item)
        • After issuing the command, virtual focus should be: start of target
      6. Record results for the relevant expectations
    • Output: "Group Start, Sandwich Condiments"
  • Result: (pass)
    • Test Case: Use Down arrow (Read next item) to navigate forwards to the end of `*[role="group"]`
      1. Launch JAWS and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="group"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: within target
        • Keyboard focus is: within target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Down arrow (Read next item)
        • After issuing the command, virtual focus should be: end of target
      6. Record results for the relevant expectations
    • Output: "Group end"
  • Result: (pass)
    • Test Case: Use Up arrow (Read previous item) to navigate backwards to the end of `*[role="group"]`
      1. Launch JAWS and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="group"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Up arrow (Read previous item)
        • After issuing the command, virtual focus should be: end of target
      6. Record results for the relevant expectations
    • Output: "Group end"
  • Result: (pass)
    • Test Case: Use Up arrow (Read previous item) to navigate backwards to the start of `*[role="group"]`
      1. Launch JAWS and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="group"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: within target
        • Keyboard focus is: within target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Up arrow (Read previous item)
        • After issuing the command, virtual focus should be: start of target
      6. Record results for the relevant expectations
    • Output: "Group Start, Sandwich Condiments"
  • Result: (partial)
    • Test Case: Use Tab (Read next focusable item) to navigate forward into `*[role="group"]`
      1. Launch JAWS and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="group"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: within target
      6. Record results for the relevant expectations
    • Output: "Sandwich Condiments, Lettuce checkbox not checked"
  • Result: (partial)
    • Test Case: Use Shift + Tab (Read previous focusable item) to navigate backwards into `*[role="group"]`
      1. Launch JAWS and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="group"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Shift + Tab (Read previous focusable item)
        • After issuing the command, virtual focus should be: within target
      6. Record results for the relevant expectations
    • Output: "Sandwich Condiments, Sprouts checkbox not checked"
NarratorEdgepartial
  • Result: (fail)
    • Test Case: Use Down arrow (Read next item (scan mode)) to navigate forward into `*[role="group"]`
      1. Launch Narrator and Edge.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="group"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Down arrow (Read next item (scan mode))
        • After issuing the command, virtual focus should be: within target
      6. Record results for the relevant expectations
    • Output: "1 of 4, level 2e"
  • Result: (fail)
    • Test Case: Use Up arrow (Read previous item (scan mode)) to navigate backwards into `*[role="group"]`
      1. Launch Narrator and Edge.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="group"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Up arrow (Read previous item (scan mode))
        • After issuing the command, virtual focus should be: within target
      6. Record results for the relevant expectations
    • Output: "4 of 4, level 2"
  • Result: (partial)
    • Test Case: Use Tab (Read next focusable item) to navigate forward into `*[role="group"]`
      1. Launch Narrator and Edge.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="group"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: within target
      6. Record results for the relevant expectations
    • Output: "Sandwich Condiments. Unchecked lettuce checkbox"
  • Result: (partial)
    • Test Case: Use Shift + Tab (Read previous focusable item) to navigate backwards into `*[role="group"]`
      1. Launch Narrator and Edge.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="group"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Shift + Tab (Read previous focusable item)
        • After issuing the command, virtual focus should be: within target
      6. Record results for the relevant expectations
    • Output: "Sandwich Condiments. Unchecked Sprouts checkbox"
  • Result: (fail)
    • Test Case: Use Down arrow (Read next item (scan mode)) to navigate forwards out of `*[role="group"]`
      1. Launch Narrator and Edge.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="group"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: within target
        • Keyboard focus is: within target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Down arrow (Read next item (scan mode))
        • After issuing the command, virtual focus should be: after target
      6. Record results for the relevant expectations
    • Output: "heading level 2. keyboard support"
  • Result: (fail)
    • Test Case: Use Up arrow (Read previous item (scan mode)) to navigate backwards out of `*[role="group"]`
      1. Launch Narrator and Edge.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="group"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: within target
        • Keyboard focus is: within target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Up arrow (Read previous item (scan mode))
        • After issuing the command, virtual focus should be: before target
      6. Record results for the relevant expectations
    • Output: "heading level 3 Sandwich Condiments"
  • Result: (fail)
    • Test Case: Use Tab (Read next focusable item) to navigate forwards out of `*[role="group"]`
      1. Launch Narrator and Edge.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="group"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: within target
        • Keyboard focus is: within target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: after target
      6. Record results for the relevant expectations
    • Output: "link, checkbox.css"
NVDAChromepartial
  • Result: (fail)
    • Test Case: Use down arrow (Read next item) to navigate forward into `*[role="group"]`
      1. Launch NVDA and Chrome.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="group"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: down arrow (Read next item)
        • After issuing the command, virtual focus should be: within target
      6. Record results for the relevant expectations
    • Output: "list with 4 items. check box not checked. Lettuce"
  • Result: (fail)
    • Test Case: Use up arrow (Read previous item) to navigate backwards into `*[role="group"]`
      1. Launch NVDA and Chrome.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="group"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: up arrow (Read previous item)
        • After issuing the command, virtual focus should be: within target
      6. Record results for the relevant expectations
    • Output: "list with 4 items. check box not checked. Sprouts"
  • Result: (pass)
    • Test Case: Use Tab (Read next focusable item) to navigate forward into `*[role="group"]`
      1. Launch NVDA and Chrome.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="group"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: within target
      6. Record results for the relevant expectations
    • Output: "Sandwich Condiments grouping. list with 4 items. Lettuce. check box not checked"
  • Result: (pass)
    • Test Case: Use Shift + Tab (Read previous focusable item) to navigate backwards into `*[role="group"]`
      1. Launch NVDA and Chrome.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="group"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Shift + Tab (Read previous focusable item)
        • After issuing the command, virtual focus should be: within target
      6. Record results for the relevant expectations
    • Output: "Sandwich Condiments grouping. list with 4 items. Sprouts. check box not checked"
  • Result: (fail)
    • Test Case: Use down arrow (Read next item) to navigate forwards out of `*[role="group"]`
      1. Launch NVDA and Chrome.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="group"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: within target
        • Keyboard focus is: within target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: down arrow (Read next item)
        • After issuing the command, virtual focus should be: after target
      6. Record results for the relevant expectations
    • Output: "lout of list. heading level 2. Keyboard Support"
  • Result: (fail)
    • Test Case: Use up arrow (Read previous item) to navigate backwards out of `*[role="group"]`
      1. Launch NVDA and Chrome.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="group"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: within target
        • Keyboard focus is: within target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: up arrow (Read previous item)
        • After issuing the command, virtual focus should be: before target
      6. Record results for the relevant expectations
    • Output: "out of list. heading level 3. Sandwich Condiments"
NVDAFirefoxpartial
  • Result: (fail)
    • Test Case: Use down arrow (Read next item) to navigate forward into `*[role="group"]`
      1. Launch NVDA and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="group"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: down arrow (Read next item)
        • After issuing the command, virtual focus should be: within target
      6. Record results for the relevant expectations
    • Output: "list with 4 items. check box not checked. Lettuce"
  • Result: (fail)
    • Test Case: Use up arrow (Read previous item) to navigate backwards into `*[role="group"]`
      1. Launch NVDA and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="group"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: up arrow (Read previous item)
        • After issuing the command, virtual focus should be: within target
      6. Record results for the relevant expectations
    • Output: "list with 4 items. check box not checked. Sprouts"
  • Result: (pass)
    • Test Case: Use Tab (Read next focusable item) to navigate forward into `*[role="group"]`
      1. Launch NVDA and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="group"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: within target
      6. Record results for the relevant expectations
    • Output: "Sandwich Condiments grouping. list with 4 items. Lettuce. check box not checked"
  • Result: (pass)
    • Test Case: Use Shift + Tab (Read previous focusable item) to navigate backwards into `*[role="group"]`
      1. Launch NVDA and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="group"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Shift + Tab (Read previous focusable item)
        • After issuing the command, virtual focus should be: within target
      6. Record results for the relevant expectations
    • Output: "Sandwich Condiments grouping. list with 4 items. Sprouts. check box not checked"
  • Result: (fail)
    • Test Case: Use down arrow (Read next item) to navigate forwards out of `*[role="group"]`
      1. Launch NVDA and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="group"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: within target
        • Keyboard focus is: within target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: down arrow (Read next item)
        • After issuing the command, virtual focus should be: after target
      6. Record results for the relevant expectations
    • Output: "lout of list. heading level 2. Keyboard Support"
  • Result: (fail)
    • Test Case: Use up arrow (Read previous item) to navigate backwards out of `*[role="group"]`
      1. Launch NVDA and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="group"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: within target
        • Keyboard focus is: within target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: up arrow (Read previous item)
        • After issuing the command, virtual focus should be: before target
      6. Record results for the relevant expectations
    • Output: "out of list. heading level 3. Sandwich Condiments"
OrcaFirefoxyes
  • Result: (pass)
    • Test Case: Use down arrow (Read next item) to navigate forward to `*[role="group"]`
      1. Launch Orca and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="group"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: down arrow (Read next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Sandwich condiments panel, list with 4 items, lettuce checkbox not checked"
  • Result: (pass)
    • Test Case: Use Tab (Read next focusable item) to navigate forward to `*[role="group"]`
      1. Launch Orca and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="group"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Sandwich condiments panel, list with 4 items, lettuce checkbox not checked"
  • Result: (pass)
    • Test Case: Use down arrow (Read next item) to navigate forwards to the end of `*[role="group"]`
      1. Launch Orca and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="group"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: within target
        • Keyboard focus is: within target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: down arrow (Read next item)
        • After issuing the command, virtual focus should be: end of target
      6. Record results for the relevant expectations
    • Output: "leaving list, leaving panel"
  • Result: (pass)
    • Test Case: Use up arrow (Read previous item) to navigate backwards to the end of `*[role="group"]`
      1. Launch Orca and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="group"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: up arrow (Read previous item)
        • After issuing the command, virtual focus should be: end of target
      6. Record results for the relevant expectations
    • Output: "Sandwich condiments panel, list with 4 items, sprouts checkbox not checked"
  • Result: (pass)
    • Test Case: Use up arrow (Read previous item) to navigate backwards to the start of `*[role="group"]`
      1. Launch Orca and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="group"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: within target
        • Keyboard focus is: within target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: up arrow (Read previous item)
        • After issuing the command, virtual focus should be: start of target
      6. Record results for the relevant expectations
    • Output: "leaving list, leaving panel"
TalkBackChromenone
  • Result: (fail)
    • Test Case: Use Swipe right (Read next item) to navigate forward into `*[role="group"]`
      1. Launch TalkBack and Chrome.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="group"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Swipe right (Read next item)
        • After issuing the command, virtual focus should be: within target
      6. Record results for the relevant expectations
    • Output: "Not checked, Lettuce, checkbox, in list, 4 items"
  • Result: (fail)
    • Test Case: Use Swipe left (Read previous item) to navigate backwards into `*[role="group"]`
      1. Launch TalkBack and Chrome.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="group"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Swipe left (Read previous item)
        • After issuing the command, virtual focus should be: within target
      6. Record results for the relevant expectations
    • Output: "Not checked, Sprouts, checkbox, in list, 4 items"
Voice Access (Android)Chromenot applicable-
Voice Control (iOS)Safarinot applicable-
Voice Control (MacOS)Safarinot applicable-
VoiceOver (iOS)Safarinone
  • Result: (fail)
    • Test Case: Use Swipe Right (Next item) to navigate forward into `*[role="group"]`
      1. Launch VoiceOver (iOS) and Safari.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="group"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Swipe Right (Next item)
        • After issuing the command, virtual focus should be: within target
      6. Record results for the relevant expectations
    • Output: "Lettuce, checkbox, unchecked"
  • Result: (fail)
    • Test Case: Use Swipe Left (Previous item) to navigate backwards into `*[role="group"]`
      1. Launch VoiceOver (iOS) and Safari.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="group"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Swipe Left (Previous item)
        • After issuing the command, virtual focus should be: within target
      6. Record results for the relevant expectations
    • Output: "Lettuce, checkbox, unchecked"
VoiceOver (macOS)Safariyes
  • Result: (pass)
    • Test Case: Use VO + Right arrow (Read next item) to navigate forward to the start of `*[role="group"]`
      1. Launch VoiceOver (macOS) and Safari.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="group"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: VO + Right arrow (Read next item)
        • After issuing the command, virtual focus should be: start of target
      6. Record results for the relevant expectations
    • Output: "Sandwich Condiments, group"
  • Result: (pass)
    • Test Case: Use VO + Left Arrow (Read previous item) to navigate backwards to the end of `*[role="group"]`
      1. Launch VoiceOver (macOS) and Safari.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="group"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: VO + Left Arrow (Read previous item)
        • After issuing the command, virtual focus should be: end of target
      6. Record results for the relevant expectations
    • Output: "end of Sandwich Condiments, group"
  • Result: (pass)
    • Test Case: Use Tab (Read next focusable item) to navigate forward into `*[role="group"]`
      1. Launch VoiceOver (macOS) and Safari.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="group"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: within target
      6. Record results for the relevant expectations
    • Output: "Lettuce, unchecked, checkbox, Sandwich Condiments, group"
  • Result: (pass)
    • Test Case: Use Shift + Tab (Read previous focusable item) to navigate backwards into `*[role="group"]`
      1. Launch VoiceOver (macOS) and Safari.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="group"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Shift + Tab (Read previous focusable item)
        • After issuing the command, virtual focus should be: within target
      6. Record results for the relevant expectations
    • Output: "Sprouts, unchecked, checkbox, Sandwich Condiments, group"
  • Result: (pass)
    • Test Case: Use VO + Right arrow (Read next item) to navigate forwards to the end of `*[role="group"]`
      1. Launch VoiceOver (macOS) and Safari.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="group"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: within target
        • Keyboard focus is: within target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: VO + Right arrow (Read next item)
        • After issuing the command, virtual focus should be: end of target
      6. Record results for the relevant expectations
    • Output: "end of Sandwich Condiments, group"
  • Result: (pass)
    • Test Case: Use VO + Left Arrow (Read previous item) to navigate backwards to the start of `*[role="group"]`
      1. Launch VoiceOver (macOS) and Safari.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[role="group"]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: within target
        • Keyboard focus is: within target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: VO + Left Arrow (Read previous item)
        • After issuing the command, virtual focus should be: start of target
      6. Record results for the relevant expectations
    • Output: "Sandwich Condiments, group"
Windows Speech RecognitionChromenot applicable-

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

These are less common combinations

ATBrowserHas SupportOutput
Dragon Naturally SpeakingIEnot applicable-
Dragon Naturally SpeakingFirefoxnot applicable-
JAWSEdgeunknown-
NarratorFirefoxunknown-
NarratorChromeunknown-
NarratorIEunknown-
NVDAIEunknown-
NVDAEdgeunknown-
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-
Windows Speech Recognition 1903Edge 44not applicable-
Back to top

Dates and Versions of tested combinations

ATAT VersionBrowserBrowser versionOS versionDate tested
Dragon Naturally Speaking15.30Chrome7619032019-08-21
JAWS2019.1904.60Chrome7419032019-05-27
JAWS2019.1904.60IE11.13419032019-05-27
JAWS2019.1904.60Firefox6619032019-05-27
Narrator1903Edge44.17763.1.019032019-05-24
NVDA2019.1.1Chrome7419032019-05-24
NVDA2019.1.1Firefox6719032019-05-24
Orca3.31.4Firefox69Ubuntu 19.042019-09-12
TalkBack7.3.0Chrome757.02019-07-27
Voice Access (Android)3.1Chrome7772019-10-02
Voice Control (iOS)13.0Safari13.013.02019-09-23
Voice Control (MacOS)10.15Safari13.0.210.152019-10-07
VoiceOver (iOS)12.3Safari12.312.32019-05-24
VoiceOver (macOS)10.14.5Safari12.1.110.14.52019-05-24
Windows Speech Recognition1903Chrome7719032019-10-18

History

  • 2019-05-24 Test created
  • 2019-07-27 Talkback results added
  • 2019-09-23 Added vc_ios and dragon results
  • 2019-10-02 Add va_and results
  • 2019-10-07 Add vc_macos results
  • 2019-10-18 Add wsr results
  • 2020-09-22 Remove expectations and results around list semantics. It's unclear why they are used and how they should behave as used in this context.