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

Test: APG Editable Combobox With List Autocomplete Example

Screen Reader support level: partial (189/248)

Voice Control support level: partial (41/44)

On this page

About this test

This is a test of the Aria Authoring Practices Editable Combobox With List Autocomplete Example

Submit new test results

Age of results

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

Failing and partial results are between 8 months ago and 8 months ago.

Test HTML

view the external test

Summary of Screen Reader support by expectation

aria-activedescendant attribute
ExpectationJAWSNarratorNVDAOrcaTalkBackVoiceOver (iOS)VoiceOver (macOS)
ChromeEdgeFirefoxEdgeChromeEdgeFirefoxFirefoxChromeSafariSafari
MUST convey the referenced element as active applied to: combobox rolesupportedsupportedsupportedpartialsupportedsupportedsupportedsupportednot applicablenot applicablenone
MUST convey when the referenced element changes applied to: combobox rolesupportedsupportedsupportedpartialsupportedsupportedsupportedsupportednot applicablenot applicablenone
aria-autocomplete attribute
ExpectationJAWSNarratorNVDAOrcaTalkBackVoiceOver (iOS)VoiceOver (macOS)
ChromeEdgeFirefoxEdgeChromeEdgeFirefoxFirefoxChromeSafariSafari
MUST convey the `list` value applied to: combobox rolenonenonenonenonepartialpartialpartialnonenonenonesupported
aria-controls attribute
ExpectationJAWSNarratorNVDAOrcaTalkBackVoiceOver (iOS)VoiceOver (macOS)
ChromeEdgeFirefoxEdgeChromeEdgeFirefoxFirefoxChromeSafariSafari
MUST allow the user to jump to the controlled element applied to: combobox rolesupportedsupportedsupportednonenonenonenonenonenonenonenone
MUST allow the user to jump to the controlled element applied to: button elementsupportedsupportedsupportednonenonenonenonenonenonenonenone
SHOULD convey the presence of the aria-controls attribute applied to: combobox rolenonenonenonenonenonenonenonenonenonenonenone
SHOULD convey the presence of the aria-controls attribute applied to: button elementnonenonenonenonenonenonenonenonenonenonenone
aria-expanded attribute
ExpectationJAWSNarratorNVDAOrcaTalkBackVoiceOver (iOS)VoiceOver (macOS)
ChromeEdgeFirefoxEdgeChromeEdgeFirefoxFirefoxChromeSafariSafari
MUST convey change in value applied to: combobox rolesupportedsupportedsupportedsupportedsupportedsupportedsupportedsupportedsupportednonenone
MUST convey the "false" value applied to: combobox rolesupportedsupportedsupportedsupportedsupportedsupportedsupportednonesupportedsupportednone
MUST convey the "false" value applied to: button elementsupportedsupportedsupportedsupportedsupportedsupportedsupportedsupportedsupportedsupportedsupported
MUST convey the "true" value applied to: combobox rolesupportedsupportedsupportedsupportedsupportedsupportedsupportednonesupportedsupportednone
MUST convey the "true" value applied to: button elementsupportedsupportedsupportedsupportedsupportedsupportedsupportedsupportedsupportedsupportedsupported
aria-haspopup attribute
ExpectationJAWSNarratorNVDAOrcaTalkBackVoiceOver (iOS)VoiceOver (macOS)
ChromeEdgeFirefoxEdgeChromeEdgeFirefoxFirefoxChromeSafariSafari
MUST convey the "listbox" value applied to: combobox rolenonenonenonesupportednonenonenonenonenonesupportedsupported
aria-selected attribute
ExpectationJAWSNarratorNVDAOrcaTalkBackVoiceOver (iOS)VoiceOver (macOS)
ChromeEdgeFirefoxEdgeChromeEdgeFirefoxFirefoxChromeSafariSafari
MUST convey true value by indicating that the element is currently selected applied to: option rolenonenonenonesupportednonenonenonenonenot applicablenonenone
combobox role
ExpectationJAWSNarratorNVDAOrcaTalkBackVoiceOver (iOS)VoiceOver (macOS)
ChromeEdgeFirefoxEdgeChromeEdgeFirefoxFirefoxChromeSafariSafari
MUST convey its name applied to: input[type="text"] elementsupportedsupportedsupportedsupportedsupportedsupportedsupportedsupportedsupportedsupportedsupported
MUST convey its role applied to: input[type="text"] elementsupportedsupportedsupportedsupportedsupportedsupportedsupportedsupportedsupportedsupportedsupported
MUST convey the current value applied to: input[type="text"] elementsupportedsupportedsupportedsupportedsupportedsupportedsupportedsupportedsupportedsupportedsupported
MUST convey changes in value applied to: input[type="text"] elementsupportedsupportedsupportedsupportedsupportedsupportedsupportedsupportedsupportedsupportedsupported
MUST convey that the combobox is editable applied to: input[type="text"] elementsupportedsupportedsupportedsupportedsupportedsupportedsupportedsupportedsupportedsupportedsupported
listbox role
ExpectationJAWSNarratorNVDAOrcaTalkBackVoiceOver (iOS)VoiceOver (macOS)
ChromeEdgeFirefoxEdgeChromeEdgeFirefoxFirefoxChromeSafariSafari
MUST convey its namesupportedsupportedsupportedsupportedsupportedsupportedsupportedsupportedsupportedsupportedsupported
MUST convey its rolesupportedsupportedsupportednonesupportedsupportedsupportedsupportedsupportedsupportedsupported
SHOULD convey its boundariessupportedsupportedsupportedsupportedsupportedsupportedsupportedsupportedsupportedsupportednone
option role
ExpectationJAWSNarratorNVDAOrcaTalkBackVoiceOver (iOS)VoiceOver (macOS)
ChromeEdgeFirefoxEdgeChromeEdgeFirefoxFirefoxChromeSafariSafari
MUST convey its namesupportedsupportedsupportedsupportedsupportedsupportedsupportedsupportednonesupportednone
MUST convey its rolesupportedsupportedsupportednonesupportedsupportedsupportedsupportednonesupportednone
MAY convey information about the position the option in the listsupportedsupportedsupportedsupportedsupportedsupportedsupportednonenonenonenone
button element
ExpectationJAWSNarratorNVDAOrcaTalkBackVoiceOver (iOS)VoiceOver (macOS)
ChromeEdgeFirefoxEdgeChromeEdgeFirefoxFirefoxChromeSafariSafari
MUST convey its namesupportedsupportedsupportedsupportedsupportedsupportedsupportedsupportedsupportedsupportedsupported
MUST convey its rolesupportedsupportedsupportedsupportedsupportedsupportedsupportedsupportedsupportedsupportedsupported

* means that some support is hidden behind settings

Summary of Voice Control support by expectation

aria-activedescendant attribute
ExpectationDragon Naturally SpeakingVoice Access (Android)Voice Control (iOS)Voice Control (MacOS)Windows Speech RecognitionWindows Voice Access
ChromeChromeSafariSafariEdgeChromeEdgeChrome
Not applicable
aria-autocomplete attribute
ExpectationDragon Naturally SpeakingVoice Access (Android)Voice Control (iOS)Voice Control (MacOS)Windows Speech RecognitionWindows Voice Access
ChromeChromeSafariSafariEdgeChromeEdgeChrome
Not applicable
aria-controls attribute
ExpectationDragon Naturally SpeakingVoice Access (Android)Voice Control (iOS)Voice Control (MacOS)Windows Speech RecognitionWindows Voice Access
ChromeChromeSafariSafariEdgeChromeEdgeChrome
Not applicable
aria-expanded attribute
ExpectationDragon Naturally SpeakingVoice Access (Android)Voice Control (iOS)Voice Control (MacOS)Windows Speech RecognitionWindows Voice Access
ChromeChromeSafariSafariEdgeChromeEdgeChrome
Not applicable
aria-haspopup attribute
ExpectationDragon Naturally SpeakingVoice Access (Android)Voice Control (iOS)Voice Control (MacOS)Windows Speech RecognitionWindows Voice Access
ChromeChromeSafariSafariEdgeChromeEdgeChrome
Not applicable
aria-selected attribute
ExpectationDragon Naturally SpeakingVoice Access (Android)Voice Control (iOS)Voice Control (MacOS)Windows Speech RecognitionWindows Voice Access
ChromeChromeSafariSafariEdgeChromeEdgeChrome
Not applicable
combobox role
ExpectationDragon Naturally SpeakingVoice Access (Android)Voice Control (iOS)Voice Control (MacOS)Windows Speech RecognitionWindows Voice Access
ChromeChromeSafariSafariEdgeChromeEdgeChrome
MUST convey its name applied to: input[type="text"] elementsupportedsupportedsupportedsupportedsupportedsupportedsupportedsupported
MUST convey its role applied to: input[type="text"] elementsupportedsupportednot applicablesupportedsupportedsupportedsupportedsupported
listbox role
ExpectationDragon Naturally SpeakingVoice Access (Android)Voice Control (iOS)Voice Control (MacOS)Windows Speech RecognitionWindows Voice Access
ChromeChromeSafariSafariEdgeChromeEdgeChrome
Not applicable
option role
ExpectationDragon Naturally SpeakingVoice Access (Android)Voice Control (iOS)Voice Control (MacOS)Windows Speech RecognitionWindows Voice Access
ChromeChromeSafariSafariEdgeChromeEdgeChrome
MUST convey its namenonesupportedsupportednonesupportedsupportedsupportedsupported
MUST convey its rolenot applicablesupportednot applicablenonesupportedsupportedsupportedsupported
button element
ExpectationDragon Naturally SpeakingVoice Access (Android)Voice Control (iOS)Voice Control (MacOS)Windows Speech RecognitionWindows Voice Access
ChromeChromeSafariSafariEdgeChromeEdgeChrome
MUST convey its namesupportedsupportedsupportedsupportedsupportedsupportedsupportedsupported
MUST convey its rolesupportedsupportednot applicablesupportedsupportedsupportedsupportedsupported

* means that some support is hidden behind settings

Detailed support results by expectation

Expectation for the aria-activedescendant attribute: convey the referenced element as active - applied to the combobox role

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

This expectation is from the aria-activedescendant attribute feature.

Rationale:

A screen reader user needs to be aware of which descendant is currently active

Strength of this expectation for different types of assistive technologies:

  • Screen Readers: MUST
  • Voice Control: NA

Examples:

  • When navigating to an element with this attribute, screen readers will also announce the referenced element

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: Navigate into listbox from the combobox input using select next option (Down arrow)
      1. Launch JAWS and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="listbox"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • summary: navigate forward to the combobox
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. issue command
        • summary: type "nebr"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and listbox should display
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. issue command
        • summary: navigate into the listbox
        • Using the command: "Down arrow" (select next option)
        • Observe: the listbox role and name should be conveyed
        • Ensure AT location after executing the command
          • Target: `*[role="listbox"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      8. is the expectation met?
    • Output: "states list with 6 items, nebraska, 1 of 6, to move to an item press the arrow keys"
JAWSEdgeyes
  • Result: (pass)
    • Test Case: Navigate into listbox from the combobox input using select next option (Down arrow)
      1. Launch JAWS and Edge.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="listbox"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • summary: navigate forward to the combobox
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. issue command
        • summary: type "nebr"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and listbox should display
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. issue command
        • summary: navigate into the listbox
        • Using the command: "Down arrow" (select next option)
        • Observe: the listbox role and name should be conveyed
        • Ensure AT location after executing the command
          • Target: `*[role="listbox"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      8. is the expectation met?
    • Output: "states list with 6 items, nebraska, 1 of 6, to move to an item press the arrow keys"
JAWSFirefoxyes
  • Result: (pass)
    • Test Case: Navigate into listbox from the combobox input using select next option (Down arrow)
      1. Launch JAWS and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="listbox"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • summary: navigate forward to the combobox
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. issue command
        • summary: type "nebr"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and listbox should display
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. issue command
        • summary: navigate into the listbox
        • Using the command: "Down arrow" (select next option)
        • Observe: the listbox role and name should be conveyed
        • Ensure AT location after executing the command
          • Target: `*[role="listbox"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      8. is the expectation met?
    • Output: "states list with 6 items, nebraska, 1 of 6, to move to an item press the arrow keys"
NarratorEdgepartial
  • Result: (partial)
    • Test Case: Navigate into listbox from the combobox input using select next option (Down arrow)
      1. Launch Narrator and Edge.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="listbox"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • summary: navigate forward to the combobox
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. issue command
        • summary: type "nebr"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and listbox should display
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. issue command
        • summary: navigate into the listbox
        • Using the command: "Down arrow" (select next option)
        • Observe: the listbox role and name should be conveyed
        • Ensure AT location after executing the command
          • Target: `*[role="listbox"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      8. is the expectation met?
    • Output: "scan, states, nebraska, 1 of 6, selected"
    • Result Notes: Partial because Narrator switched to scan mode, and is no longer respecting the activedescendant. However, if you manually exit scan mode, activedescendant works as expected.
NVDAChromeyes
  • Result: (pass)
    • Test Case: Navigate into listbox from the combobox input using select next option (Down arrow)
      1. Launch NVDA and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="listbox"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • summary: navigate forward to the combobox
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. issue command
        • summary: type "nebr"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and listbox should display
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. issue command
        • summary: navigate into the listbox
        • Using the command: "Down arrow" (select next option)
        • Observe: the listbox role and name should be conveyed
        • Ensure AT location after executing the command
          • Target: `*[role="listbox"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      8. is the expectation met?
    • Output: "states, list, nebraska, 1 of 6"
NVDAEdgeyes
  • Result: (pass)
    • Test Case: Navigate into listbox from the combobox input using select next option (Down arrow)
      1. Launch NVDA and Edge.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="listbox"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • summary: navigate forward to the combobox
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. issue command
        • summary: type "nebr"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and listbox should display
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. issue command
        • summary: navigate into the listbox
        • Using the command: "Down arrow" (select next option)
        • Observe: the listbox role and name should be conveyed
        • Ensure AT location after executing the command
          • Target: `*[role="listbox"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      8. is the expectation met?
    • Output: "states, list, nebraska, 1 of 6"
NVDAFirefoxyes
  • Result: (pass)
    • Test Case: Navigate into listbox from the combobox input using select next option (Down arrow)
      1. Launch NVDA and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="listbox"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • summary: navigate forward to the combobox
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. issue command
        • summary: type "nebr"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and listbox should display
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. issue command
        • summary: navigate into the listbox
        • Using the command: "Down arrow" (select next option)
        • Observe: the listbox role and name should be conveyed
        • Ensure AT location after executing the command
          • Target: `*[role="listbox"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      8. is the expectation met?
    • Output: "states list, nebraska, 1 of 6"
OrcaFirefoxyes
  • Result: (pass)
    • Test Case: Navigate into listbox from the combobox input using select next option (Down arrow)
      1. Launch Orca and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="listbox"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • summary: navigate forward to the combobox
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. issue command
        • summary: type "nebr"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and listbox should display
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. issue command
        • summary: navigate into the listbox
        • Using the command: "Down arrow" (select next option)
        • Observe: the listbox role and name should be conveyed
        • Ensure AT location after executing the command
          • Target: `*[role="listbox"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      8. is the expectation met?
    • Output: "states list with 6 items, nebraska"
TalkBackChromenot applicable
  • Result: (na)
    • Test Case: Navigate into listbox from the combobox input using Select next option (Swipe right)
      1. Launch TalkBack and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="listbox"]
        • If multiple elements match the selector, repeat this test for all instances. 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 command
        • summary: navigate forward to the combobox
        • Using the command: "Swipe right (or alt+right arrow)" (Read next item)
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • virtual cursor location: target
      5. issue command
        • summary: type "nebr"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and listbox should display
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • virtual cursor location: target
      6. issue command
        • summary: navigate into the listbox
        • Using the command: "Swipe right" (Select next option)
        • Observe: the listbox role and name should be conveyed
        • Ensure AT location after executing the command
          • Target: `*[role="listbox"]`
          • virtual cursor location: within target
      7. is the expectation met?
    • Output: "states, list box" (swipe right again) "end of example, splitter"
    • Result Notes: na because touch was used
Voice Access (Android)Chromenot applicable-
Voice Control (iOS)Safarinot applicable-
Voice Control (MacOS)Safarinot applicable-
VoiceOver (iOS)Safarinot applicable
  • Result: (na)
    • Test Case: Navigate into listbox from the combobox input using select next option (Swipe down)
      1. Launch VoiceOver (iOS) and Safari.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="listbox"]
        • If multiple elements match the selector, repeat this test for all instances. 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 command
        • summary: navigate forward to the combobox
        • Using the command: "Swipe Right" (Next item)
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • virtual cursor location: target
      5. issue command
        • summary: type "nebr"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and listbox should display
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • virtual cursor location: target
      6. issue command
        • summary: navigate into the listbox
        • Using the command: "Swipe down" (select next option)
        • Observe: the listbox role and name should be conveyed
        • Ensure AT location after executing the command
          • Target: `*[role="listbox"]`
          • virtual cursor location: within target
      7. is the expectation met?
    • Output: "states, nebraska, list start"
    • Result Notes: na because touch was used
VoiceOver (macOS)Safarinone
  • Result: (fail)
    • Test Case: Navigate into listbox from the combobox input using select next option (Down arrow)
      1. Launch VoiceOver (macOS) and Safari.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="listbox"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • summary: navigate forward to the combobox
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. issue command
        • summary: type "nebr"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and listbox should display
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. issue command
        • summary: navigate into the listbox
        • Using the command: "Down arrow" (select next option)
        • Observe: the listbox role and name should be conveyed
        • Ensure AT location after executing the command
          • Target: `*[role="listbox"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      8. is the expectation met?
    • Output: nothing was conveyed
    • Grading note: This command may be expected to fail. This result simply indicates that it did not yield support.
  • Result: (fail)
    • Test Case: Navigate into listbox from the combobox input when the combobox has no value using select next option (Down arrow)
      1. Launch VoiceOver (macOS) and Safari.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="listbox"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • summary: navigate forward to the combobox
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. issue command
        • summary: navigate into the listbox
        • Using the command: "Down arrow" (select next option)
        • Observe: the listbox role and name should be conveyed
        • Ensure AT location after executing the command
          • Target: `*[role="listbox"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      7. is the expectation met?
    • Output: nothing was conveyed, but the list of options was displayed. Nothing was conveyed even when continuing to navigate through the options.
    • Grading note: This command may be expected to fail. This result simply indicates that it did not yield support.
Grading Note: There is no known/documented support. There may still be support for this expectation, but it is undocumented. If this is the case, please report this issue.
Windows Speech RecognitionEdgenot applicable-
Windows Speech RecognitionChromenot applicable-
Windows Voice AccessEdgenot applicable-
Windows Voice AccessChromenot applicable-
Windows KeyboardChromenot applicable-
Windows KeyboardFirefoxnot applicable-
Windows KeyboardEdgenot applicable-
Mac KeyboardChromenot applicable-
Mac KeyboardSafarinot applicable-
iOS KeyboardSafarinot applicable-
Android KeyboardChromenot applicable-

Extended Support for: aria-activedescendant attribute: convey the referenced element as active

These are less common combinations

ATBrowserHas SupportOutput
Dragon Naturally SpeakingIEnot applicable-
Dragon Naturally SpeakingFirefoxnot applicable-
JAWS 2021.2011.16IE 11not applicable
  • Result: (na)
    • Test Case: Navigate into listbox from the combobox input using select next option (Down arrow)
      1. Launch JAWS and IE.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="listbox"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • summary: navigate forward to the combobox
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. issue command
        • summary: type "nebr"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and listbox should display
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. issue command
        • summary: navigate into the listbox
        • Using the command: "Down arrow" (select next option)
        • Observe: the listbox role and name should be conveyed
        • Ensure AT location after executing the command
          • Target: `*[role="listbox"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      8. is the expectation met?
    • Output:
    • Command Notes: example does not support IE; can't test dynamic functionality
NarratorFirefoxunknown-
NarratorChromeunknown-
NarratorIEunknown-
NVDAIEunknown-
TalkBackFirefoxunknown-
Voice Access (Android)Firefoxnot applicable-
VoiceOver (iOS)Chromeunknown-
VoiceOver (macOS)Chromeunknown-
VoiceOver (macOS)Firefoxunknown-
OrcaChromeunknown-
Voice Control (MacOS)Chromenot applicable-
Voice Control (MacOS)Firefoxnot applicable-
Mac KeyboardFirefoxnot applicable-
Android KeyboardFirefoxnot applicable-
Back to top

Expectation for the aria-activedescendant attribute: convey when the referenced element changes - applied to the combobox role

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

This expectation is from the aria-activedescendant attribute feature.

Rationale:

A screen reader user needs to be aware of which descendant is currently active

Strength of this expectation for different types of assistive technologies:

  • Screen Readers: MUST
  • Voice Control: NA

Examples:

  • When navigating within an element with this attribute, screen readers will also announce the referenced element as the reference changes

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: Navigate through listbox using select next option (Down arrow)
      1. Launch JAWS and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="listbox"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • summary: navigate forward to the combobox
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. issue command
        • summary: type "nebr"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and listbox should display
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. issue command
        • summary: navigate through all options in the listbox
        • Using the command: "Down arrow" (select next option)
        • You may need to issue this command multiple times
        • Observe: are the start and end boundaries of the listbox conveyed?
        • Ensure AT location after executing the command
          • Target: `*[role="listbox"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      8. is the expectation met?
    • Output: each option was conveyed. After last option was conveyed, focus was looped back to the first option.
JAWSEdgeyes
  • Result: (pass)
    • Test Case: Navigate through listbox using select next option (Down arrow)
      1. Launch JAWS and Edge.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="listbox"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • summary: navigate forward to the combobox
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. issue command
        • summary: type "nebr"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and listbox should display
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. issue command
        • summary: navigate through all options in the listbox
        • Using the command: "Down arrow" (select next option)
        • You may need to issue this command multiple times
        • Observe: are the start and end boundaries of the listbox conveyed?
        • Ensure AT location after executing the command
          • Target: `*[role="listbox"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      8. is the expectation met?
    • Output: each option was conveyed. After last option was conveyed, focus was looped back to the first option.
JAWSFirefoxyes
  • Result: (pass)
    • Test Case: Navigate through listbox using select next option (Down arrow)
      1. Launch JAWS and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="listbox"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • summary: navigate forward to the combobox
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. issue command
        • summary: type "nebr"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and listbox should display
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. issue command
        • summary: navigate through all options in the listbox
        • Using the command: "Down arrow" (select next option)
        • You may need to issue this command multiple times
        • Observe: are the start and end boundaries of the listbox conveyed?
        • Ensure AT location after executing the command
          • Target: `*[role="listbox"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      8. is the expectation met?
    • Output: each option was conveyed. After last option was conveyed, focus was looped back to the first option.
NarratorEdgepartial
  • Result: (partial)
    • Test Case: Navigate through listbox using select next option (Down arrow)
      1. Launch Narrator and Edge.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="listbox"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • summary: navigate forward to the combobox
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. issue command
        • summary: type "nebr"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and listbox should display
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. issue command
        • summary: navigate through all options in the listbox
        • Using the command: "Down arrow" (select next option)
        • You may need to issue this command multiple times
        • Observe: are the start and end boundaries of the listbox conveyed?
        • Ensure AT location after executing the command
          • Target: `*[role="listbox"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      8. is the expectation met?
    • Output: each option was conveyed. After last option was conveyed, the cursor exited the listbox, but the end boundary was conveyed.
    • Result Notes: partial because Narrator stayed in scan mode and did not respect activedescendant. However, if you manually exit scan mode, activedescendant works as expected.
NVDAChromeyes
  • Result: (pass)
    • Test Case: Navigate through listbox using select next option (Down arrow)
      1. Launch NVDA and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="listbox"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • summary: navigate forward to the combobox
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. issue command
        • summary: type "nebr"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and listbox should display
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. issue command
        • summary: navigate through all options in the listbox
        • Using the command: "Down arrow" (select next option)
        • You may need to issue this command multiple times
        • Observe: are the start and end boundaries of the listbox conveyed?
        • Ensure AT location after executing the command
          • Target: `*[role="listbox"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      8. is the expectation met?
    • Output: each option was conveyed. After last option was conveyed, focus was looped back to the first option.
NVDAEdgeyes
  • Result: (pass)
    • Test Case: Navigate through listbox using select next option (Down arrow)
      1. Launch NVDA and Edge.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="listbox"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • summary: navigate forward to the combobox
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. issue command
        • summary: type "nebr"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and listbox should display
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. issue command
        • summary: navigate through all options in the listbox
        • Using the command: "Down arrow" (select next option)
        • You may need to issue this command multiple times
        • Observe: are the start and end boundaries of the listbox conveyed?
        • Ensure AT location after executing the command
          • Target: `*[role="listbox"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      8. is the expectation met?
    • Output: each option was conveyed. After last option was conveyed, focus was looped back to the first option.
NVDAFirefoxyes
  • Result: (pass)
    • Test Case: Navigate through listbox using select next option (Down arrow)
      1. Launch NVDA and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="listbox"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • summary: navigate forward to the combobox
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. issue command
        • summary: type "nebr"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and listbox should display
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. issue command
        • summary: navigate through all options in the listbox
        • Using the command: "Down arrow" (select next option)
        • You may need to issue this command multiple times
        • Observe: are the start and end boundaries of the listbox conveyed?
        • Ensure AT location after executing the command
          • Target: `*[role="listbox"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      8. is the expectation met?
    • Output: each option was conveyed. After last option was conveyed, focus was looped back to the first option.
OrcaFirefoxyes
  • Result: (pass)
    • Test Case: Navigate through listbox using select next option (Down arrow)
      1. Launch Orca and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="listbox"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • summary: navigate forward to the combobox
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. issue command
        • summary: type "nebr"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and listbox should display
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. issue command
        • summary: navigate through all options in the listbox
        • Using the command: "Down arrow" (select next option)
        • You may need to issue this command multiple times
        • Observe: are the start and end boundaries of the listbox conveyed?
        • Ensure AT location after executing the command
          • Target: `*[role="listbox"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      8. is the expectation met?
    • Output: each option was conveyed. After last option was conveyed, focus was looped back to the first option.
TalkBackChromenot applicable
  • Result: (na)
    • Test Case: Navigate through listbox using Select next option (Swipe right)
      1. Launch TalkBack and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="listbox"]
        • If multiple elements match the selector, repeat this test for all instances. 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 command
        • summary: navigate forward to the combobox
        • Using the command: "Swipe right (or alt+right arrow)" (Read next item)
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • virtual cursor location: target
      5. issue command
        • summary: type "nebr"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and listbox should display
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • virtual cursor location: target
      6. issue command
        • summary: navigate through all options in the listbox
        • Using the command: "Swipe right" (Select next option)
        • You may need to issue this command multiple times
        • Observe: are the start and end boundaries of the listbox conveyed?
        • Ensure AT location after executing the command
          • Target: `*[role="listbox"]`
          • virtual cursor location: within target
      7. is the expectation met?
    • Output: all options were skipped
    • Result Notes: na because touch was used
Voice Access (Android)Chromenot applicable-
Voice Control (iOS)Safarinot applicable-
Voice Control (MacOS)Safarinot applicable-
VoiceOver (iOS)Safarinot applicable
  • Result: (na)
    • Test Case: Navigate through listbox using select next option (Swipe down)
      1. Launch VoiceOver (iOS) and Safari.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="listbox"]
        • If multiple elements match the selector, repeat this test for all instances. 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 command
        • summary: navigate forward to the combobox
        • Using the command: "Swipe Right" (Next item)
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • virtual cursor location: target
      5. issue command
        • summary: type "nebr"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and listbox should display
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • virtual cursor location: target
      6. issue command
        • summary: navigate through all options in the listbox
        • Using the command: "Swipe down" (select next option)
        • You may need to issue this command multiple times
        • Observe: are the start and end boundaries of the listbox conveyed?
        • Ensure AT location after executing the command
          • Target: `*[role="listbox"]`
          • virtual cursor location: within target
      7. is the expectation met?
    • Output: new york, list end
    • Result Notes: na because touch was used
VoiceOver (macOS)Safarinone
  • Result: (fail)
    • Test Case: Navigate through listbox using select next option (Down arrow)
      1. Launch VoiceOver (macOS) and Safari.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="listbox"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • summary: navigate forward to the combobox
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. issue command
        • summary: type "nebr"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and listbox should display
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. issue command
        • summary: navigate through all options in the listbox
        • Using the command: "Down arrow" (select next option)
        • You may need to issue this command multiple times
        • Observe: are the start and end boundaries of the listbox conveyed?
        • Ensure AT location after executing the command
          • Target: `*[role="listbox"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      8. is the expectation met?
    • Output: contents of listbox were skipped entirely
  • Result: (fail)
    • Test Case: Navigate through listbox when combobox has no value using select next option (Down arrow)
      1. Launch VoiceOver (macOS) and Safari.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="listbox"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • summary: navigate forward to the combobox
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. issue command
        • summary: navigate through all options in the listbox
        • Using the command: "Down arrow" (select next option)
        • You may need to issue this command multiple times
        • Observe: are the start and end boundaries of the listbox conveyed?
        • Ensure AT location after executing the command
          • Target: `*[role="listbox"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      7. is the expectation met?
    • Output: nothing was conveyed even though visually options were selected
Grading Note: There is no known/documented support. There may still be support for this expectation, but it is undocumented. If this is the case, please report this issue.
Windows Speech RecognitionEdgenot applicable-
Windows Speech RecognitionChromenot applicable-
Windows Voice AccessEdgenot applicable-
Windows Voice AccessChromenot applicable-
Windows KeyboardChromenot applicable-
Windows KeyboardFirefoxnot applicable-
Windows KeyboardEdgenot applicable-
Mac KeyboardChromenot applicable-
Mac KeyboardSafarinot applicable-
iOS KeyboardSafarinot applicable-
Android KeyboardChromenot applicable-

Extended Support for: aria-activedescendant attribute: convey when the referenced element changes

These are less common combinations

ATBrowserHas SupportOutput
Dragon Naturally SpeakingIEnot applicable-
Dragon Naturally SpeakingFirefoxnot applicable-
JAWS 2021.2011.16IE 11not applicable
  • Result: (na)
    • Test Case: Navigate through listbox using select next option (Down arrow)
      1. Launch JAWS and IE.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="listbox"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • summary: navigate forward to the combobox
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. issue command
        • summary: type "nebr"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and listbox should display
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. issue command
        • summary: navigate through all options in the listbox
        • Using the command: "Down arrow" (select next option)
        • You may need to issue this command multiple times
        • Observe: are the start and end boundaries of the listbox conveyed?
        • Ensure AT location after executing the command
          • Target: `*[role="listbox"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      8. is the expectation met?
    • Output:
    • Command Notes: example does not support IE; can't test dynamic functionality
NarratorFirefoxunknown-
NarratorChromeunknown-
NarratorIEunknown-
NVDAIEunknown-
TalkBackFirefoxunknown-
Voice Access (Android)Firefoxnot applicable-
VoiceOver (iOS)Chromeunknown-
VoiceOver (macOS)Chromeunknown-
VoiceOver (macOS)Firefoxunknown-
OrcaChromeunknown-
Voice Control (MacOS)Chromenot applicable-
Voice Control (MacOS)Firefoxnot applicable-
Mac KeyboardFirefoxnot applicable-
Android KeyboardFirefoxnot applicable-
Back to top

Expectation for the aria-autocomplete attribute: convey the `list` value - applied to the combobox role

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

This expectation is from the aria-autocomplete attribute feature.

Rationale:

Screen reader users need to be aware that a form control has list autocomplete behavior before they start typing so that the behavior is not unexpected. When used on a combobox, this value should hint to users that the popup contains auto complete suggestions rather than a static set of options.

Strength of this expectation for different types of assistive technologies:

  • Screen Readers: MUST
  • Voice Control: NA

Grading method:

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

ATBrowserHas SupportOutput
Dragon Naturally SpeakingChromenot applicable-
JAWSChromenone
  • Result: (fail)
    • Test Case: navigate forward to the collapsed combobox without a value using Read next focusable item (Tab)
      1. Launch JAWS and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "state, edit, combo, collapsed, to set the value use the arrow keys or type the value"
    • Result Notes: Fail because the announcement is the same as if aria-autocomplete was set to none.
    • Grading note: This command may be expected to fail. This result simply indicates that it did not yield support.
Grading Note: There is no known/documented support. There may still be support for this expectation, but it is undocumented. If this is the case, please report this issue.
JAWSEdgenone
  • Result: (fail)
    • Test Case: navigate forward to the collapsed combobox without a value using Read next focusable item (Tab)
      1. Launch JAWS and Edge.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "state, edit, combo, collapsed, to set the value use the arrow keys or type the value"
    • Result Notes: Fail because the announcement is the same as if aria-autocomplete was set to none.
    • Grading note: This command may be expected to fail. This result simply indicates that it did not yield support.
Grading Note: There is no known/documented support. There may still be support for this expectation, but it is undocumented. If this is the case, please report this issue.
JAWSFirefoxnone
  • Result: (fail)
    • Test Case: navigate forward to the collapsed combobox without a value using Read next focusable item (Tab)
      1. Launch JAWS and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "state, edit, combo, collapsed, to set the value use the arrow keys or type the value"
    • Result Notes: Fail because the announcement is the same as if aria-autocomplete was set to none.
    • Grading note: This command may be expected to fail. This result simply indicates that it did not yield support.
Grading Note: There is no known/documented support. There may still be support for this expectation, but it is undocumented. If this is the case, please report this issue.
NarratorEdgenone
  • Result: (fail)
    • Test Case: navigate forward to the collapsed combobox without a value using Read next focusable item (Tab)
      1. Launch Narrator and Edge.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "scan off, state, combo, edit, collapsed, has popup"
    • Grading note: This command may be expected to fail. This result simply indicates that it did not yield support.
Grading Note: There is no known/documented support. There may still be support for this expectation, but it is undocumented. If this is the case, please report this issue.
NVDAChromepartial
  • Result: (partial)
    • Test Case: navigate forward to the collapsed combobox without a value using Read next focusable item (Tab)
      1. Launch NVDA and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "state, combo box, collapsed, has auto complete, editable, blank"
    • Result Notes: auto complete was conveyed, but not the list value
NVDAEdgepartial
  • Result: (partial)
    • Test Case: navigate forward to the collapsed combobox without a value using Read next focusable item (Tab)
      1. Launch NVDA and Edge.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "state, combo box, collapsed, has auto complete, editable, blank"
    • Result Notes: auto complete was conveyed, but not the list value
NVDAFirefoxpartial
  • Result: (partial)
    • Test Case: navigate forward to the collapsed combobox without a value using Read next focusable item (Tab)
      1. Launch NVDA and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "states, combobox, collapsed, has auto complete, editable, blank"
    • Result Notes: auto complete is conveyed, but not the list value
OrcaFirefoxnone
  • Result: (fail)
    • Test Case: navigate forward to the collapsed combobox without a value using Read next focusable item (Tab)
      1. Launch Orca and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "state, editable combobox"
    • Grading note: This command may be expected to fail. This result simply indicates that it did not yield support.
Grading Note: There is no known/documented support. There may still be support for this expectation, but it is undocumented. If this is the case, please report this issue.
TalkBackChromenone
  • Result: (fail)
    • Test Case: navigate forward to the collapsed combobox without a value using Read next item (Swipe right (or alt+right arrow))
      1. Launch TalkBack and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. 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 command
        • Using the command: "Swipe right (or alt+right arrow)" (Read next item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • virtual cursor location: target
      5. is the expectation met?
    • Output: "collapsed, edit box, state"
    • Grading note: This command may be expected to fail. This result simply indicates that it did not yield support.
Grading Note: There is no known/documented support. There may still be support for this expectation, but it is undocumented. If this is the case, please report this issue.
Voice Access (Android)Chromenot applicable-
Voice Control (iOS)Safarinot applicable-
Voice Control (MacOS)Safarinot applicable-
VoiceOver (iOS)Safarinone
  • Result: (fail)
    • Test Case: navigate forward to the collapsed combobox without a value using Next item (Swipe Right)
      1. Launch VoiceOver (iOS) and Safari.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. 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 command
        • Using the command: "Swipe Right" (Next item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • virtual cursor location: target
      5. is the expectation met?
    • Output: "state, combobox, list box popup, collapsed, double tap to expand"
    • Grading note: This command may be expected to fail. This result simply indicates that it did not yield support.
Grading Note: There is no known/documented support. There may still be support for this expectation, but it is undocumented. If this is the case, please report this issue.
VoiceOver (macOS)Safariyes
  • Result: (pass)
    • Test Case: navigate forward to the collapsed combobox without a value using Read next focusable item (Tab)
      1. Launch VoiceOver (macOS) and Safari.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "state, list box popup, menu popup combobox"
Windows Speech RecognitionEdgenot applicable-
Windows Speech RecognitionChromenot applicable-
Windows Voice AccessEdgenot applicable-
Windows Voice AccessChromenot applicable-
Windows KeyboardChromenot applicable-
Windows KeyboardFirefoxnot applicable-
Windows KeyboardEdgenot applicable-
Mac KeyboardChromenot applicable-
Mac KeyboardSafarinot applicable-
iOS KeyboardSafarinot applicable-
Android KeyboardChromenot applicable-

Extended Support for: aria-autocomplete attribute: convey the `list` value

These are less common combinations

ATBrowserHas SupportOutput
Dragon Naturally SpeakingIEnot applicable-
Dragon Naturally SpeakingFirefoxnot applicable-
JAWS 2021.2011.16IE 11none
  • Result: (fail)
    • Test Case: navigate forward to the collapsed combobox without a value using Read next focusable item (Tab)
      1. Launch JAWS and IE.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "state, edit, type in text"
NarratorFirefoxunknown-
NarratorChromeunknown-
NarratorIEunknown-
NVDAIEunknown-
TalkBackFirefoxunknown-
Voice Access (Android)Firefoxnot applicable-
VoiceOver (iOS)Chromeunknown-
VoiceOver (macOS)Chromeunknown-
VoiceOver (macOS)Firefoxunknown-
OrcaChromeunknown-
Voice Control (MacOS)Chromenot applicable-
Voice Control (MacOS)Firefoxnot applicable-
Mac KeyboardFirefoxnot applicable-
Android KeyboardFirefoxnot applicable-
Back to top

Expectation for the aria-controls attribute: allow the user to jump to the controlled element - applied to the combobox role

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

This expectation is from the aria-controls attribute feature.

Rationale:

The controlled element might not be close to the element with aria-controls and the user might find it convenient to jump directly to the controlled element.

Strength of this expectation for different types of assistive technologies:

  • Screen Readers: MUST
  • Voice Control: NA

Grading method:

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

ATBrowserHas SupportOutput
Dragon Naturally SpeakingChromenot applicable-
JAWSChromeyes
  • Result: (pass)
    • Test Case: Navigate into listbox from the combobox input using Jump to controlled element (Insert + alt + M)
      1. Launch JAWS and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="listbox"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • summary: navigate forward to the combobox
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. issue command
        • summary: type "nebr"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and listbox should display
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. issue command
        • summary: navigate into the listbox
        • Using the command: "Insert + alt + M" (Jump to controlled element)
        • Observe: the listbox role and name should be conveyed
        • Ensure AT location after executing the command
          • Target: `*[role="listbox"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      8. is the expectation met?
    • Output: "move to controlled element, list box"
JAWSEdgeyes
  • Result: (pass)
    • Test Case: Navigate into listbox from the combobox input using Jump to controlled element (Insert + alt + M)
      1. Launch JAWS and Edge.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="listbox"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • summary: navigate forward to the combobox
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. issue command
        • summary: type "nebr"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and listbox should display
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. issue command
        • summary: navigate into the listbox
        • Using the command: "Insert + alt + M" (Jump to controlled element)
        • Observe: the listbox role and name should be conveyed
        • Ensure AT location after executing the command
          • Target: `*[role="listbox"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      8. is the expectation met?
    • Output: "move to controlled element, list box"
JAWSFirefoxyes
  • Result: (pass)
    • Test Case: Navigate into listbox from the combobox input using Jump to controlled element (Insert + alt + M)
      1. Launch JAWS and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="listbox"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • summary: navigate forward to the combobox
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. issue command
        • summary: type "nebr"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and listbox should display
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. issue command
        • summary: navigate into the listbox
        • Using the command: "Insert + alt + M" (Jump to controlled element)
        • Observe: the listbox role and name should be conveyed
        • Ensure AT location after executing the command
          • Target: `*[role="listbox"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      8. is the expectation met?
    • Output: "move to controlled element, list box"
NarratorEdgenone
  • Result: (fail)
    • Test Case: navigate forward to the collapsed combobox without a value using Read next focusable item (Tab)
      1. Launch Narrator and Edge.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "scan off, state, combo, edit, collapsed, has popup"
    • Grading note: This command may be expected to fail. This result simply indicates that it did not yield support.
Grading Note: There is no known/documented support. There may still be support for this expectation, but it is undocumented. If this is the case, please report this issue.
NVDAChromenone
  • Result: (fail)
    • Test Case: navigate forward to the collapsed combobox without a value using Read next focusable item (Tab)
      1. Launch NVDA and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "state, combo box, collapsed, has auto complete, editable, blank"
    • Grading note: This command may be expected to fail. This result simply indicates that it did not yield support.
Grading Note: There is no known/documented support. There may still be support for this expectation, but it is undocumented. If this is the case, please report this issue.
NVDAEdgenone
  • Result: (fail)
    • Test Case: navigate forward to the collapsed combobox without a value using Read next focusable item (Tab)
      1. Launch NVDA and Edge.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "state, combo box, collapsed, has auto complete, editable, blank"
    • Grading note: This command may be expected to fail. This result simply indicates that it did not yield support.
Grading Note: There is no known/documented support. There may still be support for this expectation, but it is undocumented. If this is the case, please report this issue.
NVDAFirefoxnone
  • Result: (fail)
    • Test Case: navigate forward to the collapsed combobox without a value using Read next focusable item (Tab)
      1. Launch NVDA and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "states, combobox, collapsed, has auto complete, editable, blank"
    • Grading note: This command may be expected to fail. This result simply indicates that it did not yield support.
Grading Note: There is no known/documented support. There may still be support for this expectation, but it is undocumented. If this is the case, please report this issue.
OrcaFirefoxnone
  • Result: (fail)
    • Test Case: navigate forward to the collapsed combobox without a value using Read next focusable item (Tab)
      1. Launch Orca and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "state, editable combobox"
    • Grading note: This command may be expected to fail. This result simply indicates that it did not yield support.
Grading Note: There is no known/documented support. There may still be support for this expectation, but it is undocumented. If this is the case, please report this issue.
TalkBackChromenone
  • Result: (fail)
    • Test Case: navigate forward to the collapsed combobox without a value using Read next item (Swipe right (or alt+right arrow))
      1. Launch TalkBack and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. 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 command
        • Using the command: "Swipe right (or alt+right arrow)" (Read next item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • virtual cursor location: target
      5. is the expectation met?
    • Output: "collapsed, edit box, state"
    • Grading note: This command may be expected to fail. This result simply indicates that it did not yield support.
Grading Note: There is no known/documented support. There may still be support for this expectation, but it is undocumented. If this is the case, please report this issue.
Voice Access (Android)Chromenot applicable-
Voice Control (iOS)Safarinot applicable-
Voice Control (MacOS)Safarinot applicable-
VoiceOver (iOS)Safarinone
  • Result: (fail)
    • Test Case: navigate forward to the collapsed combobox without a value using Next item (Swipe Right)
      1. Launch VoiceOver (iOS) and Safari.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. 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 command
        • Using the command: "Swipe Right" (Next item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • virtual cursor location: target
      5. is the expectation met?
    • Output: "state, combobox, list box popup, collapsed, double tap to expand"
    • Grading note: This command may be expected to fail. This result simply indicates that it did not yield support.
Grading Note: There is no known/documented support. There may still be support for this expectation, but it is undocumented. If this is the case, please report this issue.
VoiceOver (macOS)Safarinone
  • Result: (fail)
    • Test Case: navigate forward to the collapsed combobox without a value using Read next focusable item (Tab)
      1. Launch VoiceOver (macOS) and Safari.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "state, list box popup, menu popup combobox"
    • Grading note: This command may be expected to fail. This result simply indicates that it did not yield support.
Grading Note: There is no known/documented support. There may still be support for this expectation, but it is undocumented. If this is the case, please report this issue.
Windows Speech RecognitionEdgenot applicable-
Windows Speech RecognitionChromenot applicable-
Windows Voice AccessEdgenot applicable-
Windows Voice AccessChromenot applicable-
Windows KeyboardChromenot applicable-
Windows KeyboardFirefoxnot applicable-
Windows KeyboardEdgenot applicable-
Mac KeyboardChromenot applicable-
Mac KeyboardSafarinot applicable-
iOS KeyboardSafarinot applicable-
Android KeyboardChromenot applicable-

Extended Support for: aria-controls attribute: allow the user to jump to the controlled element

These are less common combinations

ATBrowserHas SupportOutput
Dragon Naturally SpeakingIEnot applicable-
Dragon Naturally SpeakingFirefoxnot applicable-
JAWS 2021.2011.16IE 11not applicable
  • Result: (na)
    • Test Case: Navigate into listbox from the combobox input using Jump to controlled element (Insert + alt + M)
      1. Launch JAWS and IE.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="listbox"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • summary: navigate forward to the combobox
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. issue command
        • summary: type "nebr"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and listbox should display
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. issue command
        • summary: navigate into the listbox
        • Using the command: "Insert + alt + M" (Jump to controlled element)
        • Observe: the listbox role and name should be conveyed
        • Ensure AT location after executing the command
          • Target: `*[role="listbox"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      8. is the expectation met?
    • Output:
    • Command Notes: example does not support IE; can't test dynamic functionality
NarratorFirefoxunknown-
NarratorChromeunknown-
NarratorIEunknown-
NVDAIEunknown-
TalkBackFirefoxunknown-
Voice Access (Android)Firefoxnot applicable-
VoiceOver (iOS)Chromeunknown-
VoiceOver (macOS)Chromeunknown-
VoiceOver (macOS)Firefoxunknown-
OrcaChromeunknown-
Voice Control (MacOS)Chromenot applicable-
Voice Control (MacOS)Firefoxnot applicable-
Mac KeyboardFirefoxnot applicable-
Android KeyboardFirefoxnot applicable-
Back to top

Expectation for the aria-controls attribute: allow the user to jump to the controlled element - applied to the button element

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

This expectation is from the aria-controls attribute feature.

Rationale:

The controlled element might not be close to the element with aria-controls and the user might find it convenient to jump directly to the controlled element.

Strength of this expectation for different types of assistive technologies:

  • Screen Readers: MUST
  • Voice Control: NA

Grading method:

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

ATBrowserHas SupportOutput
Dragon Naturally SpeakingChromenot applicable-
JAWSChromeyes
  • Result: (pass)
    • Test Case: Navigate into listbox from the button for the combobox using Jump to controlled element (Insert + alt + M)
      1. Launch JAWS and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:button
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • summary: navigate forward to the button for the combobox
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `button`
          • keyboard focus location: target
          • virtual cursor location: target
      6. issue command
        • summary: activate the button to expand the listbox
        • Using the command: "Enter or Space" (Activate Button)
      7. set mode to browse
      8. issue command
        • summary: navigate forward to the button for the combobox
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `button`
          • keyboard focus location: target
          • virtual cursor location: target
      9. issue command
        • summary: navigate into the listbox
        • Using the command: "Insert + alt + M" (Jump to controlled element)
        • Observe: the listbox role and name should be conveyed
        • Ensure AT location after executing the command
          • Target: `button`
          • keyboard focus location: within target
          • virtual cursor location: within target
      10. is the expectation met?
    • Output: "move to controlled element, list box"
JAWSEdgeyes
  • Result: (pass)
    • Test Case: Navigate into listbox from the button for the combobox using Jump to controlled element (Insert + alt + M)
      1. Launch JAWS and Edge.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:button
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • summary: navigate forward to the button for the combobox
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `button`
          • keyboard focus location: target
          • virtual cursor location: target
      6. issue command
        • summary: activate the button to expand the listbox
        • Using the command: "Enter or Space" (Activate Button)
      7. set mode to browse
      8. issue command
        • summary: navigate forward to the button for the combobox
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `button`
          • keyboard focus location: target
          • virtual cursor location: target
      9. issue command
        • summary: navigate into the listbox
        • Using the command: "Insert + alt + M" (Jump to controlled element)
        • Observe: the listbox role and name should be conveyed
        • Ensure AT location after executing the command
          • Target: `button`
          • keyboard focus location: within target
          • virtual cursor location: within target
      10. is the expectation met?
    • Output: "move to controlled element, list box"
JAWSFirefoxyes
  • Result: (pass)
    • Test Case: Navigate into listbox from the button for the combobox using Jump to controlled element (Insert + alt + M)
      1. Launch JAWS and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:button
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • summary: navigate forward to the button for the combobox
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `button`
          • keyboard focus location: target
          • virtual cursor location: target
      6. issue command
        • summary: activate the button to expand the listbox
        • Using the command: "Enter or Space" (Activate Button)
      7. set mode to browse
      8. issue command
        • summary: navigate forward to the button for the combobox
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `button`
          • keyboard focus location: target
          • virtual cursor location: target
      9. issue command
        • summary: navigate into the listbox
        • Using the command: "Insert + alt + M" (Jump to controlled element)
        • Observe: the listbox role and name should be conveyed
        • Ensure AT location after executing the command
          • Target: `button`
          • keyboard focus location: within target
          • virtual cursor location: within target
      10. is the expectation met?
    • Output: "move to controlled element, list box"
NarratorEdgenone
  • Result: (fail)
    • Test Case: navigate forward to the button for the collapsed combobox without a value using Next button (b)
      1. Launch Narrator and Edge.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:button[aria-expanded="true"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Set the value of the target to "ne"
      5. set mode to browse
      6. issue command
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `button[aria-expanded="true"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. is the expectation met?
    • Output: states, button expanded
    • Grading note: This command may be expected to fail. This result simply indicates that it did not yield support.
Grading Note: There is no known/documented support. There may still be support for this expectation, but it is undocumented. If this is the case, please report this issue.
NVDAChromenone
  • Result: (fail)
    • Test Case: navigate forward to the button for the collapsed combobox without a value using Next button (b)
      1. Launch NVDA and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:button[aria-expanded="true"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Set the value of the target to "ne"
      5. set mode to browse
      6. issue command
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `button[aria-expanded="true"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. is the expectation met?
    • Output: "states, button expanded"
    • Grading note: This command may be expected to fail. This result simply indicates that it did not yield support.
Grading Note: There is no known/documented support. There may still be support for this expectation, but it is undocumented. If this is the case, please report this issue.
NVDAEdgenone
  • Result: (fail)
    • Test Case: navigate forward to the button for the collapsed combobox without a value using Next button (b)
      1. Launch NVDA and Edge.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:button[aria-expanded="true"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Set the value of the target to "ne"
      5. set mode to browse
      6. issue command
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `button[aria-expanded="true"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. is the expectation met?
    • Output: "states, button expanded"
    • Grading note: This command may be expected to fail. This result simply indicates that it did not yield support.
Grading Note: There is no known/documented support. There may still be support for this expectation, but it is undocumented. If this is the case, please report this issue.
NVDAFirefoxnone
  • Result: (fail)
    • Test Case: navigate forward to the button for the collapsed combobox without a value using Next button (b)
      1. Launch NVDA and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:button[aria-expanded="true"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Set the value of the target to "ne"
      5. set mode to browse
      6. issue command
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `button[aria-expanded="true"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. is the expectation met?
    • Output: "states, button expanded"
    • Grading note: This command may be expected to fail. This result simply indicates that it did not yield support.
Grading Note: There is no known/documented support. There may still be support for this expectation, but it is undocumented. If this is the case, please report this issue.
OrcaFirefoxnone
  • Result: (fail)
    • Test Case: navigate forward to the button for the collapsed combobox without a value using Next button (b)
      1. Launch Orca and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:button[aria-expanded="true"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Set the value of the target to "ne"
      5. set mode to browse
      6. issue command
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `button[aria-expanded="true"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. is the expectation met?
    • Output: "states, expanded, push button"
    • Grading note: This command may be expected to fail. This result simply indicates that it did not yield support.
Grading Note: There is no known/documented support. There may still be support for this expectation, but it is undocumented. If this is the case, please report this issue.
TalkBackChromenone
  • Result: (fail)
    • Test Case: navigate forward to the button for the collapsed combobox without a value using Read next item (Swipe right (or alt+right arrow))
      1. Launch TalkBack and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:button[aria-expanded="true"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Set the value of the target to "ne"
      5. issue command
        • Using the command: "Swipe right (or alt+right arrow)" (Read next item)
        • Ensure AT location after executing the command
          • Target: `button[aria-expanded="true"]`
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "expanded, states, button"
    • Grading note: This command may be expected to fail. This result simply indicates that it did not yield support.
Grading Note: There is no known/documented support. There may still be support for this expectation, but it is undocumented. If this is the case, please report this issue.
Voice Access (Android)Chromenot applicable-
Voice Control (iOS)Safarinot applicable-
Voice Control (MacOS)Safarinot applicable-
VoiceOver (iOS)Safarinone
  • Result: (fail)
    • Test Case: navigate forward to the button for the collapsed combobox without a value using Next item (Swipe Right)
      1. Launch VoiceOver (iOS) and Safari.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:button[aria-expanded="true"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Set the value of the target to "ne"
      5. issue command
        • Using the command: "Swipe Right" (Next item)
        • Ensure AT location after executing the command
          • Target: `button[aria-expanded="true"]`
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "states, button, expanded"
    • Grading note: This command may be expected to fail. This result simply indicates that it did not yield support.
Grading Note: There is no known/documented support. There may still be support for this expectation, but it is undocumented. If this is the case, please report this issue.
VoiceOver (macOS)Safarinone
  • Result: (fail)
    • Test Case: navigate forward to the button for the collapsed combobox without a value using Read next item (VO + Right arrow)
      1. Launch VoiceOver (macOS) and Safari.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:button[aria-expanded="true"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Set the value of the target to "ne"
      5. set mode to browse
      6. issue command
        • Using the command: "VO + Right arrow" (Read next item)
        • Ensure AT location after executing the command
          • Target: `button[aria-expanded="true"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. is the expectation met?
    • Output: "states, button expanded"
    • Grading note: This command may be expected to fail. This result simply indicates that it did not yield support.
Grading Note: There is no known/documented support. There may still be support for this expectation, but it is undocumented. If this is the case, please report this issue.
Windows Speech RecognitionEdgenot applicable-
Windows Speech RecognitionChromenot applicable-
Windows Voice AccessEdgenot applicable-
Windows Voice AccessChromenot applicable-
Windows KeyboardChromenot applicable-
Windows KeyboardFirefoxnot applicable-
Windows KeyboardEdgenot applicable-
Mac KeyboardChromenot applicable-
Mac KeyboardSafarinot applicable-
iOS KeyboardSafarinot applicable-
Android KeyboardChromenot applicable-

Extended Support for: aria-controls attribute: allow the user to jump to the controlled element

These are less common combinations

ATBrowserHas SupportOutput
Dragon Naturally SpeakingIEnot applicable-
Dragon Naturally SpeakingFirefoxnot applicable-
JAWS 2021.2011.16IE 11not applicable
  • Result: (na)
    • Test Case: Navigate into listbox from the button for the combobox using Jump to controlled element (Insert + alt + M)
      1. Launch JAWS and IE.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:button
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • summary: navigate forward to the button for the combobox
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `button`
          • keyboard focus location: target
          • virtual cursor location: target
      6. issue command
        • summary: activate the button to expand the listbox
        • Using the command: "Enter or Space" (Activate Button)
      7. set mode to browse
      8. issue command
        • summary: navigate forward to the button for the combobox
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `button`
          • keyboard focus location: target
          • virtual cursor location: target
      9. issue command
        • summary: navigate into the listbox
        • Using the command: "Insert + alt + M" (Jump to controlled element)
        • Observe: the listbox role and name should be conveyed
        • Ensure AT location after executing the command
          • Target: `button`
          • keyboard focus location: within target
          • virtual cursor location: within target
      10. is the expectation met?
    • Output:
    • Command Notes: example does not support IE; can't test dynamic functionality
NarratorFirefoxunknown-
NarratorChromeunknown-
NarratorIEunknown-
NVDAIEunknown-
TalkBackFirefoxunknown-
Voice Access (Android)Firefoxnot applicable-
VoiceOver (iOS)Chromeunknown-
VoiceOver (macOS)Chromeunknown-
VoiceOver (macOS)Firefoxunknown-
OrcaChromeunknown-
Voice Control (MacOS)Chromenot applicable-
Voice Control (MacOS)Firefoxnot applicable-
Mac KeyboardFirefoxnot applicable-
Android KeyboardFirefoxnot applicable-
Back to top

Expectation for the aria-controls attribute: convey the presence of the aria-controls attribute - applied to the combobox role

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

This expectation is from the aria-controls attribute feature.

Rationale:

Users need to be aware that an element has aria-controls functionality. If the presence of the attribute is not explicitly conveyed, then users may not be aware of the functionality. However, some screen readers may choose to not convey the presence by default since the controlled element is usually directly after the controlling element in the reading order and easily findable. In these situations, explicitly conveying the presence could be unnecessarily verbose.

Strength of this expectation for different types of assistive technologies:

  • Screen Readers: SHOULD
  • Voice Control: NA

Examples:

  • When supported, screen readers will often hint that an element controls another element, and may even announce the keyboard shortcut to jump to the controlled element
  • Most screen readers either do not support this attribute or the setting to convey the presence is turned off by default. This is because in the vast majority of cases, the controlled element is adjacent to the element with aria-controls, and thus announcing the presence is redundant and add extra verbosity.

Grading method:

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

Notes:

This is not a MUST requirement, because the functionality could still be discoverable via the screen reader's command to jump to the controlled element. If the command fails, the attribute is not present.

ATBrowserHas SupportOutput
Dragon Naturally SpeakingChromenot applicable-
JAWSChromenone
  • Result: (fail)
    • Test Case: navigate forward to the collapsed combobox without a value using Read next focusable item (Tab)
      1. Launch JAWS and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "state, edit, combo, collapsed, to set the value use the arrow keys or type the value"
    • Grading note: This command may be expected to fail. This result simply indicates that it did not yield support.
Grading Note: There is no known/documented support. There may still be support for this expectation, but it is undocumented. If this is the case, please report this issue.
JAWSEdgenone
  • Result: (fail)
    • Test Case: navigate forward to the collapsed combobox without a value using Read next focusable item (Tab)
      1. Launch JAWS and Edge.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "state, edit, combo, collapsed, to set the value use the arrow keys or type the value"
    • Grading note: This command may be expected to fail. This result simply indicates that it did not yield support.
Grading Note: There is no known/documented support. There may still be support for this expectation, but it is undocumented. If this is the case, please report this issue.
JAWSFirefoxnone
  • Result: (fail)
    • Test Case: navigate forward to the collapsed combobox without a value using Read next focusable item (Tab)
      1. Launch JAWS and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "state, edit, combo, collapsed, to set the value use the arrow keys or type the value"
    • Grading note: This command may be expected to fail. This result simply indicates that it did not yield support.
Grading Note: There is no known/documented support. There may still be support for this expectation, but it is undocumented. If this is the case, please report this issue.
NarratorEdgenone
  • Result: (fail)
    • Test Case: navigate forward to the collapsed combobox without a value using Read next focusable item (Tab)
      1. Launch Narrator and Edge.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "scan off, state, combo, edit, collapsed, has popup"
    • Grading note: This command may be expected to fail. This result simply indicates that it did not yield support.
Grading Note: There is no known/documented support. There may still be support for this expectation, but it is undocumented. If this is the case, please report this issue.
NVDAChromenone
  • Result: (fail)
    • Test Case: navigate forward to the collapsed combobox without a value using Read next focusable item (Tab)
      1. Launch NVDA and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "state, combo box, collapsed, has auto complete, editable, blank"
    • Grading note: This command may be expected to fail. This result simply indicates that it did not yield support.
Grading Note: There is no known/documented support. There may still be support for this expectation, but it is undocumented. If this is the case, please report this issue.
NVDAEdgenone
  • Result: (fail)
    • Test Case: navigate forward to the collapsed combobox without a value using Read next focusable item (Tab)
      1. Launch NVDA and Edge.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "state, combo box, collapsed, has auto complete, editable, blank"
    • Grading note: This command may be expected to fail. This result simply indicates that it did not yield support.
Grading Note: There is no known/documented support. There may still be support for this expectation, but it is undocumented. If this is the case, please report this issue.
NVDAFirefoxnone
  • Result: (fail)
    • Test Case: navigate forward to the collapsed combobox without a value using Read next focusable item (Tab)
      1. Launch NVDA and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "states, combobox, collapsed, has auto complete, editable, blank"
    • Grading note: This command may be expected to fail. This result simply indicates that it did not yield support.
Grading Note: There is no known/documented support. There may still be support for this expectation, but it is undocumented. If this is the case, please report this issue.
OrcaFirefoxnone
  • Result: (fail)
    • Test Case: navigate forward to the collapsed combobox without a value using Read next focusable item (Tab)
      1. Launch Orca and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "state, editable combobox"
    • Grading note: This command may be expected to fail. This result simply indicates that it did not yield support.
Grading Note: There is no known/documented support. There may still be support for this expectation, but it is undocumented. If this is the case, please report this issue.
TalkBackChromenone
  • Result: (fail)
    • Test Case: navigate forward to the collapsed combobox without a value using Read next item (Swipe right (or alt+right arrow))
      1. Launch TalkBack and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. 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 command
        • Using the command: "Swipe right (or alt+right arrow)" (Read next item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • virtual cursor location: target
      5. is the expectation met?
    • Output: "collapsed, edit box, state"
    • Grading note: This command may be expected to fail. This result simply indicates that it did not yield support.
Grading Note: There is no known/documented support. There may still be support for this expectation, but it is undocumented. If this is the case, please report this issue.
Voice Access (Android)Chromenot applicable-
Voice Control (iOS)Safarinot applicable-
Voice Control (MacOS)Safarinot applicable-
VoiceOver (iOS)Safarinone
  • Result: (fail)
    • Test Case: navigate forward to the collapsed combobox without a value using Next item (Swipe Right)
      1. Launch VoiceOver (iOS) and Safari.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. 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 command
        • Using the command: "Swipe Right" (Next item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • virtual cursor location: target
      5. is the expectation met?
    • Output: "state, combobox, list box popup, collapsed, double tap to expand"
    • Grading note: This command may be expected to fail. This result simply indicates that it did not yield support.
Grading Note: There is no known/documented support. There may still be support for this expectation, but it is undocumented. If this is the case, please report this issue.
VoiceOver (macOS)Safarinone
  • Result: (fail)
    • Test Case: navigate forward to the collapsed combobox without a value using Read next focusable item (Tab)
      1. Launch VoiceOver (macOS) and Safari.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "state, list box popup, menu popup combobox"
    • Grading note: This command may be expected to fail. This result simply indicates that it did not yield support.
Grading Note: There is no known/documented support. There may still be support for this expectation, but it is undocumented. If this is the case, please report this issue.
Windows Speech RecognitionEdgenot applicable-
Windows Speech RecognitionChromenot applicable-
Windows Voice AccessEdgenot applicable-
Windows Voice AccessChromenot applicable-
Windows KeyboardChromenot applicable-
Windows KeyboardFirefoxnot applicable-
Windows KeyboardEdgenot applicable-
Mac KeyboardChromenot applicable-
Mac KeyboardSafarinot applicable-
iOS KeyboardSafarinot applicable-
Android KeyboardChromenot applicable-

Extended Support for: aria-controls attribute: convey the presence of the aria-controls attribute

These are less common combinations

ATBrowserHas SupportOutput
Dragon Naturally SpeakingIEnot applicable-
Dragon Naturally SpeakingFirefoxnot applicable-
JAWS 2021.2011.16IE 11none
  • Result: (fail)
    • Test Case: navigate forward to the collapsed combobox without a value using Read next focusable item (Tab)
      1. Launch JAWS and IE.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "state, edit, type in text"
NarratorFirefoxunknown-
NarratorChromeunknown-
NarratorIEunknown-
NVDAIEunknown-
TalkBackFirefoxunknown-
Voice Access (Android)Firefoxnot applicable-
VoiceOver (iOS)Chromeunknown-
VoiceOver (macOS)Chromeunknown-
VoiceOver (macOS)Firefoxunknown-
OrcaChromeunknown-
Voice Control (MacOS)Chromenot applicable-
Voice Control (MacOS)Firefoxnot applicable-
Mac KeyboardFirefoxnot applicable-
Android KeyboardFirefoxnot applicable-
Back to top

Expectation for the aria-controls attribute: convey the presence of the aria-controls attribute - applied to the button element

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

This expectation is from the aria-controls attribute feature.

Rationale:

Users need to be aware that an element has aria-controls functionality. If the presence of the attribute is not explicitly conveyed, then users may not be aware of the functionality. However, some screen readers may choose to not convey the presence by default since the controlled element is usually directly after the controlling element in the reading order and easily findable. In these situations, explicitly conveying the presence could be unnecessarily verbose.

Strength of this expectation for different types of assistive technologies:

  • Screen Readers: SHOULD
  • Voice Control: NA

Examples:

  • When supported, screen readers will often hint that an element controls another element, and may even announce the keyboard shortcut to jump to the controlled element
  • Most screen readers either do not support this attribute or the setting to convey the presence is turned off by default. This is because in the vast majority of cases, the controlled element is adjacent to the element with aria-controls, and thus announcing the presence is redundant and add extra verbosity.

Grading method:

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

Notes:

This is not a MUST requirement, because the functionality could still be discoverable via the screen reader's command to jump to the controlled element. If the command fails, the attribute is not present.

ATBrowserHas SupportOutput
Dragon Naturally SpeakingChromenot applicable-
JAWSChromenone
  • Result: (fail)
    • Test Case: navigate forward to the button for the collapsed combobox without a value using Next button (b)
      1. Launch JAWS and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:button[aria-expanded="true"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Set the value of the target to "ne"
      5. set mode to browse
      6. issue command
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `button[aria-expanded="true"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. is the expectation met?
    • Output: "states, button expanded"
    • Grading note: This command may be expected to fail. This result simply indicates that it did not yield support.
Grading Note: There is no known/documented support. There may still be support for this expectation, but it is undocumented. If this is the case, please report this issue.
JAWSEdgenone
  • Result: (fail)
    • Test Case: navigate forward to the button for the collapsed combobox without a value using Next button (b)
      1. Launch JAWS and Edge.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:button[aria-expanded="true"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Set the value of the target to "ne"
      5. set mode to browse
      6. issue command
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `button[aria-expanded="true"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. is the expectation met?
    • Output: "states, button expanded"
    • Grading note: This command may be expected to fail. This result simply indicates that it did not yield support.
Grading Note: There is no known/documented support. There may still be support for this expectation, but it is undocumented. If this is the case, please report this issue.
JAWSFirefoxnone
  • Result: (fail)
    • Test Case: navigate forward to the button for the collapsed combobox without a value using Next button (b)
      1. Launch JAWS and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:button[aria-expanded="true"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Set the value of the target to "ne"
      5. set mode to browse
      6. issue command
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `button[aria-expanded="true"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. is the expectation met?
    • Output: "states, button expanded"
    • Grading note: This command may be expected to fail. This result simply indicates that it did not yield support.
Grading Note: There is no known/documented support. There may still be support for this expectation, but it is undocumented. If this is the case, please report this issue.
NarratorEdgenone
  • Result: (fail)
    • Test Case: navigate forward to the button for the collapsed combobox without a value using Next button (b)
      1. Launch Narrator and Edge.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:button[aria-expanded="true"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Set the value of the target to "ne"
      5. set mode to browse
      6. issue command
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `button[aria-expanded="true"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. is the expectation met?
    • Output: states, button expanded
    • Grading note: This command may be expected to fail. This result simply indicates that it did not yield support.
Grading Note: There is no known/documented support. There may still be support for this expectation, but it is undocumented. If this is the case, please report this issue.
NVDAChromenone
  • Result: (fail)
    • Test Case: navigate forward to the button for the collapsed combobox without a value using Next button (b)
      1. Launch NVDA and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:button[aria-expanded="true"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Set the value of the target to "ne"
      5. set mode to browse
      6. issue command
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `button[aria-expanded="true"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. is the expectation met?
    • Output: "states, button expanded"
    • Grading note: This command may be expected to fail. This result simply indicates that it did not yield support.
Grading Note: There is no known/documented support. There may still be support for this expectation, but it is undocumented. If this is the case, please report this issue.
NVDAEdgenone
  • Result: (fail)
    • Test Case: navigate forward to the button for the collapsed combobox without a value using Next button (b)
      1. Launch NVDA and Edge.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:button[aria-expanded="true"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Set the value of the target to "ne"
      5. set mode to browse
      6. issue command
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `button[aria-expanded="true"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. is the expectation met?
    • Output: "states, button expanded"
    • Grading note: This command may be expected to fail. This result simply indicates that it did not yield support.
Grading Note: There is no known/documented support. There may still be support for this expectation, but it is undocumented. If this is the case, please report this issue.
NVDAFirefoxnone
  • Result: (fail)
    • Test Case: navigate forward to the button for the collapsed combobox without a value using Next button (b)
      1. Launch NVDA and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:button[aria-expanded="true"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Set the value of the target to "ne"
      5. set mode to browse
      6. issue command
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `button[aria-expanded="true"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. is the expectation met?
    • Output: "states, button expanded"
    • Grading note: This command may be expected to fail. This result simply indicates that it did not yield support.
Grading Note: There is no known/documented support. There may still be support for this expectation, but it is undocumented. If this is the case, please report this issue.
OrcaFirefoxnone
  • Result: (fail)
    • Test Case: navigate forward to the button for the collapsed combobox without a value using Next button (b)
      1. Launch Orca and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:button[aria-expanded="true"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Set the value of the target to "ne"
      5. set mode to browse
      6. issue command
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `button[aria-expanded="true"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. is the expectation met?
    • Output: "states, expanded, push button"
    • Grading note: This command may be expected to fail. This result simply indicates that it did not yield support.
Grading Note: There is no known/documented support. There may still be support for this expectation, but it is undocumented. If this is the case, please report this issue.
TalkBackChromenone
  • Result: (fail)
    • Test Case: navigate forward to the button for the collapsed combobox without a value using Read next item (Swipe right (or alt+right arrow))
      1. Launch TalkBack and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:button[aria-expanded="true"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Set the value of the target to "ne"
      5. issue command
        • Using the command: "Swipe right (or alt+right arrow)" (Read next item)
        • Ensure AT location after executing the command
          • Target: `button[aria-expanded="true"]`
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "expanded, states, button"
    • Grading note: This command may be expected to fail. This result simply indicates that it did not yield support.
Grading Note: There is no known/documented support. There may still be support for this expectation, but it is undocumented. If this is the case, please report this issue.
Voice Access (Android)Chromenot applicable-
Voice Control (iOS)Safarinot applicable-
Voice Control (MacOS)Safarinot applicable-
VoiceOver (iOS)Safarinone
  • Result: (fail)
    • Test Case: navigate forward to the button for the collapsed combobox without a value using Next item (Swipe Right)
      1. Launch VoiceOver (iOS) and Safari.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:button[aria-expanded="true"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Set the value of the target to "ne"
      5. issue command
        • Using the command: "Swipe Right" (Next item)
        • Ensure AT location after executing the command
          • Target: `button[aria-expanded="true"]`
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "states, button, expanded"
    • Grading note: This command may be expected to fail. This result simply indicates that it did not yield support.
Grading Note: There is no known/documented support. There may still be support for this expectation, but it is undocumented. If this is the case, please report this issue.
VoiceOver (macOS)Safarinone
  • Result: (fail)
    • Test Case: navigate forward to the button for the collapsed combobox without a value using Read next item (VO + Right arrow)
      1. Launch VoiceOver (macOS) and Safari.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:button[aria-expanded="true"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Set the value of the target to "ne"
      5. set mode to browse
      6. issue command
        • Using the command: "VO + Right arrow" (Read next item)
        • Ensure AT location after executing the command
          • Target: `button[aria-expanded="true"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. is the expectation met?
    • Output: "states, button expanded"
    • Grading note: This command may be expected to fail. This result simply indicates that it did not yield support.
Grading Note: There is no known/documented support. There may still be support for this expectation, but it is undocumented. If this is the case, please report this issue.
Windows Speech RecognitionEdgenot applicable-
Windows Speech RecognitionChromenot applicable-
Windows Voice AccessEdgenot applicable-
Windows Voice AccessChromenot applicable-
Windows KeyboardChromenot applicable-
Windows KeyboardFirefoxnot applicable-
Windows KeyboardEdgenot applicable-
Mac KeyboardChromenot applicable-
Mac KeyboardSafarinot applicable-
iOS KeyboardSafarinot applicable-
Android KeyboardChromenot applicable-

Extended Support for: aria-controls attribute: convey the presence of the aria-controls attribute

These are less common combinations

ATBrowserHas SupportOutput
Dragon Naturally SpeakingIEnot applicable-
Dragon Naturally SpeakingFirefoxnot applicable-
JAWS 2021.2011.16IE 11not applicable
  • Result: (na)
    • Test Case: navigate forward to the button for the collapsed combobox without a value using Next button (b)
      1. Launch JAWS and IE.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:button[aria-expanded="true"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Set the value of the target to "ne"
      5. set mode to browse
      6. issue command
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `button[aria-expanded="true"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. is the expectation met?
    • Output:
    • Command Notes: example does not support IE; can't test dynamic functionality
NarratorFirefoxunknown-
NarratorChromeunknown-
NarratorIEunknown-
NVDAIEunknown-
TalkBackFirefoxunknown-
Voice Access (Android)Firefoxnot applicable-
VoiceOver (iOS)Chromeunknown-
VoiceOver (macOS)Chromeunknown-
VoiceOver (macOS)Firefoxunknown-
OrcaChromeunknown-
Voice Control (MacOS)Chromenot applicable-
Voice Control (MacOS)Firefoxnot applicable-
Mac KeyboardFirefoxnot applicable-
Android KeyboardFirefoxnot applicable-
Back to top

Expectation for the aria-expanded attribute: convey change in value - applied to the combobox role

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

This expectation is from the aria-expanded attribute feature.

Rationale:

The user needs to know that the value was successfully changed.

Strength of this expectation for different types of assistive technologies:

  • Screen Readers: MUST
  • Voice Control: NA

Examples:

  • If the element with aria-expanded has focus when its expanded state changes, the new state value will be announced (either "expanded" or "collapsed"). Some screen readers will re-announce the entire element, including name, role, and other properties and states.

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: Enter text into the collapsed combobox using enter text (<enter text>)
      1. Launch JAWS and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • summary: navigate forward to the combobox
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. issue command
        • summary: type "ne"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and the change in expanded state should be conveyed
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. is the expectation met?
    • Output: input is echoed back ("n", "e"). "expanded" is announced when the list box is expanded.
JAWSEdgeyes
  • Result: (pass)
    • Test Case: Enter text into the collapsed combobox using enter text (<enter text>)
      1. Launch JAWS and Edge.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • summary: navigate forward to the combobox
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. issue command
        • summary: type "ne"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and the change in expanded state should be conveyed
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. is the expectation met?
    • Output: input is echoed back ("n", "e"). "expanded" is announced when the list box is expanded.
JAWSFirefoxyes
  • Result: (pass)
    • Test Case: Enter text into the collapsed combobox using enter text (<enter text>)
      1. Launch JAWS and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • summary: navigate forward to the combobox
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. issue command
        • summary: type "ne"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and the change in expanded state should be conveyed
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. is the expectation met?
    • Output: input is echoed back ("n", "e"). "expanded" is announced when the list box is expanded.
NarratorEdgeyes
  • Result: (pass)
    • Test Case: Enter text into the collapsed combobox using enter text (<enter text>)
      1. Launch Narrator and Edge.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • summary: navigate forward to the combobox
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. issue command
        • summary: type "ne"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and the change in expanded state should be conveyed
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. is the expectation met?
    • Output: input is echoed back ("n", "e"). "suggestions available" is announced when the list box is expanded.
NVDAChromeyes
  • Result: (pass)
    • Test Case: Enter text into the collapsed combobox using enter text (<enter text>)
      1. Launch NVDA and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • summary: navigate forward to the combobox
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. issue command
        • summary: type "ne"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and the change in expanded state should be conveyed
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. is the expectation met?
    • Output: input is echoed back ("n", "e"). "expanded" is announced when the list box is expanded.
NVDAEdgeyes
  • Result: (pass)
    • Test Case: Enter text into the collapsed combobox using enter text (<enter text>)
      1. Launch NVDA and Edge.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • summary: navigate forward to the combobox
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. issue command
        • summary: type "ne"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and the change in expanded state should be conveyed
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. is the expectation met?
    • Output: input is echoed back ("n", "e"). "expanded" is announced when the list box is expanded.
NVDAFirefoxyes
  • Result: (pass)
    • Test Case: Enter text into the collapsed combobox using enter text (<enter text>)
      1. Launch NVDA and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • summary: navigate forward to the combobox
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. issue command
        • summary: type "ne"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and the change in expanded state should be conveyed
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. is the expectation met?
    • Output: input is echoed back ("n", "e"). "expanded" is announced when the list box is expanded.
OrcaFirefoxyes
  • Result: (pass)
    • Test Case: Enter text into the collapsed combobox using enter text (<enter text>)
      1. Launch Orca and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • summary: navigate forward to the combobox
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. issue command
        • summary: type "ne"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and the change in expanded state should be conveyed
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. is the expectation met?
    • Output: input is echoed back ("n", "e"). "state, editable combobox, expanded" is announced when the list box is expanded.
TalkBackChromeyes
  • Result: (na)
    • Test Case: Enter text into the collapsed combobox using enter text (<enter text>)
      1. Launch TalkBack and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. 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 command
        • summary: navigate forward to the combobox
        • Using the command: "Swipe right (or alt+right arrow)" (Read next item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • virtual cursor location: target
      5. issue command
        • summary: type "ne"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and the change in expanded state should be conveyed
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • virtual cursor location: target
      6. is the expectation met?
    • Output: input is echoed back ("n", "e").
    • Command Notes: list box does not expand while typing, you must expand it via the button
    • Result Notes: na because list box does not expand
  • Result: (pass)
    • Test Case: activate the combobox button to expand the combobox using Activate button (double tap (or alt+enter))
      1. Launch TalkBack and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:button[aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. 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 command
        • summary: navigate forward to the button for the combobox
        • Using the command: "nex_item"
        • Ensure AT location after executing the command
          • Target: `button[aria-expanded="false"]`
          • virtual cursor location: target
      5. issue command
        • Using the command: "double tap (or alt+enter)" (Activate button)
        • Ensure AT location after executing the command
          • Target: `button[aria-expanded="false"]`
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "expanded, 6 auto complete options available."
Voice Access (Android)Chromenot applicable-
Voice Control (iOS)Safarinot applicable-
Voice Control (MacOS)Safarinot applicable-
VoiceOver (iOS)Safarinone
  • Result: (fail)
    • Test Case: Enter text into the collapsed combobox using enter text (<enter text>)
      1. Launch VoiceOver (iOS) and Safari.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. 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 command
        • summary: navigate forward to the combobox
        • Using the command: "Swipe Right" (Next item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • virtual cursor location: target
      5. issue command
        • summary: type "ne"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and the change in expanded state should be conveyed
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • virtual cursor location: target
      6. is the expectation met?
    • Output: input is echoed back ("n", "e").
    • Command Notes: nothing is announced to indicate that the list box has expanded while typing
  • Result: (na)
    • Test Case: activate the combobox button to expand the combobox using Activate Button (Double tap)
      1. Launch VoiceOver (iOS) and Safari.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:button[aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. 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 command
        • summary: navigate forward to the button for the combobox
        • Using the command: "nex_item"
        • Ensure AT location after executing the command
          • Target: `button[aria-expanded="false"]`
          • virtual cursor location: target
      5. issue command
        • Using the command: "Double tap" (Activate Button)
        • Ensure AT location after executing the command
          • Target: `button[aria-expanded="false"]`
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "Sate, ne, combobox, list box popup, expanded, double tap to collapse"
    • Command Notes: focus was moved to the combobox after activating the button.
    • Result Notes: na because focus did not remain on the button - so this is not testable.
Grading Note: There is no known/documented support. There may still be support for this expectation, but it is undocumented. If this is the case, please report this issue.
VoiceOver (macOS)Safarinone
  • Result: (fail)
    • Test Case: Enter text into the collapsed combobox using enter text (<enter text>)
      1. Launch VoiceOver (macOS) and Safari.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • summary: navigate forward to the combobox
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. issue command
        • summary: type "ne"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and the change in expanded state should be conveyed
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. is the expectation met?
    • Output: input is echoed back ("n", "e").
    • Command Notes: there is no indication that the listbox was expanded
Grading Note: There is no known/documented support. There may still be support for this expectation, but it is undocumented. If this is the case, please report this issue.
Windows Speech RecognitionEdgenot applicable-
Windows Speech RecognitionChromenot applicable-
Windows Voice AccessEdgenot applicable-
Windows Voice AccessChromenot applicable-
Windows KeyboardChromenot applicable-
Windows KeyboardFirefoxnot applicable-
Windows KeyboardEdgenot applicable-
Mac KeyboardChromenot applicable-
Mac KeyboardSafarinot applicable-
iOS KeyboardSafarinot applicable-
Android KeyboardChromenot applicable-

Extended Support for: aria-expanded attribute: convey change in value

These are less common combinations

ATBrowserHas SupportOutput
Dragon Naturally SpeakingIEnot applicable-
Dragon Naturally SpeakingFirefoxnot applicable-
JAWS 2021.2011.16IE 11not applicable
  • Result: (na)
    • Test Case: Enter text into the collapsed combobox using enter text (<enter text>)
      1. Launch JAWS and IE.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • summary: navigate forward to the combobox
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. issue command
        • summary: type "ne"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and the change in expanded state should be conveyed
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. is the expectation met?
    • Output:
    • Command Notes: example does not support IE; can't test dynamic functionality
NarratorFirefoxunknown-
NarratorChromeunknown-
NarratorIEunknown-
NVDAIEunknown-
TalkBackFirefoxunknown-
Voice Access (Android)Firefoxnot applicable-
VoiceOver (iOS)Chromeunknown-
VoiceOver (macOS)Chromeunknown-
VoiceOver (macOS)Firefoxunknown-
OrcaChromeunknown-
Voice Control (MacOS)Chromenot applicable-
Voice Control (MacOS)Firefoxnot applicable-
Mac KeyboardFirefoxnot applicable-
Android KeyboardFirefoxnot applicable-
Back to top

Expectation for the aria-expanded attribute: convey the "false" value - applied to the combobox role

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

This expectation is from the aria-expanded attribute feature.

Strength of this expectation for different types of assistive technologies:

  • Screen Readers: MUST
  • Voice Control: NA

Examples:

  • Most screen readers will announce the state as "collapsed"

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: navigate forward to the collapsed combobox without a value using Read next focusable item (Tab)
      1. Launch JAWS and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "state, edit, combo, collapsed, to set the value use the arrow keys or type the value"
JAWSEdgeyes
  • Result: (pass)
    • Test Case: navigate forward to the collapsed combobox without a value using Read next focusable item (Tab)
      1. Launch JAWS and Edge.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "state, edit, combo, collapsed, to set the value use the arrow keys or type the value"
JAWSFirefoxyes
  • Result: (pass)
    • Test Case: navigate forward to the collapsed combobox without a value using Read next focusable item (Tab)
      1. Launch JAWS and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "state, edit, combo, collapsed, to set the value use the arrow keys or type the value"
NarratorEdgeyes
  • Result: (pass)
    • Test Case: navigate forward to the collapsed combobox without a value using Read next focusable item (Tab)
      1. Launch Narrator and Edge.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "scan off, state, combo, edit, collapsed, has popup"
    • Result Notes: was implied by its absence. When expanded, Narrator announces "suggestions available".
NVDAChromeyes
  • Result: (pass)
    • Test Case: navigate forward to the collapsed combobox without a value using Read next focusable item (Tab)
      1. Launch NVDA and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "state, combo box, collapsed, has auto complete, editable, blank"
NVDAEdgeyes
  • Result: (pass)
    • Test Case: navigate forward to the collapsed combobox without a value using Read next focusable item (Tab)
      1. Launch NVDA and Edge.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "state, combo box, collapsed, has auto complete, editable, blank"
NVDAFirefoxyes
  • Result: (pass)
    • Test Case: navigate forward to the collapsed combobox without a value using Read next focusable item (Tab)
      1. Launch NVDA and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "states, combobox, collapsed, has auto complete, editable, blank"
OrcaFirefoxnone
  • Result: (fail)
    • Test Case: navigate forward to the collapsed combobox without a value using Read next focusable item (Tab)
      1. Launch Orca and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "state, editable combobox"
    • Grading note: This command may be expected to fail. This result simply indicates that it did not yield support.
Grading Note: There is no known/documented support. There may still be support for this expectation, but it is undocumented. If this is the case, please report this issue.
TalkBackChromeyes
  • Result: (pass)
    • Test Case: navigate forward to the collapsed combobox without a value using Read next item (Swipe right (or alt+right arrow))
      1. Launch TalkBack and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. 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 command
        • Using the command: "Swipe right (or alt+right arrow)" (Read next item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • virtual cursor location: target
      5. is the expectation met?
    • Output: "collapsed, edit box, state"
Voice Access (Android)Chromenot applicable-
Voice Control (iOS)Safarinot applicable-
Voice Control (MacOS)Safarinot applicable-
VoiceOver (iOS)Safariyes
  • Result: (pass)
    • Test Case: navigate forward to the collapsed combobox without a value using Next item (Swipe Right)
      1. Launch VoiceOver (iOS) and Safari.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. 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 command
        • Using the command: "Swipe Right" (Next item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • virtual cursor location: target
      5. is the expectation met?
    • Output: "state, combobox, list box popup, collapsed, double tap to expand"
VoiceOver (macOS)Safarinone
  • Result: (fail)
    • Test Case: navigate forward to the collapsed combobox without a value using Read next focusable item (Tab)
      1. Launch VoiceOver (macOS) and Safari.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "state, list box popup, menu popup combobox"
    • Grading note: This command may be expected to fail. This result simply indicates that it did not yield support.
Grading Note: There is no known/documented support. There may still be support for this expectation, but it is undocumented. If this is the case, please report this issue.
Windows Speech RecognitionEdgenot applicable-
Windows Speech RecognitionChromenot applicable-
Windows Voice AccessEdgenot applicable-
Windows Voice AccessChromenot applicable-
Windows KeyboardChromenot applicable-
Windows KeyboardFirefoxnot applicable-
Windows KeyboardEdgenot applicable-
Mac KeyboardChromenot applicable-
Mac KeyboardSafarinot applicable-
iOS KeyboardSafarinot applicable-
Android KeyboardChromenot applicable-

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

These are less common combinations

ATBrowserHas SupportOutput
Dragon Naturally SpeakingIEnot applicable-
Dragon Naturally SpeakingFirefoxnot applicable-
JAWS 2021.2011.16IE 11none
  • Result: (fail)
    • Test Case: navigate forward to the collapsed combobox without a value using Read next focusable item (Tab)
      1. Launch JAWS and IE.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "state, edit, type in text"
NarratorFirefoxunknown-
NarratorChromeunknown-
NarratorIEunknown-
NVDAIEunknown-
TalkBackFirefoxunknown-
Voice Access (Android)Firefoxnot applicable-
VoiceOver (iOS)Chromeunknown-
VoiceOver (macOS)Chromeunknown-
VoiceOver (macOS)Firefoxunknown-
OrcaChromeunknown-
Voice Control (MacOS)Chromenot applicable-
Voice Control (MacOS)Firefoxnot applicable-
Mac KeyboardFirefoxnot applicable-
Android KeyboardFirefoxnot applicable-
Back to top

Expectation for the aria-expanded attribute: convey the "false" value - applied to the button element

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

This expectation is from the aria-expanded attribute feature.

Strength of this expectation for different types of assistive technologies:

  • Screen Readers: MUST
  • Voice Control: NA

Examples:

  • Most screen readers will announce the state as "collapsed"

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: navigate forward to the button for the collapsed combobox without a value using Next button (b)
      1. Launch JAWS and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:button[aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `button[aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "states button collapsed"
JAWSEdgeyes
  • Result: (pass)
    • Test Case: navigate forward to the button for the collapsed combobox without a value using Next button (b)
      1. Launch JAWS and Edge.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:button[aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `button[aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "states button collapsed"
JAWSFirefoxyes
  • Result: (pass)
    • Test Case: navigate forward to the button for the collapsed combobox without a value using Next button (b)
      1. Launch JAWS and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:button[aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `button[aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "states button collapsed"
NarratorEdgeyes
  • Result: (pass)
    • Test Case: navigate forward to the button for the collapsed combobox without a value using Next button (b)
      1. Launch Narrator and Edge.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:button[aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `button[aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "states button collapsed"
NVDAChromeyes
  • Result: (pass)
    • Test Case: navigate forward to the button for the collapsed combobox without a value using Next button (b)
      1. Launch NVDA and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:button[aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `button[aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "states button collapsed"
NVDAEdgeyes
  • Result: (pass)
    • Test Case: navigate forward to the button for the collapsed combobox without a value using Next button (b)
      1. Launch NVDA and Edge.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:button[aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `button[aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "states button collapsed"
NVDAFirefoxyes
  • Result: (pass)
    • Test Case: navigate forward to the button for the collapsed combobox without a value using Next button (b)
      1. Launch NVDA and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:button[aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `button[aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "states button collapsed"
OrcaFirefoxyes
  • Result: (pass)
    • Test Case: navigate forward to the button for the collapsed combobox without a value using Next button (b)
      1. Launch Orca and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:button[aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `button[aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "states, collapsed, push button"
TalkBackChromeyes
  • Result: (pass)
    • Test Case: navigate forward to the button for the collapsed combobox without a value using Read next item (Swipe right (or alt+right arrow))
      1. Launch TalkBack and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:button[aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. 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 command
        • Using the command: "Swipe right (or alt+right arrow)" (Read next item)
        • Ensure AT location after executing the command
          • Target: `button[aria-expanded="false"]`
          • virtual cursor location: target
      5. is the expectation met?
    • Output: "collapsed, states, button"
Voice Access (Android)Chromenot applicable-
Voice Control (iOS)Safarinot applicable-
Voice Control (MacOS)Safarinot applicable-
VoiceOver (iOS)Safariyes
  • Result: (pass)
    • Test Case: navigate forward to the button for the collapsed combobox without a value using Next item (Swipe Right)
      1. Launch VoiceOver (iOS) and Safari.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:button[aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. 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 command
        • Using the command: "Swipe Right" (Next item)
        • Ensure AT location after executing the command
          • Target: `button[aria-expanded="false"]`
          • virtual cursor location: target
      5. is the expectation met?
    • Output: "states, button collapsed, double tap to expand"
VoiceOver (macOS)Safariyes
  • Result: (pass)
    • Test Case: navigate forward to the button for the collapsed combobox without a value using Read next item (VO + Right arrow)
      1. Launch VoiceOver (macOS) and Safari.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:button[aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • Using the command: "VO + Right arrow" (Read next item)
        • Ensure AT location after executing the command
          • Target: `button[aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "states button collapsed"
Windows Speech RecognitionEdgenot applicable-
Windows Speech RecognitionChromenot applicable-
Windows Voice AccessEdgenot applicable-
Windows Voice AccessChromenot applicable-
Windows KeyboardChromenot applicable-
Windows KeyboardFirefoxnot applicable-
Windows KeyboardEdgenot applicable-
Mac KeyboardChromenot applicable-
Mac KeyboardSafarinot applicable-
iOS KeyboardSafarinot applicable-
Android KeyboardChromenot applicable-

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

These are less common combinations

ATBrowserHas SupportOutput
Dragon Naturally SpeakingIEnot applicable-
Dragon Naturally SpeakingFirefoxnot applicable-
JAWS 2021.2011.16IE 11yes
  • Result: (pass)
    • Test Case: navigate forward to the button for the collapsed combobox without a value using Next button (b)
      1. Launch JAWS and IE.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:button[aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `button[aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "states, button collapsed"
NarratorFirefoxunknown-
NarratorChromeunknown-
NarratorIEunknown-
NVDAIEunknown-
TalkBackFirefoxunknown-
Voice Access (Android)Firefoxnot applicable-
VoiceOver (iOS)Chromeunknown-
VoiceOver (macOS)Chromeunknown-
VoiceOver (macOS)Firefoxunknown-
OrcaChromeunknown-
Voice Control (MacOS)Chromenot applicable-
Voice Control (MacOS)Firefoxnot applicable-
Mac KeyboardFirefoxnot applicable-
Android KeyboardFirefoxnot applicable-
Back to top

Expectation for the aria-expanded attribute: convey the "true" value - applied to the combobox role

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

This expectation is from the aria-expanded attribute feature.

Strength of this expectation for different types of assistive technologies:

  • Screen Readers: MUST
  • Voice Control: NA

Examples:

  • Most screen readers will announce the state as "expanded"

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: navigate forward to the expanded combobox with a value using Read next item (Down arrow)
      1. Launch JAWS and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="true"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Set the value of the target to "ne"
      5. set mode to browse
      6. Position the AT so that the following is true
        • keyboard focus location: target
        • virtual cursor location: before target
      7. issue command
        • Using the command: "Down arrow" (Read next item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="true"]`
          • keyboard focus location: target
          • virtual cursor location: target
      8. is the expectation met?
    • Output: "State, edit, combo, collapsed, alabama"
JAWSEdgeyes
  • Result: (pass)
    • Test Case: navigate forward to the expanded combobox with a value using Read next item (Down arrow)
      1. Launch JAWS and Edge.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="true"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Set the value of the target to "ne"
      5. set mode to browse
      6. Position the AT so that the following is true
        • keyboard focus location: target
        • virtual cursor location: before target
      7. issue command
        • Using the command: "Down arrow" (Read next item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="true"]`
          • keyboard focus location: target
          • virtual cursor location: target
      8. is the expectation met?
    • Output: "State, edit, combo, collapsed, alabama"
JAWSFirefoxyes
  • Result: (pass)
    • Test Case: navigate forward to the expanded combobox with a value using Read next item (Down arrow)
      1. Launch JAWS and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="true"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Set the value of the target to "ne"
      5. set mode to browse
      6. Position the AT so that the following is true
        • keyboard focus location: target
        • virtual cursor location: before target
      7. issue command
        • Using the command: "Down arrow" (Read next item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="true"]`
          • keyboard focus location: target
          • virtual cursor location: target
      8. is the expectation met?
    • Output: "State, edit, combo, collapsed, alabama"
NarratorEdgeyes
  • Result: (pass)
    • Test Case: navigate forward to the expanded combobox with a value using Jump to next item (scan mode) (Down arrow)
      1. Launch Narrator and Edge.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="true"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Set the value of the target to "ne"
      5. set mode to browse
      6. Position the AT so that the following is true
        • keyboard focus location: target
        • virtual cursor location: before target
      7. issue command
        • Using the command: "Down arrow" (Jump to next item (scan mode))
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="true"]`
          • keyboard focus location: target
          • virtual cursor location: target
      8. is the expectation met?
    • Output: "state, ne, combo, edit, expanded, has popup ne, scan off"
NVDAChromeyes
  • Result: (pass)
    • Test Case: navigate forward to the expanded combobox with a value using Read next item (down arrow)
      1. Launch NVDA and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="true"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Set the value of the target to "ne"
      5. set mode to browse
      6. Position the AT so that the following is true
        • keyboard focus location: target
        • virtual cursor location: before target
      7. issue command
        • Using the command: "down arrow" (Read next item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="true"]`
          • keyboard focus location: target
          • virtual cursor location: target
      8. is the expectation met?
    • Output: "combo box, expanded, has auto complete, editable, ne"
NVDAEdgeyes
  • Result: (pass)
    • Test Case: navigate forward to the expanded combobox with a value using Read next item (down arrow)
      1. Launch NVDA and Edge.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="true"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Set the value of the target to "ne"
      5. set mode to browse
      6. Position the AT so that the following is true
        • keyboard focus location: target
        • virtual cursor location: before target
      7. issue command
        • Using the command: "down arrow" (Read next item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="true"]`
          • keyboard focus location: target
          • virtual cursor location: target
      8. is the expectation met?
    • Output: "combo box, expanded, has auto complete, editable, ne"
NVDAFirefoxyes
  • Result: (pass)
    • Test Case: navigate forward to the expanded combobox with a value using Read next item (down arrow)
      1. Launch NVDA and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="true"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Set the value of the target to "ne"
      5. set mode to browse
      6. Position the AT so that the following is true
        • keyboard focus location: target
        • virtual cursor location: before target
      7. issue command
        • Using the command: "down arrow" (Read next item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="true"]`
          • keyboard focus location: target
          • virtual cursor location: target
      8. is the expectation met?
    • Output: "combo box, expanded, has auto complete, editable, ne"
OrcaFirefoxnone
  • Result: (fail)
    • Test Case: navigate forward to the expanded combobox with a value using Read next item (down arrow)
      1. Launch Orca and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="true"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Set the value of the target to "ne"
      5. set mode to browse
      6. Position the AT so that the following is true
        • keyboard focus location: target
        • virtual cursor location: before target
      7. issue command
        • Using the command: "down arrow" (Read next item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="true"]`
          • keyboard focus location: target
          • virtual cursor location: target
      8. is the expectation met?
    • Output: "editable combobox, ne, states, expanded, push button"
    • Result Notes: fail because the state was conveyed, but only because orca read both the combobox and the button. The conveyed state in the part of the announcement from the button, not the combobox.
    • Grading note: This command may be expected to fail. This result simply indicates that it did not yield support.
Grading Note: There is no known/documented support. There may still be support for this expectation, but it is undocumented. If this is the case, please report this issue.
TalkBackChromeyes
  • Result: (pass)
    • Test Case: navigate backward to the expanded combobox with a value after expanding via combobox button using Read previous item (Swipe left (or alt+left arrow))
      1. Launch TalkBack and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="true"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Set the value of the target to "ne"
      5. issue command
        • summary: navigate forward to the button for the combobox
        • Using the command: "nex_item"
        • Ensure AT location after executing the command
          • Target: `button`
          • virtual cursor location: target
      6. issue command
        • summary: activate the button to expand the listbox
        • Using the command: "double tap (or alt+enter)" (Activate button)
      7. issue command
        • Using the command: "Swipe left (or alt+left arrow)" (Read previous item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="true"]`
          • virtual cursor location: target
      8. is the expectation met?
    • Output: "expanded, editing, ne, edit box, state"
Voice Access (Android)Chromenot applicable-
Voice Control (iOS)Safarinot applicable-
Voice Control (MacOS)Safarinot applicable-
VoiceOver (iOS)Safariyes
  • Result: (pass)
    • Test Case: navigate backward to the expanded combobox with a value after expanding via combobox button using Previous item (Swipe Left)
      1. Launch VoiceOver (iOS) and Safari.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="true"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Set the value of the target to "ne"
      5. issue command
        • summary: navigate forward to the button for the combobox
        • Using the command: "nex_item"
        • Ensure AT location after executing the command
          • Target: `button`
          • virtual cursor location: target
      6. issue command
        • summary: activate the button to expand the listbox
        • Using the command: "Double tap" (Activate Button)
      7. issue command
        • Using the command: "Swipe Left" (Previous item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="true"]`
          • virtual cursor location: target
      8. is the expectation met?
    • Output: "Sate, ne, combobox, list box popup, expanded, double tap to collapse"
VoiceOver (macOS)Safarinone
  • Result: (fail)
    • Test Case: navigate forward to the expanded combobox with a value using Read next item (VO + Right arrow)
      1. Launch VoiceOver (macOS) and Safari.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="true"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Set the value of the target to "ne"
      5. set mode to browse
      6. Position the AT so that the following is true
        • keyboard focus location: target
        • virtual cursor location: before target
      7. issue command
        • Using the command: "VO + Right arrow" (Read next item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="true"]`
          • keyboard focus location: target
          • virtual cursor location: target
      8. is the expectation met?
    • Output: "ne, state, list box popup, menu popup, combobox"
    • Grading note: This command may be expected to fail. This result simply indicates that it did not yield support.
Grading Note: There is no known/documented support. There may still be support for this expectation, but it is undocumented. If this is the case, please report this issue.
Windows Speech RecognitionEdgenot applicable-
Windows Speech RecognitionChromenot applicable-
Windows Voice AccessEdgenot applicable-
Windows Voice AccessChromenot applicable-
Windows KeyboardChromenot applicable-
Windows KeyboardFirefoxnot applicable-
Windows KeyboardEdgenot applicable-
Mac KeyboardChromenot applicable-
Mac KeyboardSafarinot applicable-
iOS KeyboardSafarinot applicable-
Android KeyboardChromenot applicable-

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

These are less common combinations

ATBrowserHas SupportOutput
Dragon Naturally SpeakingIEnot applicable-
Dragon Naturally SpeakingFirefoxnot applicable-
JAWS 2021.2011.16IE 11not applicable
  • Result: (na)
    • Test Case: navigate forward to the expanded combobox with a value using Read next item (Down arrow)
      1. Launch JAWS and IE.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="true"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Set the value of the target to "ne"
      5. set mode to browse
      6. Position the AT so that the following is true
        • keyboard focus location: target
        • virtual cursor location: before target
      7. issue command
        • Using the command: "Down arrow" (Read next item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="true"]`
          • keyboard focus location: target
          • virtual cursor location: target
      8. is the expectation met?
    • Output:
    • Command Notes: example does not support IE; can't test dynamic functionality
NarratorFirefoxunknown-
NarratorChromeunknown-
NarratorIEunknown-
NVDAIEunknown-
TalkBackFirefoxunknown-
Voice Access (Android)Firefoxnot applicable-
VoiceOver (iOS)Chromeunknown-
VoiceOver (macOS)Chromeunknown-
VoiceOver (macOS)Firefoxunknown-
OrcaChromeunknown-
Voice Control (MacOS)Chromenot applicable-
Voice Control (MacOS)Firefoxnot applicable-
Mac KeyboardFirefoxnot applicable-
Android KeyboardFirefoxnot applicable-
Back to top

Expectation for the aria-expanded attribute: convey the "true" value - applied to the button element

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

This expectation is from the aria-expanded attribute feature.

Strength of this expectation for different types of assistive technologies:

  • Screen Readers: MUST
  • Voice Control: NA

Examples:

  • Most screen readers will announce the state as "expanded"

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: navigate forward to the button for the collapsed combobox without a value using Next button (b)
      1. Launch JAWS and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:button[aria-expanded="true"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Set the value of the target to "ne"
      5. set mode to browse
      6. issue command
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `button[aria-expanded="true"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. is the expectation met?
    • Output: "states, button expanded"
JAWSEdgeyes
  • Result: (pass)
    • Test Case: navigate forward to the button for the collapsed combobox without a value using Next button (b)
      1. Launch JAWS and Edge.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:button[aria-expanded="true"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Set the value of the target to "ne"
      5. set mode to browse
      6. issue command
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `button[aria-expanded="true"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. is the expectation met?
    • Output: "states, button expanded"
JAWSFirefoxyes
  • Result: (pass)
    • Test Case: navigate forward to the button for the collapsed combobox without a value using Next button (b)
      1. Launch JAWS and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:button[aria-expanded="true"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Set the value of the target to "ne"
      5. set mode to browse
      6. issue command
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `button[aria-expanded="true"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. is the expectation met?
    • Output: "states, button expanded"
NarratorEdgeyes
  • Result: (pass)
    • Test Case: navigate forward to the button for the collapsed combobox without a value using Next button (b)
      1. Launch Narrator and Edge.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:button[aria-expanded="true"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Set the value of the target to "ne"
      5. set mode to browse
      6. issue command
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `button[aria-expanded="true"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. is the expectation met?
    • Output: states, button expanded
NVDAChromeyes
  • Result: (pass)
    • Test Case: navigate forward to the button for the collapsed combobox without a value using Next button (b)
      1. Launch NVDA and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:button[aria-expanded="true"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Set the value of the target to "ne"
      5. set mode to browse
      6. issue command
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `button[aria-expanded="true"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. is the expectation met?
    • Output: "states, button expanded"
NVDAEdgeyes
  • Result: (pass)
    • Test Case: navigate forward to the button for the collapsed combobox without a value using Next button (b)
      1. Launch NVDA and Edge.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:button[aria-expanded="true"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Set the value of the target to "ne"
      5. set mode to browse
      6. issue command
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `button[aria-expanded="true"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. is the expectation met?
    • Output: "states, button expanded"
NVDAFirefoxyes
  • Result: (pass)
    • Test Case: navigate forward to the button for the collapsed combobox without a value using Next button (b)
      1. Launch NVDA and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:button[aria-expanded="true"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Set the value of the target to "ne"
      5. set mode to browse
      6. issue command
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `button[aria-expanded="true"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. is the expectation met?
    • Output: "states, button expanded"
OrcaFirefoxyes
  • Result: (pass)
    • Test Case: navigate forward to the button for the collapsed combobox without a value using Next button (b)
      1. Launch Orca and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:button[aria-expanded="true"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Set the value of the target to "ne"
      5. set mode to browse
      6. issue command
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `button[aria-expanded="true"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. is the expectation met?
    • Output: "states, expanded, push button"
TalkBackChromeyes
  • Result: (pass)
    • Test Case: navigate forward to the button for the collapsed combobox without a value using Read next item (Swipe right (or alt+right arrow))
      1. Launch TalkBack and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:button[aria-expanded="true"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Set the value of the target to "ne"
      5. issue command
        • Using the command: "Swipe right (or alt+right arrow)" (Read next item)
        • Ensure AT location after executing the command
          • Target: `button[aria-expanded="true"]`
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "expanded, states, button"
Voice Access (Android)Chromenot applicable-
Voice Control (iOS)Safarinot applicable-
Voice Control (MacOS)Safarinot applicable-
VoiceOver (iOS)Safariyes
  • Result: (pass)
    • Test Case: navigate forward to the button for the collapsed combobox without a value using Next item (Swipe Right)
      1. Launch VoiceOver (iOS) and Safari.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:button[aria-expanded="true"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Set the value of the target to "ne"
      5. issue command
        • Using the command: "Swipe Right" (Next item)
        • Ensure AT location after executing the command
          • Target: `button[aria-expanded="true"]`
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "states, button, expanded"
VoiceOver (macOS)Safariyes
  • Result: (pass)
    • Test Case: navigate forward to the button for the collapsed combobox without a value using Read next item (VO + Right arrow)
      1. Launch VoiceOver (macOS) and Safari.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:button[aria-expanded="true"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Set the value of the target to "ne"
      5. set mode to browse
      6. issue command
        • Using the command: "VO + Right arrow" (Read next item)
        • Ensure AT location after executing the command
          • Target: `button[aria-expanded="true"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. is the expectation met?
    • Output: "states, button expanded"
Windows Speech RecognitionEdgenot applicable-
Windows Speech RecognitionChromenot applicable-
Windows Voice AccessEdgenot applicable-
Windows Voice AccessChromenot applicable-
Windows KeyboardChromenot applicable-
Windows KeyboardFirefoxnot applicable-
Windows KeyboardEdgenot applicable-
Mac KeyboardChromenot applicable-
Mac KeyboardSafarinot applicable-
iOS KeyboardSafarinot applicable-
Android KeyboardChromenot applicable-

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

These are less common combinations

ATBrowserHas SupportOutput
Dragon Naturally SpeakingIEnot applicable-
Dragon Naturally SpeakingFirefoxnot applicable-
JAWS 2021.2011.16IE 11not applicable
  • Result: (na)
    • Test Case: navigate forward to the button for the collapsed combobox without a value using Next button (b)
      1. Launch JAWS and IE.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:button[aria-expanded="true"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Set the value of the target to "ne"
      5. set mode to browse
      6. issue command
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `button[aria-expanded="true"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. is the expectation met?
    • Output:
    • Command Notes: example does not support IE; can't test dynamic functionality
NarratorFirefoxunknown-
NarratorChromeunknown-
NarratorIEunknown-
NVDAIEunknown-
TalkBackFirefoxunknown-
Voice Access (Android)Firefoxnot applicable-
VoiceOver (iOS)Chromeunknown-
VoiceOver (macOS)Chromeunknown-
VoiceOver (macOS)Firefoxunknown-
OrcaChromeunknown-
Voice Control (MacOS)Chromenot applicable-
Voice Control (MacOS)Firefoxnot applicable-
Mac KeyboardFirefoxnot applicable-
Android KeyboardFirefoxnot applicable-
Back to top

Expectation for the aria-haspopup attribute: convey the "listbox" value - applied to the combobox role

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

This expectation is from the aria-haspopup attribute feature.

Strength of this expectation for different types of assistive technologies:

  • Screen Readers: MUST
  • Voice Control: NA

Grading method:

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

ATBrowserHas SupportOutput
Dragon Naturally SpeakingChromenot applicable-
JAWSChromenone
  • Result: (fail)
    • Test Case: navigate forward to the collapsed combobox without a value using Read next focusable item (Tab)
      1. Launch JAWS and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "state, edit, combo, collapsed, to set the value use the arrow keys or type the value"
    • Grading note: This command may be expected to fail. This result simply indicates that it did not yield support.
Grading Note: There is no known/documented support. There may still be support for this expectation, but it is undocumented. If this is the case, please report this issue.
JAWSEdgenone
  • Result: (fail)
    • Test Case: navigate forward to the collapsed combobox without a value using Read next focusable item (Tab)
      1. Launch JAWS and Edge.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "state, edit, combo, collapsed, to set the value use the arrow keys or type the value"
    • Grading note: This command may be expected to fail. This result simply indicates that it did not yield support.
Grading Note: There is no known/documented support. There may still be support for this expectation, but it is undocumented. If this is the case, please report this issue.
JAWSFirefoxnone
  • Result: (fail)
    • Test Case: navigate forward to the collapsed combobox without a value using Read next focusable item (Tab)
      1. Launch JAWS and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "state, edit, combo, collapsed, to set the value use the arrow keys or type the value"
    • Grading note: This command may be expected to fail. This result simply indicates that it did not yield support.
Grading Note: There is no known/documented support. There may still be support for this expectation, but it is undocumented. If this is the case, please report this issue.
NarratorEdgeyes
  • Result: (pass)
    • Test Case: navigate forward to the collapsed combobox without a value using Read next focusable item (Tab)
      1. Launch Narrator and Edge.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "scan off, state, combo, edit, collapsed, has popup"
NVDAChromenone
  • Result: (fail)
    • Test Case: navigate forward to the collapsed combobox without a value using Read next focusable item (Tab)
      1. Launch NVDA and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "state, combo box, collapsed, has auto complete, editable, blank"
    • Grading note: This command may be expected to fail. This result simply indicates that it did not yield support.
Grading Note: There is no known/documented support. There may still be support for this expectation, but it is undocumented. If this is the case, please report this issue.
NVDAEdgenone
  • Result: (fail)
    • Test Case: navigate forward to the collapsed combobox without a value using Read next focusable item (Tab)
      1. Launch NVDA and Edge.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "state, combo box, collapsed, has auto complete, editable, blank"
    • Grading note: This command may be expected to fail. This result simply indicates that it did not yield support.
Grading Note: There is no known/documented support. There may still be support for this expectation, but it is undocumented. If this is the case, please report this issue.
NVDAFirefoxnone
  • Result: (fail)
    • Test Case: navigate forward to the collapsed combobox without a value using Read next focusable item (Tab)
      1. Launch NVDA and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "states, combobox, collapsed, has auto complete, editable, blank"
    • Grading note: This command may be expected to fail. This result simply indicates that it did not yield support.
Grading Note: There is no known/documented support. There may still be support for this expectation, but it is undocumented. If this is the case, please report this issue.
OrcaFirefoxnone
  • Result: (fail)
    • Test Case: navigate forward to the collapsed combobox without a value using Read next focusable item (Tab)
      1. Launch Orca and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "state, editable combobox"
    • Grading note: This command may be expected to fail. This result simply indicates that it did not yield support.
Grading Note: There is no known/documented support. There may still be support for this expectation, but it is undocumented. If this is the case, please report this issue.
TalkBackChromenone
  • Result: (fail)
    • Test Case: navigate forward to the collapsed combobox without a value using Read next item (Swipe right (or alt+right arrow))
      1. Launch TalkBack and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. 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 command
        • Using the command: "Swipe right (or alt+right arrow)" (Read next item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • virtual cursor location: target
      5. is the expectation met?
    • Output: "collapsed, edit box, state"
    • Grading note: This command may be expected to fail. This result simply indicates that it did not yield support.
Grading Note: There is no known/documented support. There may still be support for this expectation, but it is undocumented. If this is the case, please report this issue.
Voice Access (Android)Chromenot applicable-
Voice Control (iOS)Safarinot applicable-
Voice Control (MacOS)Safarinot applicable-
VoiceOver (iOS)Safariyes
  • Result: (pass)
    • Test Case: navigate forward to the collapsed combobox without a value using Next item (Swipe Right)
      1. Launch VoiceOver (iOS) and Safari.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. 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 command
        • Using the command: "Swipe Right" (Next item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • virtual cursor location: target
      5. is the expectation met?
    • Output: "state, combobox, list box popup, collapsed, double tap to expand"
VoiceOver (macOS)Safariyes
  • Result: (pass)
    • Test Case: navigate forward to the collapsed combobox without a value using Read next focusable item (Tab)
      1. Launch VoiceOver (macOS) and Safari.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "state, list box popup, menu popup combobox"
Windows Speech RecognitionEdgenot applicable-
Windows Speech RecognitionChromenot applicable-
Windows Voice AccessEdgenot applicable-
Windows Voice AccessChromenot applicable-
Windows KeyboardChromenot applicable-
Windows KeyboardFirefoxnot applicable-
Windows KeyboardEdgenot applicable-
Mac KeyboardChromenot applicable-
Mac KeyboardSafarinot applicable-
iOS KeyboardSafarinot applicable-
Android KeyboardChromenot applicable-

Extended Support for: aria-haspopup attribute: convey the "listbox" value

These are less common combinations

ATBrowserHas SupportOutput
Dragon Naturally SpeakingIEnot applicable-
Dragon Naturally SpeakingFirefoxnot applicable-
JAWS 2021.2011.16IE 11none
  • Result: (fail)
    • Test Case: navigate forward to the collapsed combobox without a value using Read next focusable item (Tab)
      1. Launch JAWS and IE.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "state, edit, type in text"
NarratorFirefoxunknown-
NarratorChromeunknown-
NarratorIEunknown-
NVDAIEunknown-
TalkBackFirefoxunknown-
Voice Access (Android)Firefoxnot applicable-
VoiceOver (iOS)Chromeunknown-
VoiceOver (macOS)Chromeunknown-
VoiceOver (macOS)Firefoxunknown-
OrcaChromeunknown-
Voice Control (MacOS)Chromenot applicable-
Voice Control (MacOS)Firefoxnot applicable-
Mac KeyboardFirefoxnot applicable-
Android KeyboardFirefoxnot applicable-
Back to top

Expectation for the aria-selected attribute: convey true value by indicating that the element is currently selected - applied to the option role

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

This expectation is from the aria-selected attribute feature.

Strength of this expectation for different types of assistive technologies:

  • Screen Readers: MUST
  • Voice Control: NA

Examples:

  • A screen reader might announce something like "selected".

Grading method:

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

ATBrowserHas SupportOutput
Dragon Naturally SpeakingChromenot applicable-
JAWSChromenone
  • Result: (fail)
    • Test Case: Navigate into listbox from the combobox input using select next option (Down arrow)
      1. Launch JAWS and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="listbox"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • summary: navigate forward to the combobox
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. issue command
        • summary: type "nebr"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and listbox should display
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. issue command
        • summary: navigate into the listbox
        • Using the command: "Down arrow" (select next option)
        • Observe: the listbox role and name should be conveyed
        • Ensure AT location after executing the command
          • Target: `*[role="listbox"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      8. is the expectation met?
    • Output: "states list with 6 items, nebraska, 1 of 6, to move to an item press the arrow keys"
    • Grading note: This command may be expected to fail. This result simply indicates that it did not yield support.
Grading Note: There is no known/documented support. There may still be support for this expectation, but it is undocumented. If this is the case, please report this issue.
JAWSEdgenone
  • Result: (fail)
    • Test Case: Navigate into listbox from the combobox input using select next option (Down arrow)
      1. Launch JAWS and Edge.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="listbox"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • summary: navigate forward to the combobox
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. issue command
        • summary: type "nebr"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and listbox should display
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. issue command
        • summary: navigate into the listbox
        • Using the command: "Down arrow" (select next option)
        • Observe: the listbox role and name should be conveyed
        • Ensure AT location after executing the command
          • Target: `*[role="listbox"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      8. is the expectation met?
    • Output: "states list with 6 items, nebraska, 1 of 6, to move to an item press the arrow keys"
    • Grading note: This command may be expected to fail. This result simply indicates that it did not yield support.
Grading Note: There is no known/documented support. There may still be support for this expectation, but it is undocumented. If this is the case, please report this issue.
JAWSFirefoxnone
  • Result: (fail)
    • Test Case: Navigate into listbox from the combobox input using select next option (Down arrow)
      1. Launch JAWS and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="listbox"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • summary: navigate forward to the combobox
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. issue command
        • summary: type "nebr"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and listbox should display
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. issue command
        • summary: navigate into the listbox
        • Using the command: "Down arrow" (select next option)
        • Observe: the listbox role and name should be conveyed
        • Ensure AT location after executing the command
          • Target: `*[role="listbox"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      8. is the expectation met?
    • Output: "states list with 6 items, nebraska, 1 of 6, to move to an item press the arrow keys"
    • Grading note: This command may be expected to fail. This result simply indicates that it did not yield support.
Grading Note: There is no known/documented support. There may still be support for this expectation, but it is undocumented. If this is the case, please report this issue.
NarratorEdgeyes
  • Result: (pass)
    • Test Case: Navigate into listbox from the combobox input using select next option (Down arrow)
      1. Launch Narrator and Edge.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="listbox"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • summary: navigate forward to the combobox
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. issue command
        • summary: type "nebr"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and listbox should display
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. issue command
        • summary: navigate into the listbox
        • Using the command: "Down arrow" (select next option)
        • Observe: the listbox role and name should be conveyed
        • Ensure AT location after executing the command
          • Target: `*[role="listbox"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      8. is the expectation met?
    • Output: "scan, states, nebraska, 1 of 6, selected"
NVDAChromenone
  • Result: (fail)
    • Test Case: Navigate into listbox from the combobox input using select next option (Down arrow)
      1. Launch NVDA and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="listbox"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • summary: navigate forward to the combobox
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. issue command
        • summary: type "nebr"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and listbox should display
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. issue command
        • summary: navigate into the listbox
        • Using the command: "Down arrow" (select next option)
        • Observe: the listbox role and name should be conveyed
        • Ensure AT location after executing the command
          • Target: `*[role="listbox"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      8. is the expectation met?
    • Output: "states, list, nebraska, 1 of 6"
    • Grading note: This command may be expected to fail. This result simply indicates that it did not yield support.
Grading Note: There is no known/documented support. There may still be support for this expectation, but it is undocumented. If this is the case, please report this issue.
NVDAEdgenone
  • Result: (fail)
    • Test Case: Navigate into listbox from the combobox input using select next option (Down arrow)
      1. Launch NVDA and Edge.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="listbox"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • summary: navigate forward to the combobox
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. issue command
        • summary: type "nebr"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and listbox should display
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. issue command
        • summary: navigate into the listbox
        • Using the command: "Down arrow" (select next option)
        • Observe: the listbox role and name should be conveyed
        • Ensure AT location after executing the command
          • Target: `*[role="listbox"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      8. is the expectation met?
    • Output: "states, list, nebraska, 1 of 6"
    • Grading note: This command may be expected to fail. This result simply indicates that it did not yield support.
Grading Note: There is no known/documented support. There may still be support for this expectation, but it is undocumented. If this is the case, please report this issue.
NVDAFirefoxnone
  • Result: (fail)
    • Test Case: Navigate into listbox from the combobox input using select next option (Down arrow)
      1. Launch NVDA and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="listbox"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • summary: navigate forward to the combobox
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. issue command
        • summary: type "nebr"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and listbox should display
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. issue command
        • summary: navigate into the listbox
        • Using the command: "Down arrow" (select next option)
        • Observe: the listbox role and name should be conveyed
        • Ensure AT location after executing the command
          • Target: `*[role="listbox"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      8. is the expectation met?
    • Output: "states list, nebraska, 1 of 6"
    • Grading note: This command may be expected to fail. This result simply indicates that it did not yield support.
Grading Note: There is no known/documented support. There may still be support for this expectation, but it is undocumented. If this is the case, please report this issue.
OrcaFirefoxnone
  • Result: (fail)
    • Test Case: Navigate into listbox from the combobox input using select next option (Down arrow)
      1. Launch Orca and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="listbox"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • summary: navigate forward to the combobox
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. issue command
        • summary: type "nebr"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and listbox should display
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. issue command
        • summary: navigate into the listbox
        • Using the command: "Down arrow" (select next option)
        • Observe: the listbox role and name should be conveyed
        • Ensure AT location after executing the command
          • Target: `*[role="listbox"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      8. is the expectation met?
    • Output: "states list with 6 items, nebraska"
    • Grading note: This command may be expected to fail. This result simply indicates that it did not yield support.
Grading Note: There is no known/documented support. There may still be support for this expectation, but it is undocumented. If this is the case, please report this issue.
TalkBackChromenot applicable
  • Result: (na)
    • Test Case: Navigate into listbox from the combobox input using Select next option (Swipe right)
      1. Launch TalkBack and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="listbox"]
        • If multiple elements match the selector, repeat this test for all instances. 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 command
        • summary: navigate forward to the combobox
        • Using the command: "Swipe right (or alt+right arrow)" (Read next item)
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • virtual cursor location: target
      5. issue command
        • summary: type "nebr"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and listbox should display
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • virtual cursor location: target
      6. issue command
        • summary: navigate into the listbox
        • Using the command: "Swipe right" (Select next option)
        • Observe: the listbox role and name should be conveyed
        • Ensure AT location after executing the command
          • Target: `*[role="listbox"]`
          • virtual cursor location: within target
      7. is the expectation met?
    • Output: "states, list box" (swipe right again) "end of example, splitter"
    • Result Notes: na because it was not possible to navigate to an option and test
Voice Access (Android)Chromenot applicable-
Voice Control (iOS)Safarinot applicable-
Voice Control (MacOS)Safarinot applicable-
VoiceOver (iOS)Safarinone
  • Result: (fail)
    • Test Case: Navigate into listbox from the combobox input using select next option (Swipe down)
      1. Launch VoiceOver (iOS) and Safari.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="listbox"]
        • If multiple elements match the selector, repeat this test for all instances. 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 command
        • summary: navigate forward to the combobox
        • Using the command: "Swipe Right" (Next item)
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • virtual cursor location: target
      5. issue command
        • summary: type "nebr"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and listbox should display
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • virtual cursor location: target
      6. issue command
        • summary: navigate into the listbox
        • Using the command: "Swipe down" (select next option)
        • Observe: the listbox role and name should be conveyed
        • Ensure AT location after executing the command
          • Target: `*[role="listbox"]`
          • virtual cursor location: within target
      7. is the expectation met?
    • Output: "states, nebraska, list start"
    • Grading note: This command may be expected to fail. This result simply indicates that it did not yield support.
Grading Note: There is no known/documented support. There may still be support for this expectation, but it is undocumented. If this is the case, please report this issue.
VoiceOver (macOS)Safarinone
  • Result: (fail)
    • Test Case: Navigate into listbox from the combobox input using select next option (Down arrow)
      1. Launch VoiceOver (macOS) and Safari.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="listbox"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • summary: navigate forward to the combobox
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. issue command
        • summary: type "nebr"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and listbox should display
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. issue command
        • summary: navigate into the listbox
        • Using the command: "Down arrow" (select next option)
        • Observe: the listbox role and name should be conveyed
        • Ensure AT location after executing the command
          • Target: `*[role="listbox"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      8. is the expectation met?
    • Output: nothing was conveyed
    • Grading note: This command may be expected to fail. This result simply indicates that it did not yield support.
Grading Note: There is no known/documented support. There may still be support for this expectation, but it is undocumented. If this is the case, please report this issue.
Windows Speech RecognitionEdgenot applicable-
Windows Speech RecognitionChromenot applicable-
Windows Voice AccessEdgenot applicable-
Windows Voice AccessChromenot applicable-
Windows KeyboardChromenot applicable-
Windows KeyboardFirefoxnot applicable-
Windows KeyboardEdgenot applicable-
Mac KeyboardChromenot applicable-
Mac KeyboardSafarinot applicable-
iOS KeyboardSafarinot applicable-
Android KeyboardChromenot applicable-

Extended Support for: aria-selected attribute: convey true value by indicating that the element is currently selected

These are less common combinations

ATBrowserHas SupportOutput
Dragon Naturally SpeakingIEnot applicable-
Dragon Naturally SpeakingFirefoxnot applicable-
JAWS 2021.2011.16IE 11not applicable
  • Result: (na)
    • Test Case: Navigate into listbox from the combobox input using select next option (Down arrow)
      1. Launch JAWS and IE.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="listbox"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • summary: navigate forward to the combobox
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. issue command
        • summary: type "nebr"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and listbox should display
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. issue command
        • summary: navigate into the listbox
        • Using the command: "Down arrow" (select next option)
        • Observe: the listbox role and name should be conveyed
        • Ensure AT location after executing the command
          • Target: `*[role="listbox"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      8. is the expectation met?
    • Output:
    • Command Notes: example does not support IE; can't test dynamic functionality
NarratorFirefoxunknown-
NarratorChromeunknown-
NarratorIEunknown-
NVDAIEunknown-
TalkBackFirefoxunknown-
Voice Access (Android)Firefoxnot applicable-
VoiceOver (iOS)Chromeunknown-
VoiceOver (macOS)Chromeunknown-
VoiceOver (macOS)Firefoxunknown-
OrcaChromeunknown-
Voice Control (MacOS)Chromenot applicable-
Voice Control (MacOS)Firefoxnot applicable-
Mac KeyboardFirefoxnot applicable-
Android KeyboardFirefoxnot applicable-
Back to top

Expectation for the combobox role: convey its name - applied to the input[type="text"] element

This expectation is applied to the input[type="text"] element. Expectations and results might differ when the the feature is applied to different roles.

This expectation is from the combobox role feature.

Rationale:

A screen reader user needs to know what to enter.

Strength of this expectation for different types of assistive technologies:

  • Screen Readers: MUST
  • Voice Control: MUST

Examples:

  • A screen reader might convey the name as something like "<role>, <name>, <value>" (order varies by screen reader and settings)
  • Voice control software might allow the user to say "click <name>" to focus the combobox

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. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox"]
        • If multiple elements match the selector, repeat this test for all instances. 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: text input was focused
    • Command Notes: said "click state"
JAWSChromeyes
  • Result: (pass)
    • Test Case: navigate forward to the collapsed combobox without a value using Read next focusable item (Tab)
      1. Launch JAWS and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "state, edit, combo, collapsed, to set the value use the arrow keys or type the value"
JAWSEdgeyes
  • Result: (pass)
    • Test Case: navigate forward to the collapsed combobox without a value using Read next focusable item (Tab)
      1. Launch JAWS and Edge.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "state, edit, combo, collapsed, to set the value use the arrow keys or type the value"
JAWSFirefoxyes
  • Result: (pass)
    • Test Case: navigate forward to the collapsed combobox without a value using Read next focusable item (Tab)
      1. Launch JAWS and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "state, edit, combo, collapsed, to set the value use the arrow keys or type the value"
NarratorEdgeyes
  • Result: (pass)
    • Test Case: navigate forward to the collapsed combobox without a value using Read next focusable item (Tab)
      1. Launch Narrator and Edge.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "scan off, state, combo, edit, collapsed, has popup"
NVDAChromeyes
  • Result: (pass)
    • Test Case: navigate forward to the collapsed combobox without a value using Read next focusable item (Tab)
      1. Launch NVDA and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "state, combo box, collapsed, has auto complete, editable, blank"
NVDAEdgeyes
  • Result: (pass)
    • Test Case: navigate forward to the collapsed combobox without a value using Read next focusable item (Tab)
      1. Launch NVDA and Edge.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "state, combo box, collapsed, has auto complete, editable, blank"
NVDAFirefoxyes
  • Result: (pass)
    • Test Case: navigate forward to the collapsed combobox without a value using Read next focusable item (Tab)
      1. Launch NVDA and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "states, combobox, collapsed, has auto complete, editable, blank"
OrcaFirefoxyes
  • Result: (pass)
    • Test Case: navigate forward to the collapsed combobox without a value using Read next focusable item (Tab)
      1. Launch Orca and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "state, editable combobox"
TalkBackChromeyes
  • Result: (pass)
    • Test Case: navigate forward to the collapsed combobox without a value using Read next item (Swipe right (or alt+right arrow))
      1. Launch TalkBack and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. 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 command
        • Using the command: "Swipe right (or alt+right arrow)" (Read next item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • virtual cursor location: target
      5. is the expectation met?
    • Output: "collapsed, edit box, state"
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. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox"]
        • If multiple elements match the selector, repeat this test for all instances. 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: input was flagged
    • Command Notes: said "tap state"
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. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox"]
        • If multiple elements match the selector, repeat this test for all instances. 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: input was focused
    • Command Notes: said "tap state"
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. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox"]
        • If multiple elements match the selector, repeat this test for all instances. 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: input was focused
    • Command Notes: said "click state"
VoiceOver (iOS)Safariyes
  • Result: (pass)
    • Test Case: navigate forward to the collapsed combobox without a value using Next item (Swipe Right)
      1. Launch VoiceOver (iOS) and Safari.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. 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 command
        • Using the command: "Swipe Right" (Next item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • virtual cursor location: target
      5. is the expectation met?
    • Output: "state, combobox, list box popup, collapsed, double tap to expand"
VoiceOver (macOS)Safariyes
  • Result: (pass)
    • Test Case: navigate forward to the collapsed combobox without a value using Read next focusable item (Tab)
      1. Launch VoiceOver (macOS) and Safari.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "state, list box popup, menu popup combobox"
Windows Speech RecognitionEdgeyes
  • 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. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox"]
        • If multiple elements match the selector, repeat this test for all instances. 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: role was activated
    • Command Notes: said "click state"
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. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox"]
        • If multiple elements match the selector, repeat this test for all instances. 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: role was activated
    • Command Notes: said "click state"
Windows Voice AccessEdgeyes
  • Result: (pass)
    • Test Case: Use "Click <text>" (Activate item by name)
      1. Launch Windows Voice Access and Edge.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox"]
        • If multiple elements match the selector, repeat this test for all instances. 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: role was activated
    • Command Notes: said "click state"
Windows Voice AccessChromeyes
  • Result: (pass)
    • Test Case: Use "Click <text>" (Activate item by name)
      1. Launch Windows Voice Access and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox"]
        • If multiple elements match the selector, repeat this test for all instances. 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: role was activated
    • Command Notes: said "click state"
Windows KeyboardChromenot applicable-
Windows KeyboardFirefoxnot applicable-
Windows KeyboardEdgenot applicable-
Mac KeyboardChromenot applicable-
Mac KeyboardSafarinot applicable-
iOS KeyboardSafarinot applicable-
Android KeyboardChromenot applicable-

Extended Support for: combobox role: convey its name

These are less common combinations

ATBrowserHas SupportOutput
Dragon Naturally SpeakingIEunknown-
Dragon Naturally SpeakingFirefoxunknown-
JAWS 2021.2011.16IE 11yes
  • Result: (pass)
    • Test Case: navigate forward to the collapsed combobox without a value using Read next focusable item (Tab)
      1. Launch JAWS and IE.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "state, edit, type in text"
NarratorFirefoxunknown-
NarratorChromeunknown-
NarratorIEunknown-
NVDAIEunknown-
TalkBackFirefoxunknown-
Voice Access (Android)Firefoxunknown-
VoiceOver (iOS)Chromeunknown-
VoiceOver (macOS)Chromeunknown-
VoiceOver (macOS)Firefoxunknown-
OrcaChromeunknown-
Voice Control (MacOS)Chromeunknown-
Voice Control (MacOS)Firefoxunknown-
Mac KeyboardFirefoxnot applicable-
Android KeyboardFirefoxnot applicable-
Back to top

Expectation for the combobox role: convey its role - applied to the input[type="text"] element

This expectation is applied to the input[type="text"] element. Expectations and results might differ when the the feature is applied to different roles.

This expectation is from the combobox role feature.

Rationale:

A screen reader user needs to know how they can interact with the element. Voice control software might use the role to help users activate controls that do not have a visible name.

Strength of this expectation for different types of assistive technologies:

  • Screen Readers: MUST
  • Voice Control: MUST

Examples:

  • A screen reader might convey the role as something like "combo box"
  • Voice control software might allow the user to say "click text box" to focus an editable combobox

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 <role> (Click Type)
      1. Launch Dragon Naturally Speaking and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox"]
        • If multiple elements match the selector, repeat this test for all instances. 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 <role> (Click Type)
      5. Record results for the relevant expectations
    • Output: text input was focused
    • Command Notes: said "click edit"
  • Result: (fail)
    • Test Case: Use "Hide choices" (Hide drop down choices)
      1. Launch Dragon Naturally Speaking and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox"]
        • If multiple elements match the selector, repeat this test for all instances. 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: "Hide choices" (Hide drop down choices)
      5. Record results for the relevant expectations
    • Output: suggestions displayed after saying "click state" but were not hidden after saying "hide choices"
    • Grading note: This command may be expected to fail. This result simply indicates that it did not yield support.
JAWSChromeyes
  • Result: (pass)
    • Test Case: navigate forward to the collapsed combobox without a value using Read next focusable item (Tab)
      1. Launch JAWS and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "state, edit, combo, collapsed, to set the value use the arrow keys or type the value"
JAWSEdgeyes
  • Result: (pass)
    • Test Case: navigate forward to the collapsed combobox without a value using Read next focusable item (Tab)
      1. Launch JAWS and Edge.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "state, edit, combo, collapsed, to set the value use the arrow keys or type the value"
JAWSFirefoxyes
  • Result: (pass)
    • Test Case: navigate forward to the collapsed combobox without a value using Read next focusable item (Tab)
      1. Launch JAWS and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "state, edit, combo, collapsed, to set the value use the arrow keys or type the value"
NarratorEdgeyes
  • Result: (pass)
    • Test Case: navigate forward to the collapsed combobox without a value using Read next focusable item (Tab)
      1. Launch Narrator and Edge.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "scan off, state, combo, edit, collapsed, has popup"
NVDAChromeyes
  • Result: (pass)
    • Test Case: navigate forward to the collapsed combobox without a value using Read next focusable item (Tab)
      1. Launch NVDA and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "state, combo box, collapsed, has auto complete, editable, blank"
NVDAEdgeyes
  • Result: (pass)
    • Test Case: navigate forward to the collapsed combobox without a value using Read next focusable item (Tab)
      1. Launch NVDA and Edge.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "state, combo box, collapsed, has auto complete, editable, blank"
NVDAFirefoxyes
  • Result: (pass)
    • Test Case: navigate forward to the collapsed combobox without a value using Read next focusable item (Tab)
      1. Launch NVDA and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "states, combobox, collapsed, has auto complete, editable, blank"
OrcaFirefoxyes
  • Result: (pass)
    • Test Case: navigate forward to the collapsed combobox without a value using Read next focusable item (Tab)
      1. Launch Orca and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "state, editable combobox"
TalkBackChromeyes
  • Result: (pass)
    • Test Case: navigate forward to the collapsed combobox without a value using Read next item (Swipe right (or alt+right arrow))
      1. Launch TalkBack and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. 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 command
        • Using the command: "Swipe right (or alt+right arrow)" (Read next item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • virtual cursor location: target
      5. is the expectation met?
    • Output: "collapsed, edit box, state"
    • Result Notes: combobox role was implied by the "collapsed" state + "edit box" role. It could be argued that the combobox role was not conveyed, because the "collapsed" state is a result of aria-expanded rather than the combobox role. However, the absence of an explicit announcement for the combobox role likely will not prevent end users from understanding the combobox behavior of the control because the collapsed state is conveyed along with the text input role.
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. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox"]
        • If multiple elements match the selector, repeat this test for all instances. 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"
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. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox"]
        • If multiple elements match the selector, repeat this test for all instances. 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"
VoiceOver (iOS)Safariyes
  • Result: (pass)
    • Test Case: navigate forward to the collapsed combobox without a value using Next item (Swipe Right)
      1. Launch VoiceOver (iOS) and Safari.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. 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 command
        • Using the command: "Swipe Right" (Next item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • virtual cursor location: target
      5. is the expectation met?
    • Output: "state, combobox, list box popup, collapsed, double tap to expand"
VoiceOver (macOS)Safariyes
  • Result: (pass)
    • Test Case: navigate forward to the collapsed combobox without a value using Read next focusable item (Tab)
      1. Launch VoiceOver (macOS) and Safari.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "state, list box popup, menu popup combobox"
Windows Speech RecognitionEdgeyes
  • 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. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox"]
        • If multiple elements match the selector, repeat this test for all instances. 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"
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. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox"]
        • If multiple elements match the selector, repeat this test for all instances. 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"
Windows Voice AccessEdgeyes
  • Result: (pass)
    • Test Case: Use "Show numbers" (Turn on the numbers overlay)
      1. Launch Windows Voice Access and Edge.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox"]
        • If multiple elements match the selector, repeat this test for all instances. 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"
Windows Voice AccessChromeyes
  • Result: (pass)
    • Test Case: Use "Show numbers" (Turn on the numbers overlay)
      1. Launch Windows Voice Access and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox"]
        • If multiple elements match the selector, repeat this test for all instances. 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"
Windows KeyboardChromenot applicable-
Windows KeyboardFirefoxnot applicable-
Windows KeyboardEdgenot applicable-
Mac KeyboardChromenot applicable-
Mac KeyboardSafarinot applicable-
iOS KeyboardSafarinot applicable-
Android KeyboardChromenot applicable-

Extended Support for: combobox role: convey its role

These are less common combinations

ATBrowserHas SupportOutput
Dragon Naturally SpeakingIEunknown-
Dragon Naturally SpeakingFirefoxunknown-
JAWS 2021.2011.16IE 11none
  • Result: (fail)
    • Test Case: navigate forward to the collapsed combobox without a value using Read next focusable item (Tab)
      1. Launch JAWS and IE.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "state, edit, type in text"
NarratorFirefoxunknown-
NarratorChromeunknown-
NarratorIEunknown-
NVDAIEunknown-
TalkBackFirefoxunknown-
Voice Access (Android)Firefoxunknown-
VoiceOver (iOS)Chromeunknown-
VoiceOver (macOS)Chromeunknown-
VoiceOver (macOS)Firefoxunknown-
OrcaChromeunknown-
Voice Control (MacOS)Chromeunknown-
Voice Control (MacOS)Firefoxunknown-
Mac KeyboardFirefoxnot applicable-
Android KeyboardFirefoxnot applicable-
Back to top

Expectation for the combobox role: convey the current value - applied to the input[type="text"] element

This expectation is applied to the input[type="text"] element. Expectations and results might differ when the the feature is applied to different roles.

This expectation is from the combobox role feature.

Rationale:

A screen reader user needs to know the current value of the input.

Strength of this expectation for different types of assistive technologies:

  • Screen Readers: MUST
  • Voice Control: NA

Examples:

  • A screen reader might convey the value as something like "<role>, <name>, <value>" (order varies by screen reader and settings)

Grading method:

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

Notes:

Historically, this has not been a requirement explicitly defined in the ARIA spec. However, native counterparts do this, the value us displayed visually, and ARIA 1.2 (draft) does explicitly state this requirement.

ATBrowserHas SupportOutput
Dragon Naturally SpeakingChromenot applicable-
JAWSChromeyes
  • Result: (pass)
    • Test Case: navigate forward to the collapsed combobox without a value using Read next focusable item (Tab)
      1. Launch JAWS and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "state, edit, combo, collapsed, to set the value use the arrow keys or type the value"
    • Result Notes: value is blank
JAWSEdgeyes
  • Result: (pass)
    • Test Case: navigate forward to the collapsed combobox without a value using Read next focusable item (Tab)
      1. Launch JAWS and Edge.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "state, edit, combo, collapsed, to set the value use the arrow keys or type the value"
    • Result Notes: value is blank
JAWSFirefoxyes
  • Result: (pass)
    • Test Case: navigate forward to the collapsed combobox without a value using Read next focusable item (Tab)
      1. Launch JAWS and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "state, edit, combo, collapsed, to set the value use the arrow keys or type the value"
    • Result Notes: value is blank
NarratorEdgeyes
  • Result: (pass)
    • Test Case: navigate forward to the collapsed combobox without a value using Read next focusable item (Tab)
      1. Launch Narrator and Edge.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "scan off, state, combo, edit, collapsed, has popup"
    • Result Notes: value is blank
NVDAChromeyes
  • Result: (pass)
    • Test Case: navigate forward to the collapsed combobox without a value using Read next focusable item (Tab)
      1. Launch NVDA and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "state, combo box, collapsed, has auto complete, editable, blank"
    • Result Notes: value is blank
NVDAEdgeyes
  • Result: (pass)
    • Test Case: navigate forward to the collapsed combobox without a value using Read next focusable item (Tab)
      1. Launch NVDA and Edge.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "state, combo box, collapsed, has auto complete, editable, blank"
    • Result Notes: value is blank
NVDAFirefoxyes
  • Result: (pass)
    • Test Case: navigate forward to the collapsed combobox without a value using Read next focusable item (Tab)
      1. Launch NVDA and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "states, combobox, collapsed, has auto complete, editable, blank"
    • Result Notes: value is blank
OrcaFirefoxyes
  • Result: (pass)
    • Test Case: navigate forward to the collapsed combobox without a value using Read next focusable item (Tab)
      1. Launch Orca and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "state, editable combobox"
    • Result Notes: value is blank
TalkBackChromeyes
  • Result: (pass)
    • Test Case: navigate forward to the collapsed combobox without a value using Read next item (Swipe right (or alt+right arrow))
      1. Launch TalkBack and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. 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 command
        • Using the command: "Swipe right (or alt+right arrow)" (Read next item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • virtual cursor location: target
      5. is the expectation met?
    • Output: "collapsed, edit box, state"
    • Result Notes: value is blank
Voice Access (Android)Chromenot applicable-
Voice Control (iOS)Safarinot applicable-
Voice Control (MacOS)Safarinot applicable-
VoiceOver (iOS)Safariyes
  • Result: (pass)
    • Test Case: navigate forward to the collapsed combobox without a value using Next item (Swipe Right)
      1. Launch VoiceOver (iOS) and Safari.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. 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 command
        • Using the command: "Swipe Right" (Next item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • virtual cursor location: target
      5. is the expectation met?
    • Output: "state, combobox, list box popup, collapsed, double tap to expand"
    • Result Notes: value is blank
VoiceOver (macOS)Safariyes
  • Result: (pass)
    • Test Case: navigate forward to the collapsed combobox without a value using Read next focusable item (Tab)
      1. Launch VoiceOver (macOS) and Safari.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "state, list box popup, menu popup combobox"
    • Result Notes: value is blank
Windows Speech RecognitionEdgenot applicable-
Windows Speech RecognitionChromenot applicable-
Windows Voice AccessEdgenot applicable-
Windows Voice AccessChromenot applicable-
Windows KeyboardChromenot applicable-
Windows KeyboardFirefoxnot applicable-
Windows KeyboardEdgenot applicable-
Mac KeyboardChromenot applicable-
Mac KeyboardSafarinot applicable-
iOS KeyboardSafarinot applicable-
Android KeyboardChromenot applicable-

Extended Support for: combobox role: convey the current value

These are less common combinations

ATBrowserHas SupportOutput
Dragon Naturally SpeakingIEnot applicable-
Dragon Naturally SpeakingFirefoxnot applicable-
JAWS 2021.2011.16IE 11yes
  • Result: (pass)
    • Test Case: navigate forward to the collapsed combobox without a value using Read next focusable item (Tab)
      1. Launch JAWS and IE.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "state, edit, type in text"
    • Result Notes: value is blank
NarratorFirefoxunknown-
NarratorChromeunknown-
NarratorIEunknown-
NVDAIEunknown-
TalkBackFirefoxunknown-
Voice Access (Android)Firefoxnot applicable-
VoiceOver (iOS)Chromeunknown-
VoiceOver (macOS)Chromeunknown-
VoiceOver (macOS)Firefoxunknown-
OrcaChromeunknown-
Voice Control (MacOS)Chromenot applicable-
Voice Control (MacOS)Firefoxnot applicable-
Mac KeyboardFirefoxnot applicable-
Android KeyboardFirefoxnot applicable-
Back to top

Expectation for the combobox role: convey changes in value - applied to the input[type="text"] element

This expectation is applied to the input[type="text"] element. Expectations and results might differ when the the feature is applied to different roles.

This expectation is from the combobox role feature.

Rationale:

The user needs to know that the value was successfully changed.

Strength of this expectation for different types of assistive technologies:

  • Screen Readers: MUST
  • Voice Control: NA

Examples:

  • A screen reader might announce the new value after it has been 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: Enter text into the collapsed combobox using enter text (<enter text>)
      1. Launch JAWS and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • summary: navigate forward to the combobox
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. issue command
        • summary: type "ne"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and the change in expanded state should be conveyed
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. is the expectation met?
    • Output: input is echoed back ("n", "e"). "expanded" is announced when the list box is expanded.
JAWSEdgeyes
  • Result: (pass)
    • Test Case: Enter text into the collapsed combobox using enter text (<enter text>)
      1. Launch JAWS and Edge.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • summary: navigate forward to the combobox
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. issue command
        • summary: type "ne"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and the change in expanded state should be conveyed
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. is the expectation met?
    • Output: input is echoed back ("n", "e"). "expanded" is announced when the list box is expanded.
JAWSFirefoxyes
  • Result: (pass)
    • Test Case: Enter text into the collapsed combobox using enter text (<enter text>)
      1. Launch JAWS and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • summary: navigate forward to the combobox
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. issue command
        • summary: type "ne"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and the change in expanded state should be conveyed
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. is the expectation met?
    • Output: input is echoed back ("n", "e"). "expanded" is announced when the list box is expanded.
NarratorEdgeyes
  • Result: (pass)
    • Test Case: Enter text into the collapsed combobox using enter text (<enter text>)
      1. Launch Narrator and Edge.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • summary: navigate forward to the combobox
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. issue command
        • summary: type "ne"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and the change in expanded state should be conveyed
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. is the expectation met?
    • Output: input is echoed back ("n", "e"). "suggestions available" is announced when the list box is expanded.
NVDAChromeyes
  • Result: (pass)
    • Test Case: Enter text into the collapsed combobox using enter text (<enter text>)
      1. Launch NVDA and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • summary: navigate forward to the combobox
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. issue command
        • summary: type "ne"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and the change in expanded state should be conveyed
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. is the expectation met?
    • Output: input is echoed back ("n", "e"). "expanded" is announced when the list box is expanded.
NVDAEdgeyes
  • Result: (pass)
    • Test Case: Enter text into the collapsed combobox using enter text (<enter text>)
      1. Launch NVDA and Edge.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • summary: navigate forward to the combobox
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. issue command
        • summary: type "ne"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and the change in expanded state should be conveyed
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. is the expectation met?
    • Output: input is echoed back ("n", "e"). "expanded" is announced when the list box is expanded.
NVDAFirefoxyes
  • Result: (pass)
    • Test Case: Enter text into the collapsed combobox using enter text (<enter text>)
      1. Launch NVDA and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • summary: navigate forward to the combobox
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. issue command
        • summary: type "ne"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and the change in expanded state should be conveyed
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. is the expectation met?
    • Output: input is echoed back ("n", "e"). "expanded" is announced when the list box is expanded.
OrcaFirefoxyes
  • Result: (pass)
    • Test Case: Enter text into the collapsed combobox using enter text (<enter text>)
      1. Launch Orca and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • summary: navigate forward to the combobox
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. issue command
        • summary: type "ne"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and the change in expanded state should be conveyed
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. is the expectation met?
    • Output: input is echoed back ("n", "e"). "state, editable combobox, expanded" is announced when the list box is expanded.
TalkBackChromeyes
  • Result: (pass)
    • Test Case: Enter text into the collapsed combobox using enter text (<enter text>)
      1. Launch TalkBack and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. 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 command
        • summary: navigate forward to the combobox
        • Using the command: "Swipe right (or alt+right arrow)" (Read next item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • virtual cursor location: target
      5. issue command
        • summary: type "ne"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and the change in expanded state should be conveyed
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • virtual cursor location: target
      6. is the expectation met?
    • Output: input is echoed back ("n", "e").
    • Command Notes: list box does not expand while typing, you must expand it via the button
Voice Access (Android)Chromenot applicable-
Voice Control (iOS)Safarinot applicable-
Voice Control (MacOS)Safarinot applicable-
VoiceOver (iOS)Safariyes
  • Result: (pass)
    • Test Case: Enter text into the collapsed combobox using enter text (<enter text>)
      1. Launch VoiceOver (iOS) and Safari.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. 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 command
        • summary: navigate forward to the combobox
        • Using the command: "Swipe Right" (Next item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • virtual cursor location: target
      5. issue command
        • summary: type "ne"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and the change in expanded state should be conveyed
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • virtual cursor location: target
      6. is the expectation met?
    • Output: input is echoed back ("n", "e").
    • Command Notes: nothing is announced to indicate that the list box has expanded while typing
VoiceOver (macOS)Safariyes
  • Result: (pass)
    • Test Case: Enter text into the collapsed combobox using enter text (<enter text>)
      1. Launch VoiceOver (macOS) and Safari.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • summary: navigate forward to the combobox
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. issue command
        • summary: type "ne"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and the change in expanded state should be conveyed
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. is the expectation met?
    • Output: input is echoed back ("n", "e").
    • Command Notes: there is no indication that the listbox was expanded
Windows Speech RecognitionEdgenot applicable-
Windows Speech RecognitionChromenot applicable-
Windows Voice AccessEdgenot applicable-
Windows Voice AccessChromenot applicable-
Windows KeyboardChromenot applicable-
Windows KeyboardFirefoxnot applicable-
Windows KeyboardEdgenot applicable-
Mac KeyboardChromenot applicable-
Mac KeyboardSafarinot applicable-
iOS KeyboardSafarinot applicable-
Android KeyboardChromenot applicable-

Extended Support for: combobox role: convey changes in value

These are less common combinations

ATBrowserHas SupportOutput
Dragon Naturally SpeakingIEnot applicable-
Dragon Naturally SpeakingFirefoxnot applicable-
JAWS 2021.2011.16IE 11not applicable
  • Result: (na)
    • Test Case: Enter text into the collapsed combobox using enter text (<enter text>)
      1. Launch JAWS and IE.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • summary: navigate forward to the combobox
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. issue command
        • summary: type "ne"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and the change in expanded state should be conveyed
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. is the expectation met?
    • Output:
    • Command Notes: example does not support IE; can't test dynamic functionality
NarratorFirefoxunknown-
NarratorChromeunknown-
NarratorIEunknown-
NVDAIEunknown-
TalkBackFirefoxunknown-
Voice Access (Android)Firefoxnot applicable-
VoiceOver (iOS)Chromeunknown-
VoiceOver (macOS)Chromeunknown-
VoiceOver (macOS)Firefoxunknown-
OrcaChromeunknown-
Voice Control (MacOS)Chromenot applicable-
Voice Control (MacOS)Firefoxnot applicable-
Mac KeyboardFirefoxnot applicable-
Android KeyboardFirefoxnot applicable-
Back to top

Expectation for the combobox role: convey that the combobox is editable - applied to the input[type="text"] element

This expectation is applied to the input[type="text"] element. Expectations and results might differ when the the feature is applied to different roles.

This expectation is from the combobox role feature.

Rationale:

users should be made aware that they can type into a combobox. Not all comboboxes are editable.

Strength of this expectation for different types of assistive technologies:

  • Screen Readers: MUST
  • Voice Control: NA

Examples:

  • A screen reader might convey that the combobox is editable by announcing something like "editable"

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: navigate forward to the collapsed combobox without a value using Read next focusable item (Tab)
      1. Launch JAWS and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "state, edit, combo, collapsed, to set the value use the arrow keys or type the value"
JAWSEdgeyes
  • Result: (pass)
    • Test Case: navigate forward to the collapsed combobox without a value using Read next focusable item (Tab)
      1. Launch JAWS and Edge.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "state, edit, combo, collapsed, to set the value use the arrow keys or type the value"
JAWSFirefoxyes
  • Result: (pass)
    • Test Case: navigate forward to the collapsed combobox without a value using Read next focusable item (Tab)
      1. Launch JAWS and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "state, edit, combo, collapsed, to set the value use the arrow keys or type the value"
NarratorEdgeyes
  • Result: (pass)
    • Test Case: navigate forward to the collapsed combobox without a value using Read next focusable item (Tab)
      1. Launch Narrator and Edge.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "scan off, state, combo, edit, collapsed, has popup"
NVDAChromeyes
  • Result: (pass)
    • Test Case: navigate forward to the collapsed combobox without a value using Read next focusable item (Tab)
      1. Launch NVDA and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "state, combo box, collapsed, has auto complete, editable, blank"
NVDAEdgeyes
  • Result: (pass)
    • Test Case: navigate forward to the collapsed combobox without a value using Read next focusable item (Tab)
      1. Launch NVDA and Edge.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "state, combo box, collapsed, has auto complete, editable, blank"
NVDAFirefoxyes
  • Result: (pass)
    • Test Case: navigate forward to the collapsed combobox without a value using Read next focusable item (Tab)
      1. Launch NVDA and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "states, combobox, collapsed, has auto complete, editable, blank"
OrcaFirefoxyes
  • Result: (pass)
    • Test Case: navigate forward to the collapsed combobox without a value using Read next focusable item (Tab)
      1. Launch Orca and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "state, editable combobox"
TalkBackChromeyes
  • Result: (pass)
    • Test Case: navigate forward to the collapsed combobox without a value using Read next item (Swipe right (or alt+right arrow))
      1. Launch TalkBack and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. 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 command
        • Using the command: "Swipe right (or alt+right arrow)" (Read next item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • virtual cursor location: target
      5. is the expectation met?
    • Output: "collapsed, edit box, state"
Voice Access (Android)Chromenot applicable-
Voice Control (iOS)Safarinot applicable-
Voice Control (MacOS)Safarinot applicable-
VoiceOver (iOS)Safariyes
  • Result: (pass)
    • Test Case: navigate forward to the collapsed combobox without a value using Next item (Swipe Right)
      1. Launch VoiceOver (iOS) and Safari.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. 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 command
        • Using the command: "Swipe Right" (Next item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • virtual cursor location: target
      5. is the expectation met?
    • Output: "state, combobox, list box popup, collapsed, double tap to expand"
    • Result Notes: is it implied with VO that comboboxes are editable
VoiceOver (macOS)Safariyes
  • Result: (pass)
    • Test Case: navigate forward to the collapsed combobox without a value using Read next focusable item (Tab)
      1. Launch VoiceOver (macOS) and Safari.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "state, list box popup, menu popup combobox"
    • Result Notes: on MacOS, comboboxes are implicitly editable
Windows Speech RecognitionEdgenot applicable-
Windows Speech RecognitionChromenot applicable-
Windows Voice AccessEdgenot applicable-
Windows Voice AccessChromenot applicable-
Windows KeyboardChromenot applicable-
Windows KeyboardFirefoxnot applicable-
Windows KeyboardEdgenot applicable-
Mac KeyboardChromenot applicable-
Mac KeyboardSafarinot applicable-
iOS KeyboardSafarinot applicable-
Android KeyboardChromenot applicable-

Extended Support for: combobox role: convey that the combobox is editable

These are less common combinations

ATBrowserHas SupportOutput
Dragon Naturally SpeakingIEnot applicable-
Dragon Naturally SpeakingFirefoxnot applicable-
JAWS 2021.2011.16IE 11yes
  • Result: (pass)
    • Test Case: navigate forward to the collapsed combobox without a value using Read next focusable item (Tab)
      1. Launch JAWS and IE.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="combobox" aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `*[role="combobox" aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "state, edit, type in text"
NarratorFirefoxunknown-
NarratorChromeunknown-
NarratorIEunknown-
NVDAIEunknown-
TalkBackFirefoxunknown-
Voice Access (Android)Firefoxnot applicable-
VoiceOver (iOS)Chromeunknown-
VoiceOver (macOS)Chromeunknown-
VoiceOver (macOS)Firefoxunknown-
OrcaChromeunknown-
Voice Control (MacOS)Chromenot applicable-
Voice Control (MacOS)Firefoxnot applicable-
Mac KeyboardFirefoxnot applicable-
Android KeyboardFirefoxnot applicable-
Back to top

Expectation for the listbox role: convey its name

This expectation is from the listbox role feature.

Rationale:

A screen reader user needs to know what to enter.

Strength of this expectation for different types of assistive technologies:

  • Screen Readers: MUST
  • Voice Control: NA

Examples:

  • A screen reader might convey the name when entering the listbox

Grading method:

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

ATBrowserHas SupportOutput
Dragon Naturally SpeakingChromeunknown-
JAWSChromeyes
  • Result: (pass)
    • Test Case: Navigate into listbox from the combobox input using select next option (Down arrow)
      1. Launch JAWS and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="listbox"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • summary: navigate forward to the combobox
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. issue command
        • summary: type "nebr"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and listbox should display
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. issue command
        • summary: navigate into the listbox
        • Using the command: "Down arrow" (select next option)
        • Observe: the listbox role and name should be conveyed
        • Ensure AT location after executing the command
          • Target: `*[role="listbox"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      8. is the expectation met?
    • Output: "states list with 6 items, nebraska, 1 of 6, to move to an item press the arrow keys"
JAWSEdgeyes
  • Result: (pass)
    • Test Case: Navigate into listbox from the combobox input using select next option (Down arrow)
      1. Launch JAWS and Edge.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="listbox"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • summary: navigate forward to the combobox
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. issue command
        • summary: type "nebr"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and listbox should display
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. issue command
        • summary: navigate into the listbox
        • Using the command: "Down arrow" (select next option)
        • Observe: the listbox role and name should be conveyed
        • Ensure AT location after executing the command
          • Target: `*[role="listbox"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      8. is the expectation met?
    • Output: "states list with 6 items, nebraska, 1 of 6, to move to an item press the arrow keys"
JAWSFirefoxyes
  • Result: (pass)
    • Test Case: Navigate into listbox from the combobox input using select next option (Down arrow)
      1. Launch JAWS and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="listbox"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • summary: navigate forward to the combobox
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. issue command
        • summary: type "nebr"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and listbox should display
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. issue command
        • summary: navigate into the listbox
        • Using the command: "Down arrow" (select next option)
        • Observe: the listbox role and name should be conveyed
        • Ensure AT location after executing the command
          • Target: `*[role="listbox"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      8. is the expectation met?
    • Output: "states list with 6 items, nebraska, 1 of 6, to move to an item press the arrow keys"
NarratorEdgeyes
  • Result: (pass)
    • Test Case: Navigate into listbox from the combobox input using select next option (Down arrow)
      1. Launch Narrator and Edge.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="listbox"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • summary: navigate forward to the combobox
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. issue command
        • summary: type "nebr"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and listbox should display
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. issue command
        • summary: navigate into the listbox
        • Using the command: "Down arrow" (select next option)
        • Observe: the listbox role and name should be conveyed
        • Ensure AT location after executing the command
          • Target: `*[role="listbox"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      8. is the expectation met?
    • Output: "scan, states, nebraska, 1 of 6, selected"
NVDAChromeyes
  • Result: (pass)
    • Test Case: Navigate into listbox from the combobox input using select next option (Down arrow)
      1. Launch NVDA and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="listbox"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • summary: navigate forward to the combobox
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. issue command
        • summary: type "nebr"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and listbox should display
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. issue command
        • summary: navigate into the listbox
        • Using the command: "Down arrow" (select next option)
        • Observe: the listbox role and name should be conveyed
        • Ensure AT location after executing the command
          • Target: `*[role="listbox"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      8. is the expectation met?
    • Output: "states, list, nebraska, 1 of 6"
NVDAEdgeyes
  • Result: (pass)
    • Test Case: Navigate into listbox from the combobox input using select next option (Down arrow)
      1. Launch NVDA and Edge.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="listbox"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • summary: navigate forward to the combobox
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. issue command
        • summary: type "nebr"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and listbox should display
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. issue command
        • summary: navigate into the listbox
        • Using the command: "Down arrow" (select next option)
        • Observe: the listbox role and name should be conveyed
        • Ensure AT location after executing the command
          • Target: `*[role="listbox"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      8. is the expectation met?
    • Output: "states, list, nebraska, 1 of 6"
NVDAFirefoxyes
  • Result: (pass)
    • Test Case: Navigate into listbox from the combobox input using select next option (Down arrow)
      1. Launch NVDA and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="listbox"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • summary: navigate forward to the combobox
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. issue command
        • summary: type "nebr"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and listbox should display
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. issue command
        • summary: navigate into the listbox
        • Using the command: "Down arrow" (select next option)
        • Observe: the listbox role and name should be conveyed
        • Ensure AT location after executing the command
          • Target: `*[role="listbox"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      8. is the expectation met?
    • Output: "states list, nebraska, 1 of 6"
OrcaFirefoxyes
  • Result: (pass)
    • Test Case: Navigate into listbox from the combobox input using select next option (Down arrow)
      1. Launch Orca and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="listbox"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • summary: navigate forward to the combobox
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. issue command
        • summary: type "nebr"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and listbox should display
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. issue command
        • summary: navigate into the listbox
        • Using the command: "Down arrow" (select next option)
        • Observe: the listbox role and name should be conveyed
        • Ensure AT location after executing the command
          • Target: `*[role="listbox"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      8. is the expectation met?
    • Output: "states list with 6 items, nebraska"
TalkBackChromeyes
  • Result: (pass)
    • Test Case: Navigate into listbox from the combobox input using Select next option (Swipe right)
      1. Launch TalkBack and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="listbox"]
        • If multiple elements match the selector, repeat this test for all instances. 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 command
        • summary: navigate forward to the combobox
        • Using the command: "Swipe right (or alt+right arrow)" (Read next item)
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • virtual cursor location: target
      5. issue command
        • summary: type "nebr"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and listbox should display
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • virtual cursor location: target
      6. issue command
        • summary: navigate into the listbox
        • Using the command: "Swipe right" (Select next option)
        • Observe: the listbox role and name should be conveyed
        • Ensure AT location after executing the command
          • Target: `*[role="listbox"]`
          • virtual cursor location: within target
      7. is the expectation met?
    • Output: "states, list box" (swipe right again) "end of example, splitter"
Voice Access (Android)Chromeunknown-
Voice Control (iOS)Safariunknown-
Voice Control (MacOS)Safariunknown-
VoiceOver (iOS)Safariyes
  • Result: (pass)
    • Test Case: Navigate into listbox from the combobox input using select next option (Swipe down)
      1. Launch VoiceOver (iOS) and Safari.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="listbox"]
        • If multiple elements match the selector, repeat this test for all instances. 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 command
        • summary: navigate forward to the combobox
        • Using the command: "Swipe Right" (Next item)
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • virtual cursor location: target
      5. issue command
        • summary: type "nebr"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and listbox should display
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • virtual cursor location: target
      6. issue command
        • summary: navigate into the listbox
        • Using the command: "Swipe down" (select next option)
        • Observe: the listbox role and name should be conveyed
        • Ensure AT location after executing the command
          • Target: `*[role="listbox"]`
          • virtual cursor location: within target
      7. is the expectation met?
    • Output: "states, nebraska, list start"
VoiceOver (macOS)Safariyes
  • Result: (pass)
    • Test Case: Navigate to the listbox container from an option using select next option (Down arrow)
      1. Launch VoiceOver (macOS) and Safari.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="listbox"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • summary: navigate forward to the combobox
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. issue command
        • summary: type "nebr"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and listbox should display
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. issue command
        • summary: move to the first option
        • Using the command: "Down arrow" (select next option)
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      8. issue command
        • summary: navigate to the listbox container
        • Using the command: "Down arrow" (select next option)
        • You may need to issue this command multiple times
        • Ensure AT location after executing the command
          • Target: `*[role="listbox"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      9. is the expectation met?
    • Output: out of states, list box, one item selected, nevada selected, 2 of 6
Windows Speech RecognitionEdgeunknown-
Windows Speech RecognitionChromeunknown-
Windows Voice AccessEdgeunknown-
Windows Voice AccessChromeunknown-
Windows KeyboardChromenot applicable-
Windows KeyboardFirefoxnot applicable-
Windows KeyboardEdgenot applicable-
Mac KeyboardChromenot applicable-
Mac KeyboardSafarinot applicable-
iOS KeyboardSafarinot applicable-
Android KeyboardChromenot applicable-

Extended Support for: listbox role: convey its name

These are less common combinations

ATBrowserHas SupportOutput
Dragon Naturally SpeakingIEunknown-
Dragon Naturally SpeakingFirefoxunknown-
JAWS 2021.2011.16IE 11not applicable
  • Result: (na)
    • Test Case: Navigate into listbox from the combobox input using select next option (Down arrow)
      1. Launch JAWS and IE.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="listbox"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • summary: navigate forward to the combobox
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. issue command
        • summary: type "nebr"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and listbox should display
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. issue command
        • summary: navigate into the listbox
        • Using the command: "Down arrow" (select next option)
        • Observe: the listbox role and name should be conveyed
        • Ensure AT location after executing the command
          • Target: `*[role="listbox"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      8. is the expectation met?
    • Output:
    • Command Notes: example does not support IE; can't test dynamic functionality
NarratorFirefoxunknown-
NarratorChromeunknown-
NarratorIEunknown-
NVDAIEunknown-
TalkBackFirefoxunknown-
Voice Access (Android)Firefoxunknown-
VoiceOver (iOS)Chromeunknown-
VoiceOver (macOS)Chromeunknown-
VoiceOver (macOS)Firefoxunknown-
OrcaChromeunknown-
Voice Control (MacOS)Chromeunknown-
Voice Control (MacOS)Firefoxunknown-
Mac KeyboardFirefoxnot applicable-
Android KeyboardFirefoxnot applicable-
Back to top

Expectation for the listbox role: convey its role

This expectation is from the listbox role feature.

Rationale:

A screen reader user needs to know how they can interact with the element. Voice control software might use the role to help users activate controls that do not have a visible name.

Strength of this expectation for different types of assistive technologies:

  • Screen Readers: MUST
  • Voice Control: NA

Examples:

  • A screen reader might explicitly convey the role as something like "list box", "list", or imply it by explicitly conveying "option" roles

Grading method:

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

ATBrowserHas SupportOutput
Dragon Naturally SpeakingChromeunknown-
JAWSChromeyes
  • Result: (pass)
    • Test Case: Navigate into listbox from the combobox input using select next option (Down arrow)
      1. Launch JAWS and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="listbox"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • summary: navigate forward to the combobox
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. issue command
        • summary: type "nebr"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and listbox should display
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. issue command
        • summary: navigate into the listbox
        • Using the command: "Down arrow" (select next option)
        • Observe: the listbox role and name should be conveyed
        • Ensure AT location after executing the command
          • Target: `*[role="listbox"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      8. is the expectation met?
    • Output: "states list with 6 items, nebraska, 1 of 6, to move to an item press the arrow keys"
JAWSEdgeyes
  • Result: (pass)
    • Test Case: Navigate into listbox from the combobox input using select next option (Down arrow)
      1. Launch JAWS and Edge.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="listbox"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • summary: navigate forward to the combobox
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. issue command
        • summary: type "nebr"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and listbox should display
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. issue command
        • summary: navigate into the listbox
        • Using the command: "Down arrow" (select next option)
        • Observe: the listbox role and name should be conveyed
        • Ensure AT location after executing the command
          • Target: `*[role="listbox"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      8. is the expectation met?
    • Output: "states list with 6 items, nebraska, 1 of 6, to move to an item press the arrow keys"
JAWSFirefoxyes
  • Result: (pass)
    • Test Case: Navigate into listbox from the combobox input using select next option (Down arrow)
      1. Launch JAWS and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="listbox"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • summary: navigate forward to the combobox
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. issue command
        • summary: type "nebr"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and listbox should display
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. issue command
        • summary: navigate into the listbox
        • Using the command: "Down arrow" (select next option)
        • Observe: the listbox role and name should be conveyed
        • Ensure AT location after executing the command
          • Target: `*[role="listbox"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      8. is the expectation met?
    • Output: "states list with 6 items, nebraska, 1 of 6, to move to an item press the arrow keys"
NarratorEdgenone
  • Result: (fail)
    • Test Case: Navigate into listbox from the combobox input using select next option (Down arrow)
      1. Launch Narrator and Edge.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="listbox"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • summary: navigate forward to the combobox
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. issue command
        • summary: type "nebr"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and listbox should display
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. issue command
        • summary: navigate into the listbox
        • Using the command: "Down arrow" (select next option)
        • Observe: the listbox role and name should be conveyed
        • Ensure AT location after executing the command
          • Target: `*[role="listbox"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      8. is the expectation met?
    • Output: "scan, states, nebraska, 1 of 6, selected"
    • Result Notes: combobox can open a list or grid, so the role is important
    • Grading note: This command may be expected to fail. This result simply indicates that it did not yield support.
Grading Note: There is no known/documented support. There may still be support for this expectation, but it is undocumented. If this is the case, please report this issue.
NVDAChromeyes
  • Result: (pass)
    • Test Case: Navigate into listbox from the combobox input using select next option (Down arrow)
      1. Launch NVDA and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="listbox"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • summary: navigate forward to the combobox
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. issue command
        • summary: type "nebr"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and listbox should display
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. issue command
        • summary: navigate into the listbox
        • Using the command: "Down arrow" (select next option)
        • Observe: the listbox role and name should be conveyed
        • Ensure AT location after executing the command
          • Target: `*[role="listbox"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      8. is the expectation met?
    • Output: "states, list, nebraska, 1 of 6"
NVDAEdgeyes
  • Result: (pass)
    • Test Case: Navigate into listbox from the combobox input using select next option (Down arrow)
      1. Launch NVDA and Edge.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="listbox"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • summary: navigate forward to the combobox
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. issue command
        • summary: type "nebr"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and listbox should display
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. issue command
        • summary: navigate into the listbox
        • Using the command: "Down arrow" (select next option)
        • Observe: the listbox role and name should be conveyed
        • Ensure AT location after executing the command
          • Target: `*[role="listbox"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      8. is the expectation met?
    • Output: "states, list, nebraska, 1 of 6"
NVDAFirefoxyes
  • Result: (pass)
    • Test Case: Navigate into listbox from the combobox input using select next option (Down arrow)
      1. Launch NVDA and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="listbox"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • summary: navigate forward to the combobox
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. issue command
        • summary: type "nebr"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and listbox should display
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. issue command
        • summary: navigate into the listbox
        • Using the command: "Down arrow" (select next option)
        • Observe: the listbox role and name should be conveyed
        • Ensure AT location after executing the command
          • Target: `*[role="listbox"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      8. is the expectation met?
    • Output: "states list, nebraska, 1 of 6"
OrcaFirefoxyes
  • Result: (pass)
    • Test Case: Navigate into listbox from the combobox input using select next option (Down arrow)
      1. Launch Orca and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="listbox"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • summary: navigate forward to the combobox
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. issue command
        • summary: type "nebr"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and listbox should display
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. issue command
        • summary: navigate into the listbox
        • Using the command: "Down arrow" (select next option)
        • Observe: the listbox role and name should be conveyed
        • Ensure AT location after executing the command
          • Target: `*[role="listbox"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      8. is the expectation met?
    • Output: "states list with 6 items, nebraska"
TalkBackChromeyes
  • Result: (pass)
    • Test Case: Navigate into listbox from the combobox input using Select next option (Swipe right)
      1. Launch TalkBack and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="listbox"]
        • If multiple elements match the selector, repeat this test for all instances. 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 command
        • summary: navigate forward to the combobox
        • Using the command: "Swipe right (or alt+right arrow)" (Read next item)
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • virtual cursor location: target
      5. issue command
        • summary: type "nebr"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and listbox should display
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • virtual cursor location: target
      6. issue command
        • summary: navigate into the listbox
        • Using the command: "Swipe right" (Select next option)
        • Observe: the listbox role and name should be conveyed
        • Ensure AT location after executing the command
          • Target: `*[role="listbox"]`
          • virtual cursor location: within target
      7. is the expectation met?
    • Output: "states, list box" (swipe right again) "end of example, splitter"
Voice Access (Android)Chromeunknown-
Voice Control (iOS)Safarinot applicable-
Voice Control (MacOS)Safariunknown-
VoiceOver (iOS)Safariyes
  • Result: (pass)
    • Test Case: Navigate into listbox from the combobox input using select next option (Swipe down)
      1. Launch VoiceOver (iOS) and Safari.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="listbox"]
        • If multiple elements match the selector, repeat this test for all instances. 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 command
        • summary: navigate forward to the combobox
        • Using the command: "Swipe Right" (Next item)
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • virtual cursor location: target
      5. issue command
        • summary: type "nebr"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and listbox should display
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • virtual cursor location: target
      6. issue command
        • summary: navigate into the listbox
        • Using the command: "Swipe down" (select next option)
        • Observe: the listbox role and name should be conveyed
        • Ensure AT location after executing the command
          • Target: `*[role="listbox"]`
          • virtual cursor location: within target
      7. is the expectation met?
    • Output: "states, nebraska, list start"
VoiceOver (macOS)Safariyes
  • Result: (pass)
    • Test Case: Navigate to the listbox container from an option using select next option (Down arrow)
      1. Launch VoiceOver (macOS) and Safari.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="listbox"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • summary: navigate forward to the combobox
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. issue command
        • summary: type "nebr"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and listbox should display
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. issue command
        • summary: move to the first option
        • Using the command: "Down arrow" (select next option)
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      8. issue command
        • summary: navigate to the listbox container
        • Using the command: "Down arrow" (select next option)
        • You may need to issue this command multiple times
        • Ensure AT location after executing the command
          • Target: `*[role="listbox"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      9. is the expectation met?
    • Output: out of states, list box, one item selected, nevada selected, 2 of 6
Windows Speech RecognitionEdgeunknown-
Windows Speech RecognitionChromeunknown-
Windows Voice AccessEdgeunknown-
Windows Voice AccessChromeunknown-
Windows KeyboardChromenot applicable-
Windows KeyboardFirefoxnot applicable-
Windows KeyboardEdgenot applicable-
Mac KeyboardChromenot applicable-
Mac KeyboardSafarinot applicable-
iOS KeyboardSafarinot applicable-
Android KeyboardChromenot applicable-

Extended Support for: listbox role: convey its role

These are less common combinations

ATBrowserHas SupportOutput
Dragon Naturally SpeakingIEunknown-
Dragon Naturally SpeakingFirefoxunknown-
JAWS 2021.2011.16IE 11not applicable
  • Result: (na)
    • Test Case: Navigate into listbox from the combobox input using select next option (Down arrow)
      1. Launch JAWS and IE.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="listbox"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • summary: navigate forward to the combobox
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. issue command
        • summary: type "nebr"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and listbox should display
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. issue command
        • summary: navigate into the listbox
        • Using the command: "Down arrow" (select next option)
        • Observe: the listbox role and name should be conveyed
        • Ensure AT location after executing the command
          • Target: `*[role="listbox"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      8. is the expectation met?
    • Output:
    • Command Notes: example does not support IE; can't test dynamic functionality
NarratorFirefoxunknown-
NarratorChromeunknown-
NarratorIEunknown-
NVDAIEunknown-
TalkBackFirefoxunknown-
Voice Access (Android)Firefoxunknown-
VoiceOver (iOS)Chromeunknown-
VoiceOver (macOS)Chromeunknown-
VoiceOver (macOS)Firefoxunknown-
OrcaChromeunknown-
Voice Control (MacOS)Chromeunknown-
Voice Control (MacOS)Firefoxunknown-
Mac KeyboardFirefoxnot applicable-
Android KeyboardFirefoxnot applicable-
Back to top

Expectation for the listbox role: convey its boundaries

This expectation is from the listbox role feature.

Rationale:

The user needs to know when they enter and leave the listbox.

Strength of this expectation for different types of assistive technologies:

  • Screen Readers: SHOULD
  • Voice Control: NA

Examples:

  • A screen reader might convey the listbox name and role when entering, and something like "out of list" when exiting
  • A screen reader might convey information about the position in the options, such as "4 of 4" to indicate the start and end of the options

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: Navigate through listbox using select next option (Down arrow)
      1. Launch JAWS and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="listbox"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • summary: navigate forward to the combobox
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. issue command
        • summary: type "nebr"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and listbox should display
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. issue command
        • summary: navigate through all options in the listbox
        • Using the command: "Down arrow" (select next option)
        • You may need to issue this command multiple times
        • Observe: are the start and end boundaries of the listbox conveyed?
        • Ensure AT location after executing the command
          • Target: `*[role="listbox"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      8. is the expectation met?
    • Output: each option was conveyed. After last option was conveyed, focus was looped back to the first option.
    • Result Notes: boundaries implied by position in set information
JAWSEdgeyes
  • Result: (pass)
    • Test Case: Navigate through listbox using select next option (Down arrow)
      1. Launch JAWS and Edge.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="listbox"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • summary: navigate forward to the combobox
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. issue command
        • summary: type "nebr"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and listbox should display
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. issue command
        • summary: navigate through all options in the listbox
        • Using the command: "Down arrow" (select next option)
        • You may need to issue this command multiple times
        • Observe: are the start and end boundaries of the listbox conveyed?
        • Ensure AT location after executing the command
          • Target: `*[role="listbox"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      8. is the expectation met?
    • Output: each option was conveyed. After last option was conveyed, focus was looped back to the first option.
    • Result Notes: boundaries implied by position in set information
JAWSFirefoxyes
  • Result: (pass)
    • Test Case: Navigate through listbox using select next option (Down arrow)
      1. Launch JAWS and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="listbox"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • summary: navigate forward to the combobox
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. issue command
        • summary: type "nebr"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and listbox should display
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. issue command
        • summary: navigate through all options in the listbox
        • Using the command: "Down arrow" (select next option)
        • You may need to issue this command multiple times
        • Observe: are the start and end boundaries of the listbox conveyed?
        • Ensure AT location after executing the command
          • Target: `*[role="listbox"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      8. is the expectation met?
    • Output: each option was conveyed. After last option was conveyed, focus was looped back to the first option.
    • Result Notes: boundaries implied by position in set information
NarratorEdgeyes
  • Result: (pass)
    • Test Case: Navigate through listbox using select next option (Down arrow)
      1. Launch Narrator and Edge.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="listbox"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • summary: navigate forward to the combobox
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. issue command
        • summary: type "nebr"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and listbox should display
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. issue command
        • summary: navigate through all options in the listbox
        • Using the command: "Down arrow" (select next option)
        • You may need to issue this command multiple times
        • Observe: are the start and end boundaries of the listbox conveyed?
        • Ensure AT location after executing the command
          • Target: `*[role="listbox"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      8. is the expectation met?
    • Output: each option was conveyed. After last option was conveyed, the cursor exited the listbox, but the end boundary was conveyed.
    • Result Notes: boundaries implied by position in set information
NVDAChromeyes
  • Result: (pass)
    • Test Case: Navigate through listbox using select next option (Down arrow)
      1. Launch NVDA and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="listbox"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • summary: navigate forward to the combobox
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. issue command
        • summary: type "nebr"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and listbox should display
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. issue command
        • summary: navigate through all options in the listbox
        • Using the command: "Down arrow" (select next option)
        • You may need to issue this command multiple times
        • Observe: are the start and end boundaries of the listbox conveyed?
        • Ensure AT location after executing the command
          • Target: `*[role="listbox"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      8. is the expectation met?
    • Output: each option was conveyed. After last option was conveyed, focus was looped back to the first option.
    • Result Notes: boundaries implied by position in set information
NVDAEdgeyes
  • Result: (pass)
    • Test Case: Navigate through listbox using select next option (Down arrow)
      1. Launch NVDA and Edge.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="listbox"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • summary: navigate forward to the combobox
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. issue command
        • summary: type "nebr"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and listbox should display
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. issue command
        • summary: navigate through all options in the listbox
        • Using the command: "Down arrow" (select next option)
        • You may need to issue this command multiple times
        • Observe: are the start and end boundaries of the listbox conveyed?
        • Ensure AT location after executing the command
          • Target: `*[role="listbox"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      8. is the expectation met?
    • Output: each option was conveyed. After last option was conveyed, focus was looped back to the first option.
    • Result Notes: boundaries implied by position in set information
NVDAFirefoxyes
  • Result: (pass)
    • Test Case: Navigate through listbox using select next option (Down arrow)
      1. Launch NVDA and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="listbox"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • summary: navigate forward to the combobox
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. issue command
        • summary: type "nebr"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and listbox should display
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. issue command
        • summary: navigate through all options in the listbox
        • Using the command: "Down arrow" (select next option)
        • You may need to issue this command multiple times
        • Observe: are the start and end boundaries of the listbox conveyed?
        • Ensure AT location after executing the command
          • Target: `*[role="listbox"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      8. is the expectation met?
    • Output: each option was conveyed. After last option was conveyed, focus was looped back to the first option.
    • Result Notes: boundaries implied by position in set information
OrcaFirefoxyes
  • Result: (pass)
    • Test Case: Navigate through listbox using select next option (Down arrow)
      1. Launch Orca and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="listbox"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • summary: navigate forward to the combobox
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. issue command
        • summary: type "nebr"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and listbox should display
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. issue command
        • summary: navigate through all options in the listbox
        • Using the command: "Down arrow" (select next option)
        • You may need to issue this command multiple times
        • Observe: are the start and end boundaries of the listbox conveyed?
        • Ensure AT location after executing the command
          • Target: `*[role="listbox"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      8. is the expectation met?
    • Output: each option was conveyed. After last option was conveyed, focus was looped back to the first option.
    • Result Notes: boundaries implied by focus management (loop back to first option)
TalkBackChromeyes
  • Result: (pass)
    • Test Case: Navigate through listbox using Select next option (Swipe right)
      1. Launch TalkBack and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="listbox"]
        • If multiple elements match the selector, repeat this test for all instances. 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 command
        • summary: navigate forward to the combobox
        • Using the command: "Swipe right (or alt+right arrow)" (Read next item)
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • virtual cursor location: target
      5. issue command
        • summary: type "nebr"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and listbox should display
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • virtual cursor location: target
      6. issue command
        • summary: navigate through all options in the listbox
        • Using the command: "Swipe right" (Select next option)
        • You may need to issue this command multiple times
        • Observe: are the start and end boundaries of the listbox conveyed?
        • Ensure AT location after executing the command
          • Target: `*[role="listbox"]`
          • virtual cursor location: within target
      7. is the expectation met?
    • Output: all options were skipped
    • Result Notes: boundaries implied starting role. It was not possible to navigate within.
Voice Access (Android)Chromenot applicable-
Voice Control (iOS)Safarinot applicable-
Voice Control (MacOS)Safarinot applicable-
VoiceOver (iOS)Safariyes
  • Result: (pass)
    • Test Case: Navigate through listbox using select next option (Swipe down)
      1. Launch VoiceOver (iOS) and Safari.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="listbox"]
        • If multiple elements match the selector, repeat this test for all instances. 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 command
        • summary: navigate forward to the combobox
        • Using the command: "Swipe Right" (Next item)
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • virtual cursor location: target
      5. issue command
        • summary: type "nebr"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and listbox should display
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • virtual cursor location: target
      6. issue command
        • summary: navigate through all options in the listbox
        • Using the command: "Swipe down" (select next option)
        • You may need to issue this command multiple times
        • Observe: are the start and end boundaries of the listbox conveyed?
        • Ensure AT location after executing the command
          • Target: `*[role="listbox"]`
          • virtual cursor location: within target
      7. is the expectation met?
    • Output: new york, list end
VoiceOver (macOS)Safarinone
  • Result: (fail)
    • Test Case: Navigate through listbox using select next option (Down arrow)
      1. Launch VoiceOver (macOS) and Safari.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="listbox"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • summary: navigate forward to the combobox
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. issue command
        • summary: type "nebr"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and listbox should display
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. issue command
        • summary: navigate through all options in the listbox
        • Using the command: "Down arrow" (select next option)
        • You may need to issue this command multiple times
        • Observe: are the start and end boundaries of the listbox conveyed?
        • Ensure AT location after executing the command
          • Target: `*[role="listbox"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      8. is the expectation met?
    • Output: contents of listbox were skipped entirely
Grading Note: There is no known/documented support. There may still be support for this expectation, but it is undocumented. If this is the case, please report this issue.
Windows Speech RecognitionEdgenot applicable-
Windows Speech RecognitionChromenot applicable-
Windows Voice AccessEdgenot applicable-
Windows Voice AccessChromenot applicable-
Windows KeyboardChromenot applicable-
Windows KeyboardFirefoxnot applicable-
Windows KeyboardEdgenot applicable-
Mac KeyboardChromenot applicable-
Mac KeyboardSafarinot applicable-
iOS KeyboardSafarinot applicable-
Android KeyboardChromenot applicable-

Extended Support for: listbox role: convey its boundaries

These are less common combinations

ATBrowserHas SupportOutput
Dragon Naturally SpeakingIEnot applicable-
Dragon Naturally SpeakingFirefoxnot applicable-
JAWS 2021.2011.16IE 11not applicable
  • Result: (na)
    • Test Case: Navigate through listbox using select next option (Down arrow)
      1. Launch JAWS and IE.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="listbox"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • summary: navigate forward to the combobox
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. issue command
        • summary: type "nebr"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and listbox should display
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. issue command
        • summary: navigate through all options in the listbox
        • Using the command: "Down arrow" (select next option)
        • You may need to issue this command multiple times
        • Observe: are the start and end boundaries of the listbox conveyed?
        • Ensure AT location after executing the command
          • Target: `*[role="listbox"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      8. is the expectation met?
    • Output:
    • Command Notes: example does not support IE; can't test dynamic functionality
NarratorFirefoxunknown-
NarratorChromeunknown-
NarratorIEunknown-
NVDAIEunknown-
TalkBackFirefoxunknown-
Voice Access (Android)Firefoxnot applicable-
VoiceOver (iOS)Chromeunknown-
VoiceOver (macOS)Chromeunknown-
VoiceOver (macOS)Firefoxunknown-
OrcaChromeunknown-
Voice Control (MacOS)Chromenot applicable-
Voice Control (MacOS)Firefoxnot applicable-
Mac KeyboardFirefoxnot applicable-
Android KeyboardFirefoxnot applicable-
Back to top

Expectation for the option role: convey its name

This expectation is from the option role feature.

Rationale:

A screen reader user needs to know what to enter.

Strength of this expectation for different types of assistive technologies:

  • Screen Readers: MUST
  • Voice Control: MUST

Examples:

  • A screen reader will announce the name of the option
  • Voice control software will let the user say something like "choose <name>".

Grading method:

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

ATBrowserHas SupportOutput
Dragon Naturally SpeakingChromenone
  • Result: (fail)
    • Test Case: Use "Choose <option text>" (Choose drop down option)
      1. Launch Dragon Naturally Speaking and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="option"]
        • If multiple elements match the selector, repeat this test for all instances. 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: "Choose <option text>" (Choose drop down option)
      5. Record results for the relevant expectations
    • Output: text of command was entered into the text input
    • Command Notes: said "choose alaska"
    • Grading note: This command may be expected to fail. This result simply indicates that it did not yield support.
  • Result: (fail)
    • Test Case: Use "Click <text>" (Activate item by name)
      1. Launch Dragon Naturally Speaking and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="option"]
        • If multiple elements match the selector, repeat this test for all instances. 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: text of command was entered into the text input
    • Command Notes: said "click alaska"
    • Grading note: This command may be expected to fail. This result simply indicates that it did not yield support.
Grading Note: There is no known/documented support. There may still be support for this expectation, but it is undocumented. If this is the case, please report this issue.
JAWSChromeyes
  • Result: (pass)
    • Test Case: Navigate into listbox from the combobox input using select next option (Down arrow)
      1. Launch JAWS and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="listbox"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • summary: navigate forward to the combobox
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. issue command
        • summary: type "nebr"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and listbox should display
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. issue command
        • summary: navigate into the listbox
        • Using the command: "Down arrow" (select next option)
        • Observe: the listbox role and name should be conveyed
        • Ensure AT location after executing the command
          • Target: `*[role="listbox"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      8. is the expectation met?
    • Output: "states list with 6 items, nebraska, 1 of 6, to move to an item press the arrow keys"
JAWSEdgeyes
  • Result: (pass)
    • Test Case: Navigate into listbox from the combobox input using select next option (Down arrow)
      1. Launch JAWS and Edge.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="listbox"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • summary: navigate forward to the combobox
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. issue command
        • summary: type "nebr"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and listbox should display
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. issue command
        • summary: navigate into the listbox
        • Using the command: "Down arrow" (select next option)
        • Observe: the listbox role and name should be conveyed
        • Ensure AT location after executing the command
          • Target: `*[role="listbox"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      8. is the expectation met?
    • Output: "states list with 6 items, nebraska, 1 of 6, to move to an item press the arrow keys"
JAWSFirefoxyes
  • Result: (pass)
    • Test Case: Navigate into listbox from the combobox input using select next option (Down arrow)
      1. Launch JAWS and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="listbox"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • summary: navigate forward to the combobox
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. issue command
        • summary: type "nebr"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and listbox should display
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. issue command
        • summary: navigate into the listbox
        • Using the command: "Down arrow" (select next option)
        • Observe: the listbox role and name should be conveyed
        • Ensure AT location after executing the command
          • Target: `*[role="listbox"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      8. is the expectation met?
    • Output: "states list with 6 items, nebraska, 1 of 6, to move to an item press the arrow keys"
NarratorEdgeyes
  • Result: (pass)
    • Test Case: Navigate into listbox from the combobox input using select next option (Down arrow)
      1. Launch Narrator and Edge.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="listbox"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • summary: navigate forward to the combobox
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. issue command
        • summary: type "nebr"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and listbox should display
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. issue command
        • summary: navigate into the listbox
        • Using the command: "Down arrow" (select next option)
        • Observe: the listbox role and name should be conveyed
        • Ensure AT location after executing the command
          • Target: `*[role="listbox"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      8. is the expectation met?
    • Output: "scan, states, nebraska, 1 of 6, selected"
NVDAChromeyes
  • Result: (pass)
    • Test Case: Navigate into listbox from the combobox input using select next option (Down arrow)
      1. Launch NVDA and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="listbox"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • summary: navigate forward to the combobox
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. issue command
        • summary: type "nebr"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and listbox should display
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. issue command
        • summary: navigate into the listbox
        • Using the command: "Down arrow" (select next option)
        • Observe: the listbox role and name should be conveyed
        • Ensure AT location after executing the command
          • Target: `*[role="listbox"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      8. is the expectation met?
    • Output: "states, list, nebraska, 1 of 6"
NVDAEdgeyes
  • Result: (pass)
    • Test Case: Navigate into listbox from the combobox input using select next option (Down arrow)
      1. Launch NVDA and Edge.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="listbox"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • summary: navigate forward to the combobox
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. issue command
        • summary: type "nebr"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and listbox should display
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. issue command
        • summary: navigate into the listbox
        • Using the command: "Down arrow" (select next option)
        • Observe: the listbox role and name should be conveyed
        • Ensure AT location after executing the command
          • Target: `*[role="listbox"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      8. is the expectation met?
    • Output: "states, list, nebraska, 1 of 6"
NVDAFirefoxyes
  • Result: (pass)
    • Test Case: Navigate into listbox from the combobox input using select next option (Down arrow)
      1. Launch NVDA and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="listbox"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • summary: navigate forward to the combobox
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. issue command
        • summary: type "nebr"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and listbox should display
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. issue command
        • summary: navigate into the listbox
        • Using the command: "Down arrow" (select next option)
        • Observe: the listbox role and name should be conveyed
        • Ensure AT location after executing the command
          • Target: `*[role="listbox"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      8. is the expectation met?
    • Output: "states list, nebraska, 1 of 6"
OrcaFirefoxyes
  • Result: (pass)
    • Test Case: Navigate into listbox from the combobox input using select next option (Down arrow)
      1. Launch Orca and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="listbox"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • summary: navigate forward to the combobox
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. issue command
        • summary: type "nebr"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and listbox should display
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. issue command
        • summary: navigate into the listbox
        • Using the command: "Down arrow" (select next option)
        • Observe: the listbox role and name should be conveyed
        • Ensure AT location after executing the command
          • Target: `*[role="listbox"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      8. is the expectation met?
    • Output: "states list with 6 items, nebraska"
TalkBackChromenone
  • Result: (fail)
    • Test Case: Navigate into listbox from the combobox input using Select next option (Swipe right)
      1. Launch TalkBack and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="listbox"]
        • If multiple elements match the selector, repeat this test for all instances. 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 command
        • summary: navigate forward to the combobox
        • Using the command: "Swipe right (or alt+right arrow)" (Read next item)
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • virtual cursor location: target
      5. issue command
        • summary: type "nebr"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and listbox should display
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • virtual cursor location: target
      6. issue command
        • summary: navigate into the listbox
        • Using the command: "Swipe right" (Select next option)
        • Observe: the listbox role and name should be conveyed
        • Ensure AT location after executing the command
          • Target: `*[role="listbox"]`
          • virtual cursor location: within target
      7. is the expectation met?
    • Output: "states, list box" (swipe right again) "end of example, splitter"
    • Grading note: This command may be expected to fail. This result simply indicates that it did not yield support.
Grading Note: There is no known/documented support. There may still be support for this expectation, but it is undocumented. If this is the case, please report this issue.
Voice Access (Android)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. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="option"]
        • If multiple elements match the selector, repeat this test for all instances. 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: option was activated
    • Command Notes: said "tap alaska"
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. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="option"]
        • If multiple elements match the selector, repeat this test for all instances. 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: names were listed for options
    • Command Notes: said "show names"
Voice Control (MacOS)Safarinone
  • Result: (fail)
    • Test Case: Use "Click <text>" (Activate item by name)
      1. Launch Voice Control (MacOS) and Safari.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="option"]
        • If multiple elements match the selector, repeat this test for all instances. 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: option was not activated
    • Command Notes: said "click alaska"
    • Grading note: This command may be expected to fail. This result simply indicates that it did not yield support.
Grading Note: There is no known/documented support. There may still be support for this expectation, but it is undocumented. If this is the case, please report this issue.
VoiceOver (iOS)Safariyes
  • Result: (pass)
    • Test Case: Navigate into listbox from the combobox input using select next option (Swipe down)
      1. Launch VoiceOver (iOS) and Safari.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="listbox"]
        • If multiple elements match the selector, repeat this test for all instances. 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 command
        • summary: navigate forward to the combobox
        • Using the command: "Swipe Right" (Next item)
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • virtual cursor location: target
      5. issue command
        • summary: type "nebr"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and listbox should display
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • virtual cursor location: target
      6. issue command
        • summary: navigate into the listbox
        • Using the command: "Swipe down" (select next option)
        • Observe: the listbox role and name should be conveyed
        • Ensure AT location after executing the command
          • Target: `*[role="listbox"]`
          • virtual cursor location: within target
      7. is the expectation met?
    • Output: "states, nebraska, list start"
VoiceOver (macOS)Safarinone
  • Result: (fail)
    • Test Case: Navigate into listbox from the combobox input using select next option (Down arrow)
      1. Launch VoiceOver (macOS) and Safari.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="listbox"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • summary: navigate forward to the combobox
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. issue command
        • summary: type "nebr"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and listbox should display
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. issue command
        • summary: navigate into the listbox
        • Using the command: "Down arrow" (select next option)
        • Observe: the listbox role and name should be conveyed
        • Ensure AT location after executing the command
          • Target: `*[role="listbox"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      8. is the expectation met?
    • Output: nothing was conveyed
    • Grading note: This command may be expected to fail. This result simply indicates that it did not yield support.
Grading Note: There is no known/documented support. There may still be support for this expectation, but it is undocumented. If this is the case, please report this issue.
Windows Speech RecognitionEdgeyes
  • 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. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="option"]
        • If multiple elements match the selector, repeat this test for all instances. 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: role was activated
    • Command Notes: said "click alaska"
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. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="option"]
        • If multiple elements match the selector, repeat this test for all instances. 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: role was activated
    • Command Notes: said "click alaska"
Windows Voice AccessEdgeyes
  • Result: (pass)
    • Test Case: Use "Click <text>" (Activate item by name)
      1. Launch Windows Voice Access and Edge.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="option"]
        • If multiple elements match the selector, repeat this test for all instances. 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: role was activated
    • Command Notes: said "click alaska"
Windows Voice AccessChromeyes
  • Result: (pass)
    • Test Case: Use "Click <text>" (Activate item by name)
      1. Launch Windows Voice Access and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="option"]
        • If multiple elements match the selector, repeat this test for all instances. 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: role was activated
    • Command Notes: said "click alaska"
Windows KeyboardChromenot applicable-
Windows KeyboardFirefoxnot applicable-
Windows KeyboardEdgenot applicable-
Mac KeyboardChromenot applicable-
Mac KeyboardSafarinot applicable-
iOS KeyboardSafarinot applicable-
Android KeyboardChromenot applicable-

Extended Support for: option role: convey its name

These are less common combinations

ATBrowserHas SupportOutput
Dragon Naturally SpeakingIEunknown-
Dragon Naturally SpeakingFirefoxunknown-
JAWS 2021.2011.16IE 11not applicable
  • Result: (na)
    • Test Case: Navigate into listbox from the combobox input using select next option (Down arrow)
      1. Launch JAWS and IE.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="listbox"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • summary: navigate forward to the combobox
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. issue command
        • summary: type "nebr"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and listbox should display
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. issue command
        • summary: navigate into the listbox
        • Using the command: "Down arrow" (select next option)
        • Observe: the listbox role and name should be conveyed
        • Ensure AT location after executing the command
          • Target: `*[role="listbox"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      8. is the expectation met?
    • Output:
    • Command Notes: example does not support IE; can't test dynamic functionality
NarratorFirefoxunknown-
NarratorChromeunknown-
NarratorIEunknown-
NVDAIEunknown-
TalkBackFirefoxunknown-
Voice Access (Android)Firefoxunknown-
VoiceOver (iOS)Chromeunknown-
VoiceOver (macOS)Chromeunknown-
VoiceOver (macOS)Firefoxunknown-
OrcaChromeunknown-
Voice Control (MacOS)Chromeunknown-
Voice Control (MacOS)Firefoxunknown-
Mac KeyboardFirefoxnot applicable-
Android KeyboardFirefoxnot applicable-
Back to top

Expectation for the option role: convey its role

This expectation is from the option role feature.

Rationale:

A screen reader user needs to know how they can interact with the element. Voice control software might use the role to help users activate controls that do not have a visible name.

Strength of this expectation for different types of assistive technologies:

  • Screen Readers: MUST
  • Voice Control: MUST

Examples:

  • A screen reader might announce "option" as the role.
  • A screen reader might not announce a role because the role is implied by the role of a listbox parent.
  • Voice control software will let the user say something like "move down <n>" or "move up <n>" to select an option.

Grading method:

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

ATBrowserHas SupportOutput
Dragon Naturally SpeakingChromenot applicable
  • Result: (na)
    • Test Case: Use Click <role> (Click Type)
      1. Launch Dragon Naturally Speaking and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="option"]
        • If multiple elements match the selector, repeat this test for all instances. 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 <role> (Click Type)
      5. Record results for the relevant expectations
    • Output:
    • Command Notes: na because there is not a specific command for the option role
JAWSChromeyes
  • Result: (pass)
    • Test Case: Navigate into listbox from the combobox input using select next option (Down arrow)
      1. Launch JAWS and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="listbox"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • summary: navigate forward to the combobox
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. issue command
        • summary: type "nebr"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and listbox should display
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. issue command
        • summary: navigate into the listbox
        • Using the command: "Down arrow" (select next option)
        • Observe: the listbox role and name should be conveyed
        • Ensure AT location after executing the command
          • Target: `*[role="listbox"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      8. is the expectation met?
    • Output: "states list with 6 items, nebraska, 1 of 6, to move to an item press the arrow keys"
    • Result Notes: implied by listbox context
JAWSEdgeyes
  • Result: (pass)
    • Test Case: Navigate into listbox from the combobox input using select next option (Down arrow)
      1. Launch JAWS and Edge.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="listbox"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • summary: navigate forward to the combobox
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. issue command
        • summary: type "nebr"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and listbox should display
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. issue command
        • summary: navigate into the listbox
        • Using the command: "Down arrow" (select next option)
        • Observe: the listbox role and name should be conveyed
        • Ensure AT location after executing the command
          • Target: `*[role="listbox"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      8. is the expectation met?
    • Output: "states list with 6 items, nebraska, 1 of 6, to move to an item press the arrow keys"
    • Result Notes: implied by listbox context
JAWSFirefoxyes
  • Result: (pass)
    • Test Case: Navigate into listbox from the combobox input using select next option (Down arrow)
      1. Launch JAWS and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="listbox"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • summary: navigate forward to the combobox
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. issue command
        • summary: type "nebr"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and listbox should display
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. issue command
        • summary: navigate into the listbox
        • Using the command: "Down arrow" (select next option)
        • Observe: the listbox role and name should be conveyed
        • Ensure AT location after executing the command
          • Target: `*[role="listbox"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      8. is the expectation met?
    • Output: "states list with 6 items, nebraska, 1 of 6, to move to an item press the arrow keys"
    • Result Notes: implied by listbox context
NarratorEdgenone
  • Result: (fail)
    • Test Case: Navigate into listbox from the combobox input using select next option (Down arrow)
      1. Launch Narrator and Edge.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="listbox"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • summary: navigate forward to the combobox
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. issue command
        • summary: type "nebr"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and listbox should display
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. issue command
        • summary: navigate into the listbox
        • Using the command: "Down arrow" (select next option)
        • Observe: the listbox role and name should be conveyed
        • Ensure AT location after executing the command
          • Target: `*[role="listbox"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      8. is the expectation met?
    • Output: "scan, states, nebraska, 1 of 6, selected"
    • Result Notes: not implied by listbox context since the listbox role is not conveyed. Could be an option or a grid cell.
    • Grading note: This command may be expected to fail. This result simply indicates that it did not yield support.
Grading Note: There is no known/documented support. There may still be support for this expectation, but it is undocumented. If this is the case, please report this issue.
NVDAChromeyes
  • Result: (pass)
    • Test Case: Navigate into listbox from the combobox input using select next option (Down arrow)
      1. Launch NVDA and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="listbox"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • summary: navigate forward to the combobox
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. issue command
        • summary: type "nebr"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and listbox should display
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. issue command
        • summary: navigate into the listbox
        • Using the command: "Down arrow" (select next option)
        • Observe: the listbox role and name should be conveyed
        • Ensure AT location after executing the command
          • Target: `*[role="listbox"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      8. is the expectation met?
    • Output: "states, list, nebraska, 1 of 6"
    • Result Notes: implied by listbox context
NVDAEdgeyes
  • Result: (pass)
    • Test Case: Navigate into listbox from the combobox input using select next option (Down arrow)
      1. Launch NVDA and Edge.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="listbox"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • summary: navigate forward to the combobox
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. issue command
        • summary: type "nebr"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and listbox should display
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. issue command
        • summary: navigate into the listbox
        • Using the command: "Down arrow" (select next option)
        • Observe: the listbox role and name should be conveyed
        • Ensure AT location after executing the command
          • Target: `*[role="listbox"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      8. is the expectation met?
    • Output: "states, list, nebraska, 1 of 6"
    • Result Notes: implied by listbox context
NVDAFirefoxyes
  • Result: (pass)
    • Test Case: Navigate into listbox from the combobox input using select next option (Down arrow)
      1. Launch NVDA and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="listbox"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • summary: navigate forward to the combobox
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. issue command
        • summary: type "nebr"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and listbox should display
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. issue command
        • summary: navigate into the listbox
        • Using the command: "Down arrow" (select next option)
        • Observe: the listbox role and name should be conveyed
        • Ensure AT location after executing the command
          • Target: `*[role="listbox"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      8. is the expectation met?
    • Output: "states list, nebraska, 1 of 6"
    • Result Notes: implied by listbox context
OrcaFirefoxyes
  • Result: (pass)
    • Test Case: Navigate into listbox from the combobox input using select next option (Down arrow)
      1. Launch Orca and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="listbox"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • summary: navigate forward to the combobox
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. issue command
        • summary: type "nebr"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and listbox should display
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. issue command
        • summary: navigate into the listbox
        • Using the command: "Down arrow" (select next option)
        • Observe: the listbox role and name should be conveyed
        • Ensure AT location after executing the command
          • Target: `*[role="listbox"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      8. is the expectation met?
    • Output: "states list with 6 items, nebraska"
    • Result Notes: implied by listbox context
TalkBackChromenone
  • Result: (fail)
    • Test Case: Navigate into listbox from the combobox input using Select next option (Swipe right)
      1. Launch TalkBack and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="listbox"]
        • If multiple elements match the selector, repeat this test for all instances. 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 command
        • summary: navigate forward to the combobox
        • Using the command: "Swipe right (or alt+right arrow)" (Read next item)
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • virtual cursor location: target
      5. issue command
        • summary: type "nebr"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and listbox should display
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • virtual cursor location: target
      6. issue command
        • summary: navigate into the listbox
        • Using the command: "Swipe right" (Select next option)
        • Observe: the listbox role and name should be conveyed
        • Ensure AT location after executing the command
          • Target: `*[role="listbox"]`
          • virtual cursor location: within target
      7. is the expectation met?
    • Output: "states, list box" (swipe right again) "end of example, splitter"
    • Grading note: This command may be expected to fail. This result simply indicates that it did not yield support.
Grading Note: There is no known/documented support. There may still be support for this expectation, but it is undocumented. If this is the case, please report this issue.
Voice Access (Android)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. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="option"]
        • If multiple elements match the selector, repeat this test for all instances. 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: options were flagged with a number
    • Command Notes: said "show numbers"
Voice Control (iOS)Safarinot applicable-
Voice Control (MacOS)Safarinone
  • Result: (fail)
    • Test Case: Use "Show numbers" (Turn on the numbers overlay)
      1. Launch Voice Control (MacOS) and Safari.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="option"]
        • If multiple elements match the selector, repeat this test for all instances. 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 not flagged with a number
    • Command Notes: said "show numbers"
    • Grading note: This command may be expected to fail. This result simply indicates that it did not yield support.
Grading Note: There is no known/documented support. There may still be support for this expectation, but it is undocumented. If this is the case, please report this issue.
VoiceOver (iOS)Safariyes
  • Result: (pass)
    • Test Case: Navigate into listbox from the combobox input using select next option (Swipe down)
      1. Launch VoiceOver (iOS) and Safari.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="listbox"]
        • If multiple elements match the selector, repeat this test for all instances. 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 command
        • summary: navigate forward to the combobox
        • Using the command: "Swipe Right" (Next item)
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • virtual cursor location: target
      5. issue command
        • summary: type "nebr"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and listbox should display
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • virtual cursor location: target
      6. issue command
        • summary: navigate into the listbox
        • Using the command: "Swipe down" (select next option)
        • Observe: the listbox role and name should be conveyed
        • Ensure AT location after executing the command
          • Target: `*[role="listbox"]`
          • virtual cursor location: within target
      7. is the expectation met?
    • Output: "states, nebraska, list start"
    • Result Notes: implied by listbox context
VoiceOver (macOS)Safarinone
  • Result: (fail)
    • Test Case: Navigate into listbox from the combobox input using select next option (Down arrow)
      1. Launch VoiceOver (macOS) and Safari.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="listbox"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • summary: navigate forward to the combobox
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. issue command
        • summary: type "nebr"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and listbox should display
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. issue command
        • summary: navigate into the listbox
        • Using the command: "Down arrow" (select next option)
        • Observe: the listbox role and name should be conveyed
        • Ensure AT location after executing the command
          • Target: `*[role="listbox"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      8. is the expectation met?
    • Output: nothing was conveyed
    • Grading note: This command may be expected to fail. This result simply indicates that it did not yield support.
Grading Note: There is no known/documented support. There may still be support for this expectation, but it is undocumented. If this is the case, please report this issue.
Windows Speech RecognitionEdgeyes
  • 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. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="option"]
        • If multiple elements match the selector, repeat this test for all instances. 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"
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. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="option"]
        • If multiple elements match the selector, repeat this test for all instances. 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"
Windows Voice AccessEdgeyes
  • Result: (pass)
    • Test Case: Use "Show numbers" (Turn on the numbers overlay)
      1. Launch Windows Voice Access and Edge.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="option"]
        • If multiple elements match the selector, repeat this test for all instances. 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"
Windows Voice AccessChromeyes
  • Result: (pass)
    • Test Case: Use "Show numbers" (Turn on the numbers overlay)
      1. Launch Windows Voice Access and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="option"]
        • If multiple elements match the selector, repeat this test for all instances. 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"
Windows KeyboardChromenot applicable-
Windows KeyboardFirefoxnot applicable-
Windows KeyboardEdgenot applicable-
Mac KeyboardChromenot applicable-
Mac KeyboardSafarinot applicable-
iOS KeyboardSafarinot applicable-
Android KeyboardChromenot applicable-

Extended Support for: option role: convey its role

These are less common combinations

ATBrowserHas SupportOutput
Dragon Naturally SpeakingIEunknown-
Dragon Naturally SpeakingFirefoxunknown-
JAWS 2021.2011.16IE 11not applicable
  • Result: (na)
    • Test Case: Navigate into listbox from the combobox input using select next option (Down arrow)
      1. Launch JAWS and IE.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="listbox"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • summary: navigate forward to the combobox
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. issue command
        • summary: type "nebr"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and listbox should display
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. issue command
        • summary: navigate into the listbox
        • Using the command: "Down arrow" (select next option)
        • Observe: the listbox role and name should be conveyed
        • Ensure AT location after executing the command
          • Target: `*[role="listbox"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      8. is the expectation met?
    • Output:
    • Command Notes: example does not support IE; can't test dynamic functionality
NarratorFirefoxunknown-
NarratorChromeunknown-
NarratorIEunknown-
NVDAIEunknown-
TalkBackFirefoxunknown-
Voice Access (Android)Firefoxunknown-
VoiceOver (iOS)Chromeunknown-
VoiceOver (macOS)Chromeunknown-
VoiceOver (macOS)Firefoxunknown-
OrcaChromeunknown-
Voice Control (MacOS)Chromeunknown-
Voice Control (MacOS)Firefoxunknown-
Mac KeyboardFirefoxnot applicable-
Android KeyboardFirefoxnot applicable-
Back to top

Expectation for the option role: convey information about the position the option in the list

This expectation is from the option role feature.

Rationale:

users should be able to determine how many options are in the list and where they are in the list

Strength of this expectation for different types of assistive technologies:

  • Screen Readers: MAY
  • Voice Control: NA

Examples:

  • A screen reader might announce "choose <2 of 10>" when navigating through a list of options

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: Navigate into listbox from the combobox input using select next option (Down arrow)
      1. Launch JAWS and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="listbox"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • summary: navigate forward to the combobox
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. issue command
        • summary: type "nebr"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and listbox should display
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. issue command
        • summary: navigate into the listbox
        • Using the command: "Down arrow" (select next option)
        • Observe: the listbox role and name should be conveyed
        • Ensure AT location after executing the command
          • Target: `*[role="listbox"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      8. is the expectation met?
    • Output: "states list with 6 items, nebraska, 1 of 6, to move to an item press the arrow keys"
JAWSEdgeyes
  • Result: (pass)
    • Test Case: Navigate into listbox from the combobox input using select next option (Down arrow)
      1. Launch JAWS and Edge.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="listbox"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • summary: navigate forward to the combobox
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. issue command
        • summary: type "nebr"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and listbox should display
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. issue command
        • summary: navigate into the listbox
        • Using the command: "Down arrow" (select next option)
        • Observe: the listbox role and name should be conveyed
        • Ensure AT location after executing the command
          • Target: `*[role="listbox"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      8. is the expectation met?
    • Output: "states list with 6 items, nebraska, 1 of 6, to move to an item press the arrow keys"
JAWSFirefoxyes
  • Result: (pass)
    • Test Case: Navigate into listbox from the combobox input using select next option (Down arrow)
      1. Launch JAWS and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="listbox"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • summary: navigate forward to the combobox
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. issue command
        • summary: type "nebr"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and listbox should display
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. issue command
        • summary: navigate into the listbox
        • Using the command: "Down arrow" (select next option)
        • Observe: the listbox role and name should be conveyed
        • Ensure AT location after executing the command
          • Target: `*[role="listbox"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      8. is the expectation met?
    • Output: "states list with 6 items, nebraska, 1 of 6, to move to an item press the arrow keys"
NarratorEdgeyes
  • Result: (pass)
    • Test Case: Navigate into listbox from the combobox input using select next option (Down arrow)
      1. Launch Narrator and Edge.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="listbox"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • summary: navigate forward to the combobox
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. issue command
        • summary: type "nebr"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and listbox should display
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. issue command
        • summary: navigate into the listbox
        • Using the command: "Down arrow" (select next option)
        • Observe: the listbox role and name should be conveyed
        • Ensure AT location after executing the command
          • Target: `*[role="listbox"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      8. is the expectation met?
    • Output: "scan, states, nebraska, 1 of 6, selected"
NVDAChromeyes
  • Result: (pass)
    • Test Case: Navigate into listbox from the combobox input using select next option (Down arrow)
      1. Launch NVDA and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="listbox"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • summary: navigate forward to the combobox
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. issue command
        • summary: type "nebr"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and listbox should display
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. issue command
        • summary: navigate into the listbox
        • Using the command: "Down arrow" (select next option)
        • Observe: the listbox role and name should be conveyed
        • Ensure AT location after executing the command
          • Target: `*[role="listbox"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      8. is the expectation met?
    • Output: "states, list, nebraska, 1 of 6"
NVDAEdgeyes
  • Result: (pass)
    • Test Case: Navigate into listbox from the combobox input using select next option (Down arrow)
      1. Launch NVDA and Edge.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="listbox"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • summary: navigate forward to the combobox
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. issue command
        • summary: type "nebr"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and listbox should display
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. issue command
        • summary: navigate into the listbox
        • Using the command: "Down arrow" (select next option)
        • Observe: the listbox role and name should be conveyed
        • Ensure AT location after executing the command
          • Target: `*[role="listbox"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      8. is the expectation met?
    • Output: "states, list, nebraska, 1 of 6"
NVDAFirefoxyes
  • Result: (pass)
    • Test Case: Navigate into listbox from the combobox input using select next option (Down arrow)
      1. Launch NVDA and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="listbox"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • summary: navigate forward to the combobox
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. issue command
        • summary: type "nebr"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and listbox should display
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. issue command
        • summary: navigate into the listbox
        • Using the command: "Down arrow" (select next option)
        • Observe: the listbox role and name should be conveyed
        • Ensure AT location after executing the command
          • Target: `*[role="listbox"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      8. is the expectation met?
    • Output: "states list, nebraska, 1 of 6"
OrcaFirefoxnone
  • Result: (fail)
    • Test Case: Navigate into listbox from the combobox input using select next option (Down arrow)
      1. Launch Orca and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="listbox"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • summary: navigate forward to the combobox
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. issue command
        • summary: type "nebr"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and listbox should display
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. issue command
        • summary: navigate into the listbox
        • Using the command: "Down arrow" (select next option)
        • Observe: the listbox role and name should be conveyed
        • Ensure AT location after executing the command
          • Target: `*[role="listbox"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      8. is the expectation met?
    • Output: "states list with 6 items, nebraska"
    • Grading note: This command may be expected to fail. This result simply indicates that it did not yield support.
Grading Note: There is no known/documented support. There may still be support for this expectation, but it is undocumented. If this is the case, please report this issue.
TalkBackChromenone
  • Result: (fail)
    • Test Case: Navigate into listbox from the combobox input using Select next option (Swipe right)
      1. Launch TalkBack and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="listbox"]
        • If multiple elements match the selector, repeat this test for all instances. 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 command
        • summary: navigate forward to the combobox
        • Using the command: "Swipe right (or alt+right arrow)" (Read next item)
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • virtual cursor location: target
      5. issue command
        • summary: type "nebr"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and listbox should display
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • virtual cursor location: target
      6. issue command
        • summary: navigate into the listbox
        • Using the command: "Swipe right" (Select next option)
        • Observe: the listbox role and name should be conveyed
        • Ensure AT location after executing the command
          • Target: `*[role="listbox"]`
          • virtual cursor location: within target
      7. is the expectation met?
    • Output: "states, list box" (swipe right again) "end of example, splitter"
    • Grading note: This command may be expected to fail. This result simply indicates that it did not yield support.
Grading Note: There is no known/documented support. There may still be support for this expectation, but it is undocumented. If this is the case, please report this issue.
Voice Access (Android)Chromenot applicable-
Voice Control (iOS)Safarinot applicable-
Voice Control (MacOS)Safarinot applicable-
VoiceOver (iOS)Safarinone
  • Result: (fail)
    • Test Case: Navigate into listbox from the combobox input using select next option (Swipe down)
      1. Launch VoiceOver (iOS) and Safari.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="listbox"]
        • If multiple elements match the selector, repeat this test for all instances. 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 command
        • summary: navigate forward to the combobox
        • Using the command: "Swipe Right" (Next item)
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • virtual cursor location: target
      5. issue command
        • summary: type "nebr"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and listbox should display
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • virtual cursor location: target
      6. issue command
        • summary: navigate into the listbox
        • Using the command: "Swipe down" (select next option)
        • Observe: the listbox role and name should be conveyed
        • Ensure AT location after executing the command
          • Target: `*[role="listbox"]`
          • virtual cursor location: within target
      7. is the expectation met?
    • Output: "states, nebraska, list start"
    • Grading note: This command may be expected to fail. This result simply indicates that it did not yield support.
Grading Note: There is no known/documented support. There may still be support for this expectation, but it is undocumented. If this is the case, please report this issue.
VoiceOver (macOS)Safarinone
  • Result: (fail)
    • Test Case: Navigate into listbox from the combobox input using select next option (Down arrow)
      1. Launch VoiceOver (macOS) and Safari.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="listbox"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • summary: navigate forward to the combobox
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. issue command
        • summary: type "nebr"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and listbox should display
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. issue command
        • summary: navigate into the listbox
        • Using the command: "Down arrow" (select next option)
        • Observe: the listbox role and name should be conveyed
        • Ensure AT location after executing the command
          • Target: `*[role="listbox"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      8. is the expectation met?
    • Output: nothing was conveyed
    • Grading note: This command may be expected to fail. This result simply indicates that it did not yield support.
Grading Note: There is no known/documented support. There may still be support for this expectation, but it is undocumented. If this is the case, please report this issue.
Windows Speech RecognitionEdgenot applicable-
Windows Speech RecognitionChromenot applicable-
Windows Voice AccessEdgenot applicable-
Windows Voice AccessChromenot applicable-
Windows KeyboardChromenot applicable-
Windows KeyboardFirefoxnot applicable-
Windows KeyboardEdgenot applicable-
Mac KeyboardChromenot applicable-
Mac KeyboardSafarinot applicable-
iOS KeyboardSafarinot applicable-
Android KeyboardChromenot applicable-

Extended Support for: option role: convey information about the position the option in the list

These are less common combinations

ATBrowserHas SupportOutput
Dragon Naturally SpeakingIEnot applicable-
Dragon Naturally SpeakingFirefoxnot applicable-
JAWS 2021.2011.16IE 11not applicable
  • Result: (na)
    • Test Case: Navigate into listbox from the combobox input using select next option (Down arrow)
      1. Launch JAWS and IE.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:*[role="listbox"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • summary: navigate forward to the combobox
        • Using the command: "Tab" (Read next focusable item)
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. issue command
        • summary: type "nebr"
        • Using the command: "<enter text>" (enter text)
        • Observe: the combo box should expand and listbox should display
        • Ensure AT location after executing the command
          • Target: `[role="combobox"]`
          • keyboard focus location: target
          • virtual cursor location: target
      7. issue command
        • summary: navigate into the listbox
        • Using the command: "Down arrow" (select next option)
        • Observe: the listbox role and name should be conveyed
        • Ensure AT location after executing the command
          • Target: `*[role="listbox"]`
          • keyboard focus location: within target
          • virtual cursor location: within target
      8. is the expectation met?
    • Output:
    • Command Notes: example does not support IE; can't test dynamic functionality
NarratorFirefoxunknown-
NarratorChromeunknown-
NarratorIEunknown-
NVDAIEunknown-
TalkBackFirefoxunknown-
Voice Access (Android)Firefoxnot applicable-
VoiceOver (iOS)Chromeunknown-
VoiceOver (macOS)Chromeunknown-
VoiceOver (macOS)Firefoxunknown-
OrcaChromeunknown-
Voice Control (MacOS)Chromenot applicable-
Voice Control (MacOS)Firefoxnot applicable-
Mac KeyboardFirefoxnot applicable-
Android KeyboardFirefoxnot applicable-
Back to top

Expectation for the button element: convey its name

This expectation is from the button element feature.

Rationale:

A screen reader user needs to know what to enter.

Strength of this expectation for different types of assistive technologies:

  • Screen Readers: MUST
  • Voice Control: MUST

Examples:

  • A screen reader might announce the button as something like "<name>, button".
  • Voice control software will let the user say something like "click <name>" to activate the control.

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. Find the target element(s) that you will test against. Identify all elements that match this selector:button[tabindex=-1]
        • If multiple elements match the selector, repeat this test for all instances. 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: button was activated
    • Command Notes: said "click states"
JAWSChromeyes
  • Result: (pass)
    • Test Case: navigate forward to the button for the collapsed combobox without a value using Next button (b)
      1. Launch JAWS and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:button[aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `button[aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "states button collapsed"
JAWSEdgeyes
  • Result: (pass)
    • Test Case: navigate forward to the button for the collapsed combobox without a value using Next button (b)
      1. Launch JAWS and Edge.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:button[aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `button[aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "states button collapsed"
JAWSFirefoxyes
  • Result: (pass)
    • Test Case: navigate forward to the button for the collapsed combobox without a value using Next button (b)
      1. Launch JAWS and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:button[aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `button[aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "states button collapsed"
NarratorEdgeyes
  • Result: (pass)
    • Test Case: navigate forward to the button for the collapsed combobox without a value using Next button (b)
      1. Launch Narrator and Edge.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:button[aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `button[aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "states button collapsed"
NVDAChromeyes
  • Result: (pass)
    • Test Case: navigate forward to the button for the collapsed combobox without a value using Next button (b)
      1. Launch NVDA and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:button[aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `button[aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "states button collapsed"
NVDAEdgeyes
  • Result: (pass)
    • Test Case: navigate forward to the button for the collapsed combobox without a value using Next button (b)
      1. Launch NVDA and Edge.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:button[aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `button[aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "states button collapsed"
NVDAFirefoxyes
  • Result: (pass)
    • Test Case: navigate forward to the button for the collapsed combobox without a value using Next button (b)
      1. Launch NVDA and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:button[aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `button[aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "states button collapsed"
OrcaFirefoxyes
  • Result: (pass)
    • Test Case: navigate forward to the button for the collapsed combobox without a value using Next button (b)
      1. Launch Orca and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:button[aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `button[aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "states, collapsed, push button"
TalkBackChromeyes
  • Result: (pass)
    • Test Case: navigate forward to the button for the collapsed combobox without a value using Read next item (Swipe right (or alt+right arrow))
      1. Launch TalkBack and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:button[aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. 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 command
        • Using the command: "Swipe right (or alt+right arrow)" (Read next item)
        • Ensure AT location after executing the command
          • Target: `button[aria-expanded="false"]`
          • virtual cursor location: target
      5. is the expectation met?
    • Output: "collapsed, states, button"
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. Find the target element(s) that you will test against. Identify all elements that match this selector:button[tabindex=-1]
        • If multiple elements match the selector, repeat this test for all instances. 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: button was activated
    • Command Notes: said "tap states"
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. Find the target element(s) that you will test against. Identify all elements that match this selector:button[tabindex=-1]
        • If multiple elements match the selector, repeat this test for all instances. 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: button was activated
    • Command Notes: said "tap states"
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. Find the target element(s) that you will test against. Identify all elements that match this selector:button[tabindex=-1]
        • If multiple elements match the selector, repeat this test for all instances. 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: button was activated
    • Command Notes: said "tap states"
VoiceOver (iOS)Safariyes
  • Result: (pass)
    • Test Case: navigate forward to the button for the collapsed combobox without a value using Next item (Swipe Right)
      1. Launch VoiceOver (iOS) and Safari.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:button[aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. 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 command
        • Using the command: "Swipe Right" (Next item)
        • Ensure AT location after executing the command
          • Target: `button[aria-expanded="false"]`
          • virtual cursor location: target
      5. is the expectation met?
    • Output: "states, button collapsed, double tap to expand"
VoiceOver (macOS)Safariyes
  • Result: (pass)
    • Test Case: navigate forward to the button for the collapsed combobox without a value using Read next item (VO + Right arrow)
      1. Launch VoiceOver (macOS) and Safari.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:button[aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • Using the command: "VO + Right arrow" (Read next item)
        • Ensure AT location after executing the command
          • Target: `button[aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "states button collapsed"
Windows Speech RecognitionEdgeyes
  • 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. Find the target element(s) that you will test against. Identify all elements that match this selector:button[tabindex=-1]
        • If multiple elements match the selector, repeat this test for all instances. 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: button was activated
    • Command Notes: said "click states"
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. Find the target element(s) that you will test against. Identify all elements that match this selector:button[tabindex=-1]
        • If multiple elements match the selector, repeat this test for all instances. 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: button was activated
    • Command Notes: said "click states"
Windows Voice AccessEdgeyes
  • Result: (pass)
    • Test Case: Use "Click <text>" (Activate item by name)
      1. Launch Windows Voice Access and Edge.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:button[tabindex=-1]
        • If multiple elements match the selector, repeat this test for all instances. 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: button was activated
    • Command Notes: said "click states"
Windows Voice AccessChromeyes
  • Result: (pass)
    • Test Case: Use "Click <text>" (Activate item by name)
      1. Launch Windows Voice Access and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:button[tabindex=-1]
        • If multiple elements match the selector, repeat this test for all instances. 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: button was activated
    • Command Notes: said "click states"
Windows KeyboardChromenot applicable-
Windows KeyboardFirefoxnot applicable-
Windows KeyboardEdgenot applicable-
Mac KeyboardChromenot applicable-
Mac KeyboardSafarinot applicable-
iOS KeyboardSafarinot applicable-
Android KeyboardChromenot applicable-

Extended Support for: button element: convey its name

These are less common combinations

ATBrowserHas SupportOutput
Dragon Naturally SpeakingIEunknown-
Dragon Naturally SpeakingFirefoxunknown-
JAWS 2021.2011.16IE 11yes
  • Result: (pass)
    • Test Case: navigate forward to the button for the collapsed combobox without a value using Next button (b)
      1. Launch JAWS and IE.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:button[aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `button[aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "states, button collapsed"
NarratorFirefoxunknown-
NarratorChromeunknown-
NarratorIEunknown-
NVDAIEunknown-
TalkBackFirefoxunknown-
Voice Access (Android)Firefoxunknown-
VoiceOver (iOS)Chromeunknown-
VoiceOver (macOS)Chromeunknown-
VoiceOver (macOS)Firefoxunknown-
OrcaChromeunknown-
Voice Control (MacOS)Chromeunknown-
Voice Control (MacOS)Firefoxunknown-
Mac KeyboardFirefoxnot applicable-
Android KeyboardFirefoxnot applicable-
Back to top

Expectation for the button element: convey its role

This expectation is from the button element feature.

Rationale:

A screen reader user needs to know how they can interact with the element. Voice control software might use the role to help users activate controls that do not have a visible name.

Strength of this expectation for different types of assistive technologies:

  • Screen Readers: MUST
  • Voice Control: MUST

Examples:

  • A screen reader might be announce the role as something like "button".
  • Voice control software will let the user say something like "click button".

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 <role> (Click Type)
      1. Launch Dragon Naturally Speaking and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:button[tabindex=-1]
        • If multiple elements match the selector, repeat this test for all instances. 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 <role> (Click Type)
      5. Record results for the relevant expectations
    • Output: button was flagged
    • Command Notes: said "click button"
JAWSChromeyes
  • Result: (pass)
    • Test Case: navigate forward to the button for the collapsed combobox without a value using Next button (b)
      1. Launch JAWS and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:button[aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `button[aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "states button collapsed"
JAWSEdgeyes
  • Result: (pass)
    • Test Case: navigate forward to the button for the collapsed combobox without a value using Next button (b)
      1. Launch JAWS and Edge.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:button[aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `button[aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "states button collapsed"
JAWSFirefoxyes
  • Result: (pass)
    • Test Case: navigate forward to the button for the collapsed combobox without a value using Next button (b)
      1. Launch JAWS and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:button[aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `button[aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "states button collapsed"
NarratorEdgeyes
  • Result: (pass)
    • Test Case: navigate forward to the button for the collapsed combobox without a value using Next button (b)
      1. Launch Narrator and Edge.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:button[aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `button[aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "states button collapsed"
NVDAChromeyes
  • Result: (pass)
    • Test Case: navigate forward to the button for the collapsed combobox without a value using Next button (b)
      1. Launch NVDA and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:button[aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `button[aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "states button collapsed"
NVDAEdgeyes
  • Result: (pass)
    • Test Case: navigate forward to the button for the collapsed combobox without a value using Next button (b)
      1. Launch NVDA and Edge.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:button[aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `button[aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "states button collapsed"
NVDAFirefoxyes
  • Result: (pass)
    • Test Case: navigate forward to the button for the collapsed combobox without a value using Next button (b)
      1. Launch NVDA and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:button[aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `button[aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "states button collapsed"
OrcaFirefoxyes
  • Result: (pass)
    • Test Case: navigate forward to the button for the collapsed combobox without a value using Next button (b)
      1. Launch Orca and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:button[aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `button[aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "states, collapsed, push button"
TalkBackChromeyes
  • Result: (pass)
    • Test Case: navigate forward to the button for the collapsed combobox without a value using Read next item (Swipe right (or alt+right arrow))
      1. Launch TalkBack and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:button[aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. 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 command
        • Using the command: "Swipe right (or alt+right arrow)" (Read next item)
        • Ensure AT location after executing the command
          • Target: `button[aria-expanded="false"]`
          • virtual cursor location: target
      5. is the expectation met?
    • Output: "collapsed, states, button"
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. Find the target element(s) that you will test against. Identify all elements that match this selector:button[tabindex=-1]
        • If multiple elements match the selector, repeat this test for all instances. 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: button was flagged
    • 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. Find the target element(s) that you will test against. Identify all elements that match this selector:button[tabindex=-1]
        • If multiple elements match the selector, repeat this test for all instances. 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: button was flagged
    • Command Notes: said "show numbers"
VoiceOver (iOS)Safariyes
  • Result: (pass)
    • Test Case: navigate forward to the button for the collapsed combobox without a value using Next item (Swipe Right)
      1. Launch VoiceOver (iOS) and Safari.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:button[aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. 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 command
        • Using the command: "Swipe Right" (Next item)
        • Ensure AT location after executing the command
          • Target: `button[aria-expanded="false"]`
          • virtual cursor location: target
      5. is the expectation met?
    • Output: "states, button collapsed, double tap to expand"
VoiceOver (macOS)Safariyes
  • Result: (pass)
    • Test Case: navigate forward to the button for the collapsed combobox without a value using Read next item (VO + Right arrow)
      1. Launch VoiceOver (macOS) and Safari.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:button[aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • Using the command: "VO + Right arrow" (Read next item)
        • Ensure AT location after executing the command
          • Target: `button[aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "states button collapsed"
Windows Speech RecognitionEdgeyes
  • 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. Find the target element(s) that you will test against. Identify all elements that match this selector:button[tabindex=-1]
        • If multiple elements match the selector, repeat this test for all instances. 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: button was flagged
    • Command Notes: said "show numbers"
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. Find the target element(s) that you will test against. Identify all elements that match this selector:button[tabindex=-1]
        • If multiple elements match the selector, repeat this test for all instances. 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: button was flagged
    • Command Notes: said "show numbers"
Windows Voice AccessEdgeyes
  • Result: (pass)
    • Test Case: Use "Show numbers" (Turn on the numbers overlay)
      1. Launch Windows Voice Access and Edge.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:button[tabindex=-1]
        • If multiple elements match the selector, repeat this test for all instances. 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: button was flagged
    • Command Notes: said "show numbers"
Windows Voice AccessChromeyes
  • Result: (pass)
    • Test Case: Use "Show numbers" (Turn on the numbers overlay)
      1. Launch Windows Voice Access and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:button[tabindex=-1]
        • If multiple elements match the selector, repeat this test for all instances. 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: button was flagged
    • Command Notes: said "show numbers"
Windows KeyboardChromenot applicable-
Windows KeyboardFirefoxnot applicable-
Windows KeyboardEdgenot applicable-
Mac KeyboardChromenot applicable-
Mac KeyboardSafarinot applicable-
iOS KeyboardSafarinot applicable-
Android KeyboardChromenot applicable-

Extended Support for: button element: convey its role

These are less common combinations

ATBrowserHas SupportOutput
Dragon Naturally SpeakingIEunknown-
Dragon Naturally SpeakingFirefoxunknown-
JAWS 2021.2011.16IE 11yes
  • Result: (pass)
    • Test Case: navigate forward to the button for the collapsed combobox without a value using Next button (b)
      1. Launch JAWS and IE.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:button[aria-expanded="false"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. set mode to auto (do not explicitly change the mode)
      5. issue command
        • Using the command: "b" (Next button)
        • Ensure AT location after executing the command
          • Target: `button[aria-expanded="false"]`
          • keyboard focus location: target
          • virtual cursor location: target
      6. is the expectation met?
    • Output: "states, button collapsed"
NarratorFirefoxunknown-
NarratorChromeunknown-
NarratorIEunknown-
NVDAIEunknown-
TalkBackFirefoxunknown-
Voice Access (Android)Firefoxunknown-
VoiceOver (iOS)Chromeunknown-
VoiceOver (macOS)Chromeunknown-
VoiceOver (macOS)Firefoxunknown-
OrcaChromeunknown-
Voice Control (MacOS)Chromeunknown-
Voice Control (MacOS)Firefoxunknown-
Mac KeyboardFirefoxnot applicable-
Android KeyboardFirefoxnot applicable-
Back to top

Dates and Versions of tested combinations

ATAT VersionBrowserBrowser versionOS versionDate tested
Dragon Naturally Speaking16.0Chrome116Windows 11 version 22H22023-08-22
JAWS2023.2307.37Chrome116Windows 11 version 22h22023-08-22
JAWS2023.2307.37Edge115Windows 11 version 22h22023-08-22
JAWS2023.2307.37Firefox116Windows 11 version 22h22023-08-22
NarratorWindows 11 version 22h2Edge115Windows 11 version 22h22023-08-22
NVDA2023.1Chrome116Windows 11 version 22h22023-08-22
NVDA2023.1Edge115Windows 11 version 22h22023-08-22
NVDA2023.1Firefox116Windows 11 version 22h22023-08-22
Orca44.0Firefox115Ubuntu 23.042023-08-22
TalkBack13.5Chrome116132023-08-22
Voice Access (Android)6.1Chrome116132023-08-22
Voice Control (iOS)16.6Safari16.616.62023-08-22
Voice Control (MacOS)13.5Safari16.613.52023-08-22
VoiceOver (iOS)16.6Safari16.616.62023-08-22
VoiceOver (macOS)13.5Safari16.613.52023-08-22
Windows Speech RecognitionWindows 11 version 22H2Edge116Windows 11 version 22H22023-08-22
Windows Speech RecognitionWindows 11 version 22H2Chrome116Windows 11 version 22H22023-08-22
Windows Voice AccessWindows 11 version 22H2Edge116Windows 11 version 22H22023-08-22
Windows Voice AccessWindows 11 version 22H2Chrome116Windows 11 version 22H22023-08-22

History

  • 2020-10-09 Test created
  • 2021-08-07 Added Narrator results for NVDA and JAWS, updated NVDA+Chrome results.
  • 2021-11-10 Updated VoiceOver tests to illustrate a bug where aria-activedescendant is not respected when the combobox input has no value.
  • 2023-08-22 Updated results. Support was largely similar to when it was last tested, except that both VoiceOver for MacOS and Talkback for Android appear to have lost support for options within a listbox.