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

Test: HTML role attribute test suite

Screen Reader support level: partial (19/20)

Voice Control support level: partial (7/8)

On this page

About this test

A test for the HTML role attribute.

Run this test and and submit your results

Age of results

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

Caution

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

Test HTML

open the test page

HTML source is too long to display here.

Summary of Screen Reader support by expectation

* means that some support is hidden behind settings

Summary of Voice Control support by expectation

* means that some support is hidden behind settings

Detailed support results by expectation

Expectation for the role attribute: lose the location of the browsing caret when a container role is changed - applied to the div element

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

This expectation is from the role attribute feature.

Rationale:

If a screen reader user is browsing the contents of a container element and the role of the container changes, the caret should stay in the same location so that the user can continue reading the document in a logical order.

Strength of this expectation for different types of assistive technologies:

  • Screen Readers: SHOULD NOT
  • Voice Control: NA

Grading method:

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

Notes:

When the role of an element changes, some AT and accessibility APIs may remove the element and all children and then replace them with the new container, which may result in the screen reader losing its caret position.

ATBrowserHas SupportOutput
Dragon Naturally SpeakingChromenot applicable-
JAWSChromeyes
  • Result: (pass)
    • Test Case: Use Down arrow (Read next item) to navigate forward to `#test-4`
      1. Launch JAWS and Chrome.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:#test-4
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Down arrow (Read next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "target text"
JAWSIEyes
  • Result: (pass)
    • Test Case: Use Down arrow (Read next item) to navigate forward to `#test-4`
      1. Launch JAWS and IE.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:#test-4
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Down arrow (Read next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "target text"
JAWSFirefoxyes
  • Result: (pass)
    • Test Case: Use Down arrow (Read next item) to navigate forward to `#test-4`
      1. Launch JAWS and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:#test-4
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Down arrow (Read next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "target text"
NarratorEdgeyes
  • Result: (pass)
    • Test Case: Use Down arrow (Read next item (scan mode)) to navigate forward to `#test-4`
      1. Launch Narrator and Edge.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:#test-4
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Down arrow (Read next item (scan mode))
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "target text"
NVDAChromenone
  • Result: (fail)
    • Test Case: Use down arrow (Read next item) to navigate forward to `#test-4`
      1. Launch NVDA and Chrome.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:#test-4
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: down arrow (Read next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "end tests"
    • Result Notes: remaining content in the container was skipped
NVDAFirefoxyes
  • Result: (pass)
    • Test Case: Use down arrow (Read next item) to navigate forward to `#test-4`
      1. Launch NVDA and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:#test-4
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: down arrow (Read next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "test region, target text"
    • Command Notes: region role and name were conveyed as if first entering the region.
OrcaFirefoxyes
  • Result: (pass)
    • Test Case: Use down arrow (Read next item) to navigate forward to `#test-4`
      1. Launch Orca and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:#test-4
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: down arrow (Read next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "target text"
TalkBackChromeyes
  • Result: (pass)
    • Test Case: Use Swipe right (Read next item) to navigate forward to `#test-4`
      1. Launch TalkBack and Chrome.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:#test-4
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Swipe right (Read next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "target text"
Voice Access (Android)Chromenot applicable-
Voice Control (iOS)Safarinot applicable-
Voice Control (MacOS)Safarinot applicable-
VoiceOver (iOS)Safariyes
  • Result: (pass)
    • Test Case: Use Swipe Right (Next item) to navigate forward to `#test-4`
      1. Launch VoiceOver (iOS) and Safari.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:#test-4
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Swipe Right (Next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "target text"
VoiceOver (macOS)Safariyes
  • Result: (pass)
    • Test Case: Use VO + Right arrow (Read next item) to navigate forward to `#test-4`
      1. Launch VoiceOver (macOS) and Safari.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:#test-4
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: VO + Right arrow (Read next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "target text"
Windows Speech RecognitionChromenot applicable-

Extended Support for: role attribute: lose the location of the browsing caret when a container role is changed

These are less common combinations

ATBrowserHas SupportOutput
Dragon Naturally SpeakingIEnot applicable-
Dragon Naturally SpeakingFirefoxnot applicable-
JAWSEdgeunknown-
NarratorFirefoxunknown-
NarratorChromeunknown-
NarratorIEunknown-
NVDAIEunknown-
NVDAEdgeunknown-
TalkBackFirefoxunknown-
Voice Access (Android)Firefoxnot applicable-
VoiceOver (iOS)Chromeunknown-
VoiceOver (macOS)Chromeunknown-
VoiceOver (macOS)Firefoxunknown-
OrcaChromeunknown-
Voice Control (MacOS)Chromenot applicable-
Voice Control (MacOS)Firefoxnot applicable-
Windows Speech RecognitionEdgenot applicable-
Back to top

Expectation for the role attribute: convey the presence of the role attribute - applied to the div element

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

This expectation is from the role attribute feature.

Rationale:

The user needs to know when a role is defined.

Strength of this expectation for different types of assistive technologies:

  • Screen Readers: MUST
  • Voice Control: MUST

Grading method:

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

Notes:

The expectation is that a valid role value is conveyed to end users. This expectation does not check the correctness of the role conveyed, but only that a role is conveyed. Note that roles can be conveyed in a way that is implied by context and that AT have discretion in how to actually convey the role value. For example, some screen readers may convey the actual value of the role, and others may choose to convey a slightly different value. The correctness of role values is tested on a per-value bases elsewhere in this project.

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. Identify all elements that match this selector:#test-1
        • If multiple elements match the target, repeat this test for all instances. 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: target was flagged for disambiguation
    • Command Notes: said "click button"
JAWSChromeyes
  • Result: (pass)
    • Test Case: Use Down arrow (Read next item) to navigate forward to `#test-1`
      1. Launch JAWS and Chrome.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:#test-1
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Down arrow (Read next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "action 1, button"
  • Result: (pass)
    • Test Case: Use Tab (Read next focusable item) to navigate forward to `#test-1`
      1. Launch JAWS and Chrome.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:#test-1
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "action 1, button, to activate press space bar"
JAWSIEyes
  • Result: (pass)
    • Test Case: Use Down arrow (Read next item) to navigate forward to `#test-1`
      1. Launch JAWS and IE.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:#test-1
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Down arrow (Read next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "action 1, button"
  • Result: (pass)
    • Test Case: Use Tab (Read next focusable item) to navigate forward to `#test-1`
      1. Launch JAWS and IE.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:#test-1
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "action 1, button, to activate press space bar"
JAWSFirefoxyes
  • Result: (pass)
    • Test Case: Use Down arrow (Read next item) to navigate forward to `#test-1`
      1. Launch JAWS and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:#test-1
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Down arrow (Read next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "action 1, button"
  • Result: (pass)
    • Test Case: Use Tab (Read next focusable item) to navigate forward to `#test-1`
      1. Launch JAWS and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:#test-1
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "action 1, button, to activate press space bar"
NarratorEdgeyes
  • Result: (pass)
    • Test Case: Use Down arrow (Read next item (scan mode)) to navigate forward to `#test-1`
      1. Launch Narrator and Edge.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:#test-1
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Down arrow (Read next item (scan mode))
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "button, action 1"
  • Result: (pass)
    • Test Case: Use Tab (Read next focusable item) to navigate forward to `#test-1`
      1. Launch Narrator and Edge.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:#test-1
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "action 1, button"
NVDAChromeyes
  • Result: (pass)
    • Test Case: Use down arrow (Read next item) to navigate forward to `#test-1`
      1. Launch NVDA and Chrome.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:#test-1
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: down arrow (Read next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "button, action 1"
  • Result: (pass)
    • Test Case: Use Tab (Read next focusable item) to navigate forward to `#test-1`
      1. Launch NVDA and Chrome.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:#test-1
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "button, action 1"
NVDAFirefoxyes
  • Result: (pass)
    • Test Case: Use down arrow (Read next item) to navigate forward to `#test-1`
      1. Launch NVDA and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:#test-1
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: down arrow (Read next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "button, action 1"
  • Result: (pass)
    • Test Case: Use Tab (Read next focusable item) to navigate forward to `#test-1`
      1. Launch NVDA and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:#test-1
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "action 1, button"
OrcaFirefoxyes
  • Result: (pass)
    • Test Case: Use down arrow (Read next item) to navigate forward to `#test-1`
      1. Launch Orca and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:#test-1
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: down arrow (Read next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "action 1, push button"
  • Result: (pass)
    • Test Case: Use Tab (Read next focusable item) to navigate forward to `#test-1`
      1. Launch Orca and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:#test-1
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "action 1, push button"
TalkBackChromeyes
  • Result: (pass)
    • Test Case: Use Swipe right (Read next item) to navigate forward to `#test-1`
      1. Launch TalkBack and Chrome.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:#test-1
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Swipe right (Read next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "action 1, 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. Identify all elements that match this selector:#test-1
        • If multiple elements match the target, repeat this test for all instances. 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: target 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. Identify all elements that match this selector:#test-1
        • If multiple elements match the target, repeat this test for all instances. 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: target was flagged with a number
    • Command Notes: said "show numbers"
VoiceOver (iOS)Safariyes
  • Result: (pass)
    • Test Case: Use Swipe Right (Next item) to navigate forward to `#test-1`
      1. Launch VoiceOver (iOS) and Safari.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:#test-1
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Swipe Right (Next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "action 1, button"
VoiceOver (macOS)Safariyes
  • Result: (pass)
    • Test Case: Use VO + Right arrow (Read next item) to navigate forward to `#test-1`
      1. Launch VoiceOver (macOS) and Safari.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:#test-1
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: VO + Right arrow (Read next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "action 1, button"
  • Result: (pass)
    • Test Case: Use Tab (Read next focusable item) to navigate forward to `#test-1`
      1. Launch VoiceOver (macOS) and Safari.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:#test-1
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "action 1, button"
Windows Speech RecognitionChromeyes
  • Result: (pass)
    • Test Case: Use "Show numbers" (Turn on the numbers overlay)
      1. Launch Windows Speech Recognition and Chrome.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:#test-1
        • If multiple elements match the target, repeat this test for all instances. 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: target was flagged with a number
    • Command Notes: said "show numbers"

Extended Support for: role attribute: convey the presence of the role attribute

These are less common combinations

ATBrowserHas SupportOutput
Dragon Naturally SpeakingIEunknown-
Dragon Naturally SpeakingFirefoxunknown-
JAWSEdgeunknown-
NarratorFirefoxunknown-
NarratorChromeunknown-
NarratorIEunknown-
NVDAIEunknown-
NVDAEdgeunknown-
TalkBackFirefoxunknown-
Voice Access (Android)Firefoxunknown-
VoiceOver (iOS)Chromeunknown-
VoiceOver (macOS)Chromeunknown-
VoiceOver (macOS)Firefoxunknown-
OrcaChromeunknown-
Voice Control (MacOS)Chromeunknown-
Voice Control (MacOS)Firefoxunknown-
Windows Speech RecognitionEdgeunknown-
Back to top

Expectation for the role attribute: process changes in role values - applied to the div element

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

This expectation is from the role attribute feature.

Rationale:

If the role of an element changes, users need to be able to determine the new role

Strength of this expectation for different types of assistive technologies:

  • Screen Readers: SHOULD
  • Voice Control: SHOULD

Grading method:

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

Notes:

Due to the way that accessibility APIs and caching mechanisms work, this may not be supported. ARIA explicitly forbids authors from changing roles in this way.

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. Identify all elements that match this selector:#test-3
        • If multiple elements match the target, repeat this test for all instances. 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: target was flagged for disambiguation
    • Command Notes: said "click button"
JAWSChromeyes
  • Result: (pass)
    • Test Case: Use Down arrow (Read next item) to navigate forward to `#test-3`
      1. Launch JAWS and Chrome.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:#test-3
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Down arrow (Read next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "action 3, button"
  • Result: (pass)
    • Test Case: Use Tab (Read next focusable item) to navigate forward to `#test-3`
      1. Launch JAWS and Chrome.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:#test-3
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "action 3, button, to activate press space bar"
JAWSIEyes
  • Result: (pass)
    • Test Case: Use Down arrow (Read next item) to navigate forward to `#test-3`
      1. Launch JAWS and IE.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:#test-3
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Down arrow (Read next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "action 3, button"
  • Result: (pass)
    • Test Case: Use Tab (Read next focusable item) to navigate forward to `#test-3`
      1. Launch JAWS and IE.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:#test-3
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "action 3, button, to activate press space bar"
JAWSFirefoxyes
  • Result: (pass)
    • Test Case: Use Down arrow (Read next item) to navigate forward to `#test-3`
      1. Launch JAWS and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:#test-3
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Down arrow (Read next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "action 3, button"
  • Result: (pass)
    • Test Case: Use Tab (Read next focusable item) to navigate forward to `#test-3`
      1. Launch JAWS and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:#test-3
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "action 3, button, to activate press space bar"
NarratorEdgeyes
  • Result: (pass)
    • Test Case: Use Down arrow (Read next item (scan mode)) to navigate forward to `#test-3`
      1. Launch Narrator and Edge.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:#test-3
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Down arrow (Read next item (scan mode))
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "button, action 3"
  • Result: (pass)
    • Test Case: Use Tab (Read next focusable item) to navigate forward to `#test-3`
      1. Launch Narrator and Edge.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:#test-3
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "action 3, button"
NVDAChromeyes
  • Result: (pass)
    • Test Case: Use down arrow (Read next item) to navigate forward to `#test-3`
      1. Launch NVDA and Chrome.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:#test-3
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: down arrow (Read next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "button, action 3"
  • Result: (pass)
    • Test Case: Use Tab (Read next focusable item) to navigate forward to `#test-3`
      1. Launch NVDA and Chrome.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:#test-3
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "action 3, button"
NVDAFirefoxyes
  • Result: (pass)
    • Test Case: Use down arrow (Read next item) to navigate forward to `#test-3`
      1. Launch NVDA and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:#test-3
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: down arrow (Read next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "button, action 3"
  • Result: (pass)
    • Test Case: Use Tab (Read next focusable item) to navigate forward to `#test-3`
      1. Launch NVDA and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:#test-3
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "action 3, button"
OrcaFirefoxyes
  • Result: (pass)
    • Test Case: Use down arrow (Read next item) to navigate forward to `#test-3`
      1. Launch Orca and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:#test-3
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: down arrow (Read next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "action 3, push button"
  • Result: (pass)
    • Test Case: Use Tab (Read next focusable item) to navigate forward to `#test-3`
      1. Launch Orca and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:#test-3
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "action 3, push button"
TalkBackChromeyes
  • Result: (pass)
    • Test Case: Use Swipe right (Read next item) to navigate forward to `#test-3`
      1. Launch TalkBack and Chrome.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:#test-3
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Swipe right (Read next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "action 3, 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. Identify all elements that match this selector:#test-3
        • If multiple elements match the target, repeat this test for all instances. 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: target 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. Identify all elements that match this selector:#test-3
        • If multiple elements match the target, repeat this test for all instances. 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: target was flagged with a number
    • Command Notes: said "show numbers"
VoiceOver (iOS)Safarinone
  • Result: (fail)
    • Test Case: Use Swipe Right (Next item) to navigate forward to `#test-3`
      1. Launch VoiceOver (iOS) and Safari.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:#test-3
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Swipe Right (Next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "action 3, link"
    • Result Notes: the stale link role was conveyed instead of the new button role.
VoiceOver (macOS)Safariyes
  • Result: (pass)
    • Test Case: Use VO + Right arrow (Read next item) to navigate forward to `#test-3`
      1. Launch VoiceOver (macOS) and Safari.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:#test-3
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: VO + Right arrow (Read next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "action 3, button"
  • Result: (pass)
    • Test Case: Use Tab (Read next focusable item) to navigate forward to `#test-3`
      1. Launch VoiceOver (macOS) and Safari.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:#test-3
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "action 3, button"
Windows Speech RecognitionChromeyes
  • Result: (pass)
    • Test Case: Use "Show numbers" (Turn on the numbers overlay)
      1. Launch Windows Speech Recognition and Chrome.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:#test-3
        • If multiple elements match the target, repeat this test for all instances. 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: target was flagged with a number
    • Command Notes: said "show numbers"

Extended Support for: role attribute: process changes in role values

These are less common combinations

ATBrowserHas SupportOutput
Dragon Naturally SpeakingIEunknown-
Dragon Naturally SpeakingFirefoxunknown-
JAWSEdgeunknown-
NarratorFirefoxunknown-
NarratorChromeunknown-
NarratorIEunknown-
NVDAIEunknown-
NVDAEdgeunknown-
TalkBackFirefoxunknown-
Voice Access (Android)Firefoxunknown-
VoiceOver (iOS)Chromeunknown-
VoiceOver (macOS)Chromeunknown-
VoiceOver (macOS)Firefoxunknown-
OrcaChromeunknown-
Voice Control (MacOS)Chromeunknown-
Voice Control (MacOS)Firefoxunknown-
Windows Speech RecognitionEdgeunknown-
Back to top

Expectation for the role attribute: support fallback roles - applied to the div element

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

This expectation is from the role attribute feature.

Rationale:

If multiple roles are defined, the user needs to be made aware of the first supported role value

Strength of this expectation for different types of assistive technologies:

  • Screen Readers: MUST
  • Voice Control: MUST

Grading method:

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

Notes:

Authors can list multiple role values within a role attribute, and each role is separated by white space. The first recognized role will be used used. This can be helpful when authors want to use a new role that is not widely supported yet, and fall back to an older role with wider support.

ATBrowserHas SupportOutput
Dragon Naturally SpeakingChromenone
  • Result: (fail)
    • Test Case: Use Click <role> (Click Type)
      1. Launch Dragon Naturally Speaking and Chrome.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:#test-2
        • If multiple elements match the target, repeat this test for all instances. 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: target was not activated and not flagged for disambiguation
    • Command Notes: said "click button"
JAWSChromeyes
  • Result: (pass)
    • Test Case: Use Down arrow (Read next item) to navigate forward to `#test-2`
      1. Launch JAWS and Chrome.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:#test-2
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Down arrow (Read next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "action 2, button"
  • Result: (pass)
    • Test Case: Use Tab (Read next focusable item) to navigate forward to `#test-2`
      1. Launch JAWS and Chrome.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:#test-2
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "action 2, button, to activate press space bar"
JAWSIEnone
  • Result: (fail)
    • Test Case: Use Down arrow (Read next item) to navigate forward to `#test-2`
      1. Launch JAWS and IE.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:#test-2
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Down arrow (Read next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "action 2"
  • Result: (fail)
    • Test Case: Use Tab (Read next focusable item) to navigate forward to `#test-2`
      1. Launch JAWS and IE.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:#test-2
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "action 2"
JAWSFirefoxyes
  • Result: (pass)
    • Test Case: Use Down arrow (Read next item) to navigate forward to `#test-2`
      1. Launch JAWS and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:#test-2
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Down arrow (Read next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "action 2, button"
  • Result: (pass)
    • Test Case: Use Tab (Read next focusable item) to navigate forward to `#test-2`
      1. Launch JAWS and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:#test-2
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "action 2, button, to activate press space bar"
NarratorEdgeyes
  • Result: (pass)
    • Test Case: Use Down arrow (Read next item (scan mode)) to navigate forward to `#test-2`
      1. Launch Narrator and Edge.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:#test-2
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Down arrow (Read next item (scan mode))
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "button, action 2"
  • Result: (pass)
    • Test Case: Use Tab (Read next focusable item) to navigate forward to `#test-2`
      1. Launch Narrator and Edge.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:#test-2
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "action 2, button"
NVDAChromeyes
  • Result: (pass)
    • Test Case: Use down arrow (Read next item) to navigate forward to `#test-2`
      1. Launch NVDA and Chrome.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:#test-2
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: down arrow (Read next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "button, action 2"
  • Result: (pass)
    • Test Case: Use Tab (Read next focusable item) to navigate forward to `#test-2`
      1. Launch NVDA and Chrome.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:#test-2
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "action 2, button"
NVDAFirefoxyes
  • Result: (pass)
    • Test Case: Use down arrow (Read next item) to navigate forward to `#test-2`
      1. Launch NVDA and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:#test-2
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: down arrow (Read next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "button, action 2"
  • Result: (pass)
    • Test Case: Use Tab (Read next focusable item) to navigate forward to `#test-2`
      1. Launch NVDA and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:#test-2
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "action 2, button"
OrcaFirefoxyes
  • Result: (pass)
    • Test Case: Use down arrow (Read next item) to navigate forward to `#test-2`
      1. Launch Orca and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:#test-2
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: down arrow (Read next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "action 2, push button"
  • Result: (pass)
    • Test Case: Use Tab (Read next focusable item) to navigate forward to `#test-2`
      1. Launch Orca and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:#test-2
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "action 2, push button"
TalkBackChromeyes
  • Result: (pass)
    • Test Case: Use Swipe right (Read next item) to navigate forward to `#test-2`
      1. Launch TalkBack and Chrome.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:#test-2
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Swipe right (Read next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "action 2, 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. Identify all elements that match this selector:#test-2
        • If multiple elements match the target, repeat this test for all instances. 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: target 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. Identify all elements that match this selector:#test-2
        • If multiple elements match the target, repeat this test for all instances. 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: target was flagged with a number
    • Command Notes: said "show numbers"
VoiceOver (iOS)Safariyes
  • Result: (pass)
    • Test Case: Use Swipe Right (Next item) to navigate forward to `#test-2`
      1. Launch VoiceOver (iOS) and Safari.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:#test-2
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Swipe Right (Next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "action 2, button"
VoiceOver (macOS)Safariyes
  • Result: (pass)
    • Test Case: Use VO + Right arrow (Read next item) to navigate forward to `#test-2`
      1. Launch VoiceOver (macOS) and Safari.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:#test-2
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: VO + Right arrow (Read next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "action 2, button"
  • Result: (pass)
    • Test Case: Use Tab (Read next focusable item) to navigate forward to `#test-2`
      1. Launch VoiceOver (macOS) and Safari.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:#test-2
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "action 2, button"
Windows Speech RecognitionChromeyes
  • Result: (pass)
    • Test Case: Use "Show numbers" (Turn on the numbers overlay)
      1. Launch Windows Speech Recognition and Chrome.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:#test-2
        • If multiple elements match the target, repeat this test for all instances. 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: target was flagged with a number
    • Command Notes: said "show numbers"

Extended Support for: role attribute: support fallback roles

These are less common combinations

ATBrowserHas SupportOutput
Dragon Naturally SpeakingIEunknown-
Dragon Naturally SpeakingFirefoxunknown-
JAWSEdgeunknown-
NarratorFirefoxunknown-
NarratorChromeunknown-
NarratorIEunknown-
NVDAIEunknown-
NVDAEdgeunknown-
TalkBackFirefoxunknown-
Voice Access (Android)Firefoxunknown-
VoiceOver (iOS)Chromeunknown-
VoiceOver (macOS)Chromeunknown-
VoiceOver (macOS)Firefoxunknown-
OrcaChromeunknown-
Voice Control (MacOS)Chromeunknown-
Voice Control (MacOS)Firefoxunknown-
Windows Speech RecognitionEdgeunknown-
Back to top

Dates and Versions of tested combinations

ATAT VersionBrowserBrowser versionOS versionDate tested
Dragon Naturally Speaking15.30Chrome7819032019-11-27
JAWS2019.1909.28Chrome7819032019-11-27
JAWS2019.1909.28IE1119032019-11-27
JAWS2019.1909.28Firefox7019032019-11-27
Narrator1903Edge4419032019-11-27
NVDA2019.2.1Chrome7819032019-11-27
NVDA2019.2.1Firefox7019032019-11-27
Orca3.31.4Firefox70Ubuntu 19.042019-11-27
TalkBack8.1Chrome78102019-11-27
Voice Access (Android)3.1Chrome78102019-11-27
Voice Control (iOS)13.2.3Safari13.2.313.2.32019-11-27
Voice Control (MacOS)10.15Safari13.0.310.152019-11-27
VoiceOver (iOS)13.2.3Safari13.2.313.2.32019-11-27
VoiceOver (macOS)10.15Safari13.0.310.152019-11-27
Windows Speech Recognition1903Chrome7819032019-11-27

History

  • 2019-11-25 Create test
  • 2019-11-27 Add results for browse_caret_not_lost