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

Test: aria-flowto test

Screen Reader support level: partial (10/40)

Voice Control support level: not applicable (or no 'MUST' expectations)

On this page

About this test

A sample of aria-flowto functionality

Run this test and and submit your results

Age of results

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

Caution

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

Test HTML

open the test page
<!DOCTYPE html>
<html lang="en">
<head>
    <title>aria-flowto examples</title>
</head>
<body>
    <h1>aria-flowto examples</h1>

    <ul>
        <li>'apple' flows to 'banana', 'orange', and 'strawberry'</li>
        <li>'banana' does not flow to anything</li>
        <li>'orange' flows to 'apple'</li>
        <li>'strawberry' does not flow to anything, but has an aria-label attribute.</li>
    </ul>

    <div id="content_1" aria-flowto="content_2 content_3 content_4">apple</div>

    <div id="content_2">banana</div>

    <div id="content_3" aria-flowto="content_1">orange</div>

    <div id="content_4" aria-label="strawberry">strawberry</div>
</body>
</html>

Summary of Screen Reader support by expectation

* means that some support is hidden behind settings

Summary of Voice Control support by expectation

aria-flowto attribute
ExpectationDragon Naturally SpeakingVoice Access (Android)Voice Control (iOS)Voice Control (MacOS)Windows Speech Recognition
ChromeChromeSafariSafariChrome
Not applicable

* means that some support is hidden behind settings

Detailed support results by expectation

Expectation for the aria-flowto attribute: let a user navigate to elements that target the current element. If this functionality is provided and the there are multiple targeting elements, the user must be able to choose which one to navigate to. - 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 aria-flowto attribute feature.

Rationale:

The reading order goes both directions, and a user needs to be able to travel backwards through their chosen reading order.

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: Use shift + equals sign (Go to the the first element that references this element via aria-flowto) to navigate forward to `*`
      1. Launch JAWS and Chrome.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be 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: shift + equals sign (Go to the the first element that references this element via aria-flowto)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: (navigates directly to the element if only one relationship, otherwise it opens a dialog and lists relationships to jump to)
Notes: relationships are displayed in a dialog, but only targets that have an aria-label are labelled in the dialog. The rest appear without a textual label.
JAWSIEyes
  • Result: (pass)
    • Test Case: Use shift + equals sign (Go to the the first element that references this element via aria-flowto) to navigate forward to `*`
      1. Launch JAWS and IE.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be 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: shift + equals sign (Go to the the first element that references this element via aria-flowto)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: (navigates directly to the element if only one relationship, otherwise it opens a dialog and lists relationships to jump to)
Notes: relationships are displayed in a dialog, but only targets that have an aria-label are labelled in the dialog. The rest appear without a textual label.
JAWSFirefoxpartial
  • Result: (partial)
    • Test Case: Use shift + equals sign (Go to the the first element that references this element via aria-flowto) to navigate forward to `*`
      1. Launch JAWS and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be 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: shift + equals sign (Go to the the first element that references this element via aria-flowto)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: (navigates to the first element that references the current element, dialog is not displayed if there are multiple relationships)
Notes: partial support because a reference to multiple elements is not supported
NarratorEdgenone
  • Result: (fail)
    • Test Case: Use Down arrow (Read next item (scan mode)) to navigate forward to `*`
      1. Launch Narrator and Edge.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be 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: (does not convey presence of aria-flowto)
  • Result: (fail)
    • Test Case: Use Narrator + left arrow (Read previous item (item view, scan mode off)) to navigate forward to `*`
      1. Launch Narrator and Edge.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be 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: Narrator + left arrow (Read previous item (item view, scan mode off))
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: (does not let user navigate to any of the targeting elements)
NVDAChromenone
  • Result: (fail)
    • Test Case: Use down arrow (Read next item) to navigate forward to `*`
      1. Launch NVDA and Chrome.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be 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: (does not convey presence of aria-flowto)
NVDAFirefoxnone
  • Result: (fail)
    • Test Case: Use down arrow (Read next item) to navigate forward to `*`
      1. Launch NVDA and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be 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: (does not convey presence of aria-flowto)
OrcaFirefoxnone
  • Result: (fail)
    • Test Case: Use down arrow (Read next item) to navigate forward to `*`
      1. Launch Orca and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be 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: (does not convey presence of aria-flowto)
TalkBackChromenone
  • Result: (fail)
    • Test Case: Use Swipe right (Read next item) to navigate forward to `*`
      1. Launch TalkBack and Chrome.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be 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: (does not convey presence of aria-flowto)
Voice Access (Android)Chromenot applicable-
Voice Control (iOS)Safarinot applicable-
Voice Control (MacOS)Safarinot applicable-
VoiceOver (iOS)Safarinone
  • Result: (fail)
    • Test Case: Use Swipe Right (Next item) to navigate forward to `*`
      1. Launch VoiceOver (iOS) and Safari.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be 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: (does not convey presence of aria-flowto)
VoiceOver (macOS)Safarinone
  • Result: (fail)
    • Test Case: Use VO + Right arrow (Read next item) to navigate forward to `*`
      1. Launch VoiceOver (macOS) and Safari.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be 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: (does not convey presence of aria-flowto)
Windows Speech RecognitionChromenot applicable-

Extended Support for: aria-flowto attribute: let a user navigate to elements that target the current element. If this functionality is provided and the there are multiple targeting elements, the user must be able to choose which one to navigate to.

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 aria-flowto attribute: let a user navigate to referenced element(s). If the there are multiple targets, the user MUST be able to choose which one to navigate to. - 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 aria-flowto attribute feature.

Rationale:

A user needs to be able to follow the alternate reading order.

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: Use equals sign (Follow the element referenced by aria-flowto) to navigate forward to `*[aria-flowto]`
      1. Launch JAWS and Chrome.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[aria-flowto]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be 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: equals sign (Follow the element referenced by aria-flowto)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: (navigates directly to the element if only one relationship, otherwise it opens a dialog and lists relationships to jump to)
Notes: relationships are displayed in a dialog, but only targets that have an aria-label are labelled in the dialog. The rest appear without a textual label.
JAWSIEyes
  • Result: (pass)
    • Test Case: Use equals sign (Follow the element referenced by aria-flowto) to navigate forward to `*[aria-flowto]`
      1. Launch JAWS and IE.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[aria-flowto]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be 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: equals sign (Follow the element referenced by aria-flowto)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: (navigates directly to the element if only one relationship, otherwise it opens a dialog and lists relationships to jump to)
Notes: relationships are displayed in a dialog, but only targets that have an aria-label are labelled in the dialog. The rest appear without a textual label.
JAWSFirefoxpartial
  • Result: (partial)
    • Test Case: Use equals sign (Follow the element referenced by aria-flowto) to navigate forward to `*[aria-flowto]`
      1. Launch JAWS and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[aria-flowto]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be 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: equals sign (Follow the element referenced by aria-flowto)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: (navigates to the first referenced element, dialog is not displayed if there are multiple relationships)
Notes: partial support because a reference to multiple elements is not supported
NarratorEdgepartial
  • Result: (fail)
    • Test Case: Use Down arrow (Read next item (scan mode)) to navigate forward to `*[aria-flowto]`
      1. Launch Narrator and Edge.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[aria-flowto]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be 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: (does not convey presence of aria-flowto)
  • Result: (partial)
    • Test Case: Use Narrator + right arrow (Read next item (item view, scan mode off)) to navigate forward to `*[aria-flowto]`
      1. Launch Narrator and Edge.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[aria-flowto]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be 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: Narrator + right arrow (Read next item (item view, scan mode off))
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: (does not convey presence of aria-flowto)
Notes: partial because user was not prompted to follow the alternate reading order.
NVDAChromenone
  • Result: (fail)
    • Test Case: Use down arrow (Read next item) to navigate forward to `*[aria-flowto]`
      1. Launch NVDA and Chrome.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[aria-flowto]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be 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: (does not convey presence of aria-flowto)
NVDAFirefoxnone
  • Result: (fail)
    • Test Case: Use down arrow (Read next item) to navigate forward to `*[aria-flowto]`
      1. Launch NVDA and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[aria-flowto]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be 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: (does not convey presence of aria-flowto)
OrcaFirefoxnone
  • Result: (fail)
    • Test Case: Use down arrow (Read next item) to navigate forward to `*[aria-flowto]`
      1. Launch Orca and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[aria-flowto]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be 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: (does not convey presence of aria-flowto)
TalkBackChromenone
  • Result: (fail)
    • Test Case: Use Swipe right (Read next item) to navigate forward to `*[aria-flowto]`
      1. Launch TalkBack and Chrome.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[aria-flowto]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be 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: (does not convey presence of aria-flowto)
Voice Access (Android)Chromenot applicable-
Voice Control (iOS)Safarinot applicable-
Voice Control (MacOS)Safarinot applicable-
VoiceOver (iOS)Safarinone
  • Result: (fail)
    • Test Case: Use Swipe Right (Next item) to navigate forward to `*[aria-flowto]`
      1. Launch VoiceOver (iOS) and Safari.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[aria-flowto]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be 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: (does not convey presence of aria-flowto)
VoiceOver (macOS)Safarinone
  • Result: (fail)
    • Test Case: Use VO + Right arrow (Read next item) to navigate forward to `*[aria-flowto]`
      1. Launch VoiceOver (macOS) and Safari.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[aria-flowto]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be 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: (does not convey presence of aria-flowto)
Windows Speech RecognitionChromenot applicable-

Extended Support for: aria-flowto attribute: let a user navigate to referenced element(s). If the there are multiple targets, the user MUST be able to choose which one to navigate to.

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 aria-flowto attribute: convey that another element flows to the current element - 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 aria-flowto attribute feature.

Rationale:

The reading order goes both directions, and a user needs to be aware of the alternate reading order so that they can invoke the functionality.

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: Use Down arrow (Read next item) to navigate forward to `*`
      1. Launch JAWS and Chrome.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be 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: announces "has flow from" if another element references the current element.
JAWSIEyes
  • Result: (pass)
    • Test Case: Use Down arrow (Read next item) to navigate forward to `*`
      1. Launch JAWS and IE.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be 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: announces "has flow from" if another element references the current element.
JAWSFirefoxyes
  • Result: (pass)
    • Test Case: Use Down arrow (Read next item) to navigate forward to `*`
      1. Launch JAWS and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be 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: announces "has flow from" if another element references the current element.
NarratorEdgenone
  • Result: (fail)
    • Test Case: Use Down arrow (Read next item (scan mode)) to navigate forward to `*`
      1. Launch Narrator and Edge.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be 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: (does not convey presence of aria-flowto)
  • Result: (fail)
    • Test Case: Use Narrator + right arrow (Read next item (item view, scan mode off)) to navigate forward to `*`
      1. Launch Narrator and Edge.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be 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: Narrator + right arrow (Read next item (item view, scan mode off))
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: (does not convey presence of aria-flowto)
NVDAChromenone
  • Result: (fail)
    • Test Case: Use down arrow (Read next item) to navigate forward to `*`
      1. Launch NVDA and Chrome.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be 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: (does not convey presence of aria-flowto)
NVDAFirefoxnone
  • Result: (fail)
    • Test Case: Use down arrow (Read next item) to navigate forward to `*`
      1. Launch NVDA and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be 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: (does not convey presence of aria-flowto)
OrcaFirefoxnone
  • Result: (fail)
    • Test Case: Use down arrow (Read next item) to navigate forward to `*`
      1. Launch Orca and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be 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: (does not convey presence of aria-flowto)
TalkBackChromenone
  • Result: (fail)
    • Test Case: Use Swipe right (Read next item) to navigate forward to `*`
      1. Launch TalkBack and Chrome.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be 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: (does not convey presence of aria-flowto)
Voice Access (Android)Chromenot applicable-
Voice Control (iOS)Safarinot applicable-
Voice Control (MacOS)Safarinot applicable-
VoiceOver (iOS)Safarinone
  • Result: (fail)
    • Test Case: Use Swipe Right (Next item) to navigate forward to `*`
      1. Launch VoiceOver (iOS) and Safari.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be 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: (does not convey presence of aria-flowto)
VoiceOver (macOS)Safarinone
  • Result: (fail)
    • Test Case: Use VO + Right arrow (Read next item) to navigate forward to `*`
      1. Launch VoiceOver (macOS) and Safari.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be 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: (does not convey presence of aria-flowto)
Windows Speech RecognitionChromenot applicable-

Extended Support for: aria-flowto attribute: convey that another element flows to the current element

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 aria-flowto attribute: convey the presence of the flowto 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 aria-flowto attribute feature.

Rationale:

A user needs to understand that the current element flows to another element so that they can invoke the functionality.

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: Use Down arrow (Read next item) to navigate forward to `*[aria-flowto]`
      1. Launch JAWS and Chrome.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[aria-flowto]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be 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: announces "has flow to" if the current element flows to another element and "has flow from" if another element references the current element.
JAWSIEyes
  • Result: (pass)
    • Test Case: Use Down arrow (Read next item) to navigate forward to `*[aria-flowto]`
      1. Launch JAWS and IE.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[aria-flowto]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be 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: announces "has flow to" if the current element flows to another element and "has flow from" if another element references the current element.
JAWSFirefoxyes
  • Result: (pass)
    • Test Case: Use Down arrow (Read next item) to navigate forward to `*[aria-flowto]`
      1. Launch JAWS and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[aria-flowto]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be 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: announces "has flow to" if the current element flows to another element and "has flow from" if another element references the current element.
NarratorEdgenone
  • Result: (fail)
    • Test Case: Use Down arrow (Read next item (scan mode)) to navigate forward to `*[aria-flowto]`
      1. Launch Narrator and Edge.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[aria-flowto]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be 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: (does not convey presence of aria-flowto)
  • Result: (fail)
    • Test Case: Use Narrator + right arrow (Read next item (item view, scan mode off)) to navigate forward to `*[aria-flowto]`
      1. Launch Narrator and Edge.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[aria-flowto]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be 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: Narrator + right arrow (Read next item (item view, scan mode off))
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: (does not convey presence of aria-flowto)
NVDAChromenone
  • Result: (fail)
    • Test Case: Use down arrow (Read next item) to navigate forward to `*[aria-flowto]`
      1. Launch NVDA and Chrome.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[aria-flowto]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be 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: (does not convey presence of aria-flowto)
NVDAFirefoxnone
  • Result: (fail)
    • Test Case: Use down arrow (Read next item) to navigate forward to `*[aria-flowto]`
      1. Launch NVDA and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[aria-flowto]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be 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: (does not convey presence of aria-flowto)
OrcaFirefoxnone
  • Result: (fail)
    • Test Case: Use down arrow (Read next item) to navigate forward to `*[aria-flowto]`
      1. Launch Orca and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[aria-flowto]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be 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: (does not convey presence of aria-flowto)
TalkBackChromenone
  • Result: (fail)
    • Test Case: Use Swipe right (Read next item) to navigate forward to `*[aria-flowto]`
      1. Launch TalkBack and Chrome.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[aria-flowto]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be 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: (does not convey presence of aria-flowto)
Voice Access (Android)Chromenot applicable-
Voice Control (iOS)Safarinot applicable-
Voice Control (MacOS)Safarinot applicable-
VoiceOver (iOS)Safarinone
  • Result: (fail)
    • Test Case: Use Swipe Right (Next item) to navigate forward to `*[aria-flowto]`
      1. Launch VoiceOver (iOS) and Safari.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[aria-flowto]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be 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: (does not convey presence of aria-flowto)
VoiceOver (macOS)Safarinone
  • Result: (fail)
    • Test Case: Use VO + Right arrow (Read next item) to navigate forward to `*[aria-flowto]`
      1. Launch VoiceOver (macOS) and Safari.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[aria-flowto]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be 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: (does not convey presence of aria-flowto)
Windows Speech RecognitionChromenot applicable-

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

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

Dates and Versions of tested combinations

ATAT VersionBrowserBrowser versionOS versionDate tested
JAWS2018.1811.2Chrome7418092019-05-02
JAWS2018.1811.2IE11.13418092019-05-02
JAWS2018.1811.2Firefox6618092019-05-02
Narrator1809Edge44.1776318092019-05-02
NVDA2018.1808.10Chrome7418092019-05-02
NVDA2018.3.2Firefox6618092019-09-04
Orca3.31.4Firefox69Ubuntu 19.042019-09-16
TalkBack7.3.0Chrome757.02019-07-27
VoiceOver (iOS)12.2Safari12.212.22019-05-08
VoiceOver (macOS)10.14.4Safari12.110.14.42019-05-08

History

  • 2019-05-08 Test created
  • 2019-07-27 Talkback results added
  • 2019-09-16 added orca results