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

A sample of aria-flowto functionality

Run this test and and submit your results

On this page

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>

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

Summary of Screen Reader support by expectation

* means that some support is hidden behind settings

Summary of Voice Control support by expectation

ExpectationDragon Naturally SpeakingVoice Access (Android)Voice Control (iOS)Voice Control (MacOS)Windows Speech Recognition
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.

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

Strength of these expectations 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.

This expectation is from the aria-flowto attribute feature.

ATBrowserHas SupportOutputAction
Dragon Naturally SpeakingChromenot applicable-More information
JAWSChromeyes
  • Result: (pass)
    • command: shift + equals sign (Go to the the first element that references this element via aria-flowto)
    • before the command was executed
      • mode: auto (mode not explicitly)
      • keyboard focus location: before target
      • virtual cursor location: before target
    • location after command: target
    • 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.
More information
JAWSIEyes
  • Result: (pass)
    • command: shift + equals sign (Go to the the first element that references this element via aria-flowto)
    • before the command was executed
      • mode: auto (mode not explicitly)
      • keyboard focus location: before target
      • virtual cursor location: before target
    • location after command: target
    • 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.
More information
JAWSFirefoxpartial
  • Result: (partial)
    • command: shift + equals sign (Go to the the first element that references this element via aria-flowto)
    • before the command was executed
      • mode: auto (mode not explicitly)
      • keyboard focus location: before target
      • virtual cursor location: before target
    • location after command: target
    • 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
More information
NarratorEdgenone
  • Result: (fail)
    • command: Down arrow (Read next item (scan mode))
    • before the command was executed
      • mode: auto (mode not explicitly)
      • keyboard focus location: before target
      • virtual cursor location: before target
    • location after command: target
    • Output: (does not convey presence of aria-flowto)
  • Result: (fail)
    • command: Narrator + left arrow (Read previous item (item view, scan mode off))
    • before the command was executed
      • mode: auto (mode not explicitly)
      • keyboard focus location: before target
      • virtual cursor location: before target
    • location after command: target
    • Output: (does not let user navigate to any of the targeting elements)
More information
NVDAChromenone
  • Result: (fail)
    • command: down arrow (Read next item)
    • before the command was executed
      • mode: auto (mode not explicitly)
      • keyboard focus location: before target
      • virtual cursor location: before target
    • location after command: target
    • Output: (does not convey presence of aria-flowto)
More information
NVDAFirefoxnone
  • Result: (fail)
    • command: down arrow (Read next item)
    • before the command was executed
      • mode: auto (mode not explicitly)
      • keyboard focus location: before target
      • virtual cursor location: before target
    • location after command: target
    • Output: (does not convey presence of aria-flowto)
More information
OrcaFirefoxnone
  • Result: (fail)
    • command: down arrow (Read next item)
    • before the command was executed
      • mode: auto (mode not explicitly)
      • keyboard focus location: before target
      • virtual cursor location: before target
    • location after command: target
    • Output: (does not convey presence of aria-flowto)
More information
TalkBackChromenone
  • Result: (fail)
    • command: Swipe right (Read next item)
    • before the command was executed
      • mode: auto (mode not explicitly)
      • keyboard focus location: before target
      • virtual cursor location: before target
    • location after command: target
    • Output: (does not convey presence of aria-flowto)
More information
Voice Access (Android)Chromenot applicable-More information
Voice Control (iOS)Safarinot applicable-More information
Voice Control (MacOS)Safarinot applicable-More information
VoiceOver (iOS)Safarinone
  • Result: (fail)
    • command: Swipe Right (Next item)
    • before the command was executed
      • mode: auto (mode not explicitly)
      • keyboard focus location: before target
      • virtual cursor location: before target
    • location after command: target
    • Output: (does not convey presence of aria-flowto)
More information
VoiceOver (macOS)Safarinone
  • Result: (fail)
    • command: VO + Right arrow (Read next item)
    • before the command was executed
      • mode: auto (mode not explicitly)
      • keyboard focus location: before target
      • virtual cursor location: before target
    • location after command: target
    • Output: (does not convey presence of aria-flowto)
More information
Windows Speech RecognitionChromenot applicable-More information

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 SupportOutputAction
Dragon Naturally SpeakingIEnot applicable-More information
Dragon Naturally SpeakingFirefoxnot applicable-More information
JAWSEdgeunknown-More information
NarratorFirefoxunknown-More information
NarratorChromeunknown-More information
NarratorIEunknown-More information
NVDAIEunknown-More information
NVDAEdgeunknown-More information
TalkBackFirefoxunknown-More information
Voice Access (Android)Firefoxnot applicable-More information
VoiceOver (iOS)Chromeunknown-More information
VoiceOver (macOS)Chromeunknown-More information
VoiceOver (macOS)Firefoxunknown-More information
OrcaChromeunknown-More information
Voice Control (MacOS)Chromenot applicable-More information
Voice Control (MacOS)Firefoxnot applicable-More information
Windows Speech RecognitionEdgenot applicable-More information
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.

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

Strength of these expectations 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.

This expectation is from the aria-flowto attribute feature.

ATBrowserHas SupportOutputAction
Dragon Naturally SpeakingChromenot applicable-More information
JAWSChromeyes
  • Result: (pass)
    • command: equals sign (Follow the element referenced by aria-flowto)
    • before the command was executed
      • mode: auto (mode not explicitly)
      • keyboard focus location: before target
      • virtual cursor location: before target
    • location after command: target
    • 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.
More information
JAWSIEyes
  • Result: (pass)
    • command: equals sign (Follow the element referenced by aria-flowto)
    • before the command was executed
      • mode: auto (mode not explicitly)
      • keyboard focus location: before target
      • virtual cursor location: before target
    • location after command: target
    • 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.
More information
JAWSFirefoxpartial
  • Result: (partial)
    • command: equals sign (Follow the element referenced by aria-flowto)
    • before the command was executed
      • mode: auto (mode not explicitly)
      • keyboard focus location: before target
      • virtual cursor location: before target
    • location after command: target
    • 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
More information
NarratorEdgepartial
  • Result: (fail)
    • command: Down arrow (Read next item (scan mode))
    • before the command was executed
      • mode: auto (mode not explicitly)
      • keyboard focus location: before target
      • virtual cursor location: before target
    • location after command: target
    • Output: (does not convey presence of aria-flowto)
  • Result: (partial)
    • command: Narrator + right arrow (Read next item (item view, scan mode off))
    • before the command was executed
      • mode: auto (mode not explicitly)
      • keyboard focus location: before target
      • virtual cursor location: before target
    • location after command: target
    • Output: (does not convey presence of aria-flowto)
Notes: partial because user was not prompted to follow the alternate reading order.
More information
NVDAChromenone
  • Result: (fail)
    • command: down arrow (Read next item)
    • before the command was executed
      • mode: auto (mode not explicitly)
      • keyboard focus location: before target
      • virtual cursor location: before target
    • location after command: target
    • Output: (does not convey presence of aria-flowto)
More information
NVDAFirefoxnone
  • Result: (fail)
    • command: down arrow (Read next item)
    • before the command was executed
      • mode: auto (mode not explicitly)
      • keyboard focus location: before target
      • virtual cursor location: before target
    • location after command: target
    • Output: (does not convey presence of aria-flowto)
More information
OrcaFirefoxnone
  • Result: (fail)
    • command: down arrow (Read next item)
    • before the command was executed
      • mode: auto (mode not explicitly)
      • keyboard focus location: before target
      • virtual cursor location: before target
    • location after command: target
    • Output: (does not convey presence of aria-flowto)
More information
TalkBackChromenone
  • Result: (fail)
    • command: Swipe right (Read next item)
    • before the command was executed
      • mode: auto (mode not explicitly)
      • keyboard focus location: before target
      • virtual cursor location: before target
    • location after command: target
    • Output: (does not convey presence of aria-flowto)
More information
Voice Access (Android)Chromenot applicable-More information
Voice Control (iOS)Safarinot applicable-More information
Voice Control (MacOS)Safarinot applicable-More information
VoiceOver (iOS)Safarinone
  • Result: (fail)
    • command: Swipe Right (Next item)
    • before the command was executed
      • mode: auto (mode not explicitly)
      • keyboard focus location: before target
      • virtual cursor location: before target
    • location after command: target
    • Output: (does not convey presence of aria-flowto)
More information
VoiceOver (macOS)Safarinone
  • Result: (fail)
    • command: VO + Right arrow (Read next item)
    • before the command was executed
      • mode: auto (mode not explicitly)
      • keyboard focus location: before target
      • virtual cursor location: before target
    • location after command: target
    • Output: (does not convey presence of aria-flowto)
More information
Windows Speech RecognitionChromenot applicable-More information

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 SupportOutputAction
Dragon Naturally SpeakingIEnot applicable-More information
Dragon Naturally SpeakingFirefoxnot applicable-More information
JAWSEdgeunknown-More information
NarratorFirefoxunknown-More information
NarratorChromeunknown-More information
NarratorIEunknown-More information
NVDAIEunknown-More information
NVDAEdgeunknown-More information
TalkBackFirefoxunknown-More information
Voice Access (Android)Firefoxnot applicable-More information
VoiceOver (iOS)Chromeunknown-More information
VoiceOver (macOS)Chromeunknown-More information
VoiceOver (macOS)Firefoxunknown-More information
OrcaChromeunknown-More information
Voice Control (MacOS)Chromenot applicable-More information
Voice Control (MacOS)Firefoxnot applicable-More information
Windows Speech RecognitionEdgenot applicable-More information
Back to top

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

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 these expectations 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.

This expectation is from the aria-flowto attribute feature.

ATBrowserHas SupportOutputAction
Dragon Naturally SpeakingChromenot applicable-More information
JAWSChromeyes
  • Result: (pass)
    • command: Down arrow (Read next item)
    • before the command was executed
      • mode: auto (mode not explicitly)
      • keyboard focus location: before target
      • virtual cursor location: before target
    • location after command: target
    • Output: announces "has flow from" if another element references the current element.
More information
JAWSIEyes
  • Result: (pass)
    • command: Down arrow (Read next item)
    • before the command was executed
      • mode: auto (mode not explicitly)
      • keyboard focus location: before target
      • virtual cursor location: before target
    • location after command: target
    • Output: announces "has flow from" if another element references the current element.
More information
JAWSFirefoxyes
  • Result: (pass)
    • command: Down arrow (Read next item)
    • before the command was executed
      • mode: auto (mode not explicitly)
      • keyboard focus location: before target
      • virtual cursor location: before target
    • location after command: target
    • Output: announces "has flow from" if another element references the current element.
More information
NarratorEdgenone
  • Result: (fail)
    • command: Down arrow (Read next item (scan mode))
    • before the command was executed
      • mode: auto (mode not explicitly)
      • keyboard focus location: before target
      • virtual cursor location: before target
    • location after command: target
    • Output: (does not convey presence of aria-flowto)
  • Result: (fail)
    • command: Narrator + right arrow (Read next item (item view, scan mode off))
    • before the command was executed
      • mode: auto (mode not explicitly)
      • keyboard focus location: before target
      • virtual cursor location: before target
    • location after command: target
    • Output: (does not convey presence of aria-flowto)
More information
NVDAChromenone
  • Result: (fail)
    • command: down arrow (Read next item)
    • before the command was executed
      • mode: auto (mode not explicitly)
      • keyboard focus location: before target
      • virtual cursor location: before target
    • location after command: target
    • Output: (does not convey presence of aria-flowto)
More information
NVDAFirefoxnone
  • Result: (fail)
    • command: down arrow (Read next item)
    • before the command was executed
      • mode: auto (mode not explicitly)
      • keyboard focus location: before target
      • virtual cursor location: before target
    • location after command: target
    • Output: (does not convey presence of aria-flowto)
More information
OrcaFirefoxnone
  • Result: (fail)
    • command: down arrow (Read next item)
    • before the command was executed
      • mode: auto (mode not explicitly)
      • keyboard focus location: before target
      • virtual cursor location: before target
    • location after command: target
    • Output: (does not convey presence of aria-flowto)
More information
TalkBackChromenone
  • Result: (fail)
    • command: Swipe right (Read next item)
    • before the command was executed
      • mode: auto (mode not explicitly)
      • keyboard focus location: before target
      • virtual cursor location: before target
    • location after command: target
    • Output: (does not convey presence of aria-flowto)
More information
Voice Access (Android)Chromenot applicable-More information
Voice Control (iOS)Safarinot applicable-More information
Voice Control (MacOS)Safarinot applicable-More information
VoiceOver (iOS)Safarinone
  • Result: (fail)
    • command: Swipe Right (Next item)
    • before the command was executed
      • mode: auto (mode not explicitly)
      • keyboard focus location: before target
      • virtual cursor location: before target
    • location after command: target
    • Output: (does not convey presence of aria-flowto)
More information
VoiceOver (macOS)Safarinone
  • Result: (fail)
    • command: VO + Right arrow (Read next item)
    • before the command was executed
      • mode: auto (mode not explicitly)
      • keyboard focus location: before target
      • virtual cursor location: before target
    • location after command: target
    • Output: (does not convey presence of aria-flowto)
More information
Windows Speech RecognitionChromenot applicable-More information

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

These are less common combinations

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

Expectation for the aria-flowto attribute: convey the presence of the flowto attribute

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

Strength of these expectations 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.

This expectation is from the aria-flowto attribute feature.

ATBrowserHas SupportOutputAction
Dragon Naturally SpeakingChromenot applicable-More information
JAWSChromeyes
  • Result: (pass)
    • command: Down arrow (Read next item)
    • before the command was executed
      • mode: auto (mode not explicitly)
      • keyboard focus location: before target
      • virtual cursor location: before target
    • location after command: target
    • Output: announces "has flow to" if the current element flows to another element and "has flow from" if another element references the current element.
More information
JAWSIEyes
  • Result: (pass)
    • command: Down arrow (Read next item)
    • before the command was executed
      • mode: auto (mode not explicitly)
      • keyboard focus location: before target
      • virtual cursor location: before target
    • location after command: target
    • Output: announces "has flow to" if the current element flows to another element and "has flow from" if another element references the current element.
More information
JAWSFirefoxyes
  • Result: (pass)
    • command: Down arrow (Read next item)
    • before the command was executed
      • mode: auto (mode not explicitly)
      • keyboard focus location: before target
      • virtual cursor location: before target
    • location after command: target
    • Output: announces "has flow to" if the current element flows to another element and "has flow from" if another element references the current element.
More information
NarratorEdgenone
  • Result: (fail)
    • command: Down arrow (Read next item (scan mode))
    • before the command was executed
      • mode: auto (mode not explicitly)
      • keyboard focus location: before target
      • virtual cursor location: before target
    • location after command: target
    • Output: (does not convey presence of aria-flowto)
  • Result: (fail)
    • command: Narrator + right arrow (Read next item (item view, scan mode off))
    • before the command was executed
      • mode: auto (mode not explicitly)
      • keyboard focus location: before target
      • virtual cursor location: before target
    • location after command: target
    • Output: (does not convey presence of aria-flowto)
More information
NVDAChromenone
  • Result: (fail)
    • command: down arrow (Read next item)
    • before the command was executed
      • mode: auto (mode not explicitly)
      • keyboard focus location: before target
      • virtual cursor location: before target
    • location after command: target
    • Output: (does not convey presence of aria-flowto)
More information
NVDAFirefoxnone
  • Result: (fail)
    • command: down arrow (Read next item)
    • before the command was executed
      • mode: auto (mode not explicitly)
      • keyboard focus location: before target
      • virtual cursor location: before target
    • location after command: target
    • Output: (does not convey presence of aria-flowto)
More information
OrcaFirefoxnone
  • Result: (fail)
    • command: down arrow (Read next item)
    • before the command was executed
      • mode: auto (mode not explicitly)
      • keyboard focus location: before target
      • virtual cursor location: before target
    • location after command: target
    • Output: (does not convey presence of aria-flowto)
More information
TalkBackChromenone
  • Result: (fail)
    • command: Swipe right (Read next item)
    • before the command was executed
      • mode: auto (mode not explicitly)
      • keyboard focus location: before target
      • virtual cursor location: before target
    • location after command: target
    • Output: (does not convey presence of aria-flowto)
More information
Voice Access (Android)Chromenot applicable-More information
Voice Control (iOS)Safarinot applicable-More information
Voice Control (MacOS)Safarinot applicable-More information
VoiceOver (iOS)Safarinone
  • Result: (fail)
    • command: Swipe Right (Next item)
    • before the command was executed
      • mode: auto (mode not explicitly)
      • keyboard focus location: before target
      • virtual cursor location: before target
    • location after command: target
    • Output: (does not convey presence of aria-flowto)
More information
VoiceOver (macOS)Safarinone
  • Result: (fail)
    • command: VO + Right arrow (Read next item)
    • before the command was executed
      • mode: auto (mode not explicitly)
      • keyboard focus location: before target
      • virtual cursor location: before target
    • location after command: target
    • Output: (does not convey presence of aria-flowto)
More information
Windows Speech RecognitionChromenot applicable-More information

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

These are less common combinations

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

History

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