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.2Google Chrome7418092019-05-02
JAWS2018.1811.2Internet Explorer11.13418092019-05-02
JAWS2018.1811.2Firefox (desktop)6618092019-05-02
Narrator1809Microsoft Edge44.1776318092019-05-02
NVDA2018.1808.10Google Chrome7418092019-05-02
NVDA2018.3.2Firefox (desktop)6618092019-09-04
Orca3.31.4Firefox (desktop)69Ubuntu 19.042019-09-16
TalkBack7.3.0Google Chrome (android)757.02019-07-27
VoiceOver for iOS12.2Safari (iOS)12.212.22019-05-08
VoiceOver for macOS10.14.4Safari (macOS)12.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 for AndroidVoice Control for iOSVoice Control for MacOS
Not applicable

* means that some support is hidden behind settings

Detailed support results by expectation

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 SpeakingGoogle Chromenot applicable-More information
JAWSGoogle Chromeyes
  • Result: (pass)
    • command: Down arrow (Read next item)
    • 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
JAWSInternet Exploreryes
  • Result: (pass)
    • command: Down arrow (Read next item)
    • 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
JAWSFirefox (desktop)yes
  • Result: (pass)
    • command: Down arrow (Read next item)
    • 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
NarratorMicrosoft Edgenone
  • Result: (fail)
    • command: Down arrow (Read next item (scan mode))
    • Output: (does not convey presence of aria-flowto)
  • Result: (fail)
    • command: Narrator + right arrow (Read next item (item view, scan mode off))
    • Output: (does not convey presence of aria-flowto)
More information
NVDAGoogle Chromenone
  • Result: (fail)
    • command: down arrow (Read next item)
    • Output: (does not convey presence of aria-flowto)
More information
NVDAFirefox (desktop)none
  • Result: (fail)
    • command: down arrow (Read next item)
    • Output: (does not convey presence of aria-flowto)
More information
OrcaFirefox (desktop)none
  • Result: (fail)
    • command: down arrow (Read next item)
    • Output: (does not convey presence of aria-flowto)
More information
TalkBackGoogle Chrome (android)none
  • Result: (fail)
    • command: Swipe right (Read next item)
    • location before command: before target
    • location after command: target
    • Output: (does not convey presence of aria-flowto)
More information
Voice Access for AndroidGoogle Chrome (android)not applicable-More information
Voice Control for iOSSafari (iOS)not applicable-More information
Voice Control for MacOSSafari (macOS)not applicable-More information
VoiceOver for iOSSafari (iOS)none
  • Result: (fail)
    • command: Swipe Right (Next item)
    • Output: (does not convey presence of aria-flowto)
More information
VoiceOver for macOSSafari (macOS)none
  • Result: (fail)
    • command: VO + Right arrow (Read next item)
    • Output: (does not convey presence of aria-flowto)
More information

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

These are less common combinations

ATBrowserHas SupportOutputAction
Dragon Naturally SpeakingInternet Explorernot applicable-More information
Dragon Naturally SpeakingFirefox (desktop)not applicable-More information
JAWSMicrosoft Edgeunknown-More information
NarratorFirefox (desktop)unknown-More information
NarratorGoogle Chromeunknown-More information
NarratorInternet Explorerunknown-More information
NVDAInternet Explorerunknown-More information
NVDAMicrosoft Edgeunknown-More information
TalkBackFirefox (Android)unknown-More information
Voice Access for AndroidFirefox (Android)not applicable-More information
VoiceOver for iOSGoogle Chrome (ios)unknown-More information
VoiceOver for macOSGoogle Chromeunknown-More information
VoiceOver for macOSFirefox (desktop)unknown-More information
OrcaGoogle Chromeunknown-More information
Voice Control for MacOSGoogle Chromenot applicable-More information
Voice Control for MacOSFirefox (desktop)not 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 SpeakingGoogle Chromenot applicable-More information
JAWSGoogle Chromeyes
  • Result: (pass)
    • command: Down arrow (Read next item)
    • Output: announces "has flow from" if another element references the current element.
More information
JAWSInternet Exploreryes
  • Result: (pass)
    • command: Down arrow (Read next item)
    • Output: announces "has flow from" if another element references the current element.
More information
JAWSFirefox (desktop)yes
  • Result: (pass)
    • command: Down arrow (Read next item)
    • Output: announces "has flow from" if another element references the current element.
More information
NarratorMicrosoft Edgenone
  • Result: (fail)
    • command: Down arrow (Read next item (scan mode))
    • Output: (does not convey presence of aria-flowto)
  • Result: (fail)
    • command: Narrator + right arrow (Read next item (item view, scan mode off))
    • Output: (does not convey presence of aria-flowto)
More information
NVDAGoogle Chromenone
  • Result: (fail)
    • command: down arrow (Read next item)
    • Output: (does not convey presence of aria-flowto)
More information
NVDAFirefox (desktop)none
  • Result: (fail)
    • command: down arrow (Read next item)
    • Output: (does not convey presence of aria-flowto)
More information
OrcaFirefox (desktop)none
  • Result: (fail)
    • command: down arrow (Read next item)
    • Output: (does not convey presence of aria-flowto)
More information
TalkBackGoogle Chrome (android)none
  • Result: (fail)
    • command: Swipe right (Read next item)
    • location before command: before target
    • location after command: target
    • Output: (does not convey presence of aria-flowto)
More information
Voice Access for AndroidGoogle Chrome (android)not applicable-More information
Voice Control for iOSSafari (iOS)not applicable-More information
Voice Control for MacOSSafari (macOS)not applicable-More information
VoiceOver for iOSSafari (iOS)none
  • Result: (fail)
    • command: Swipe Right (Next item)
    • Output: (does not convey presence of aria-flowto)
More information
VoiceOver for macOSSafari (macOS)none
  • Result: (fail)
    • command: VO + Right arrow (Read next item)
    • Output: (does not convey presence of aria-flowto)
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 SpeakingInternet Explorernot applicable-More information
Dragon Naturally SpeakingFirefox (desktop)not applicable-More information
JAWSMicrosoft Edgeunknown-More information
NarratorFirefox (desktop)unknown-More information
NarratorGoogle Chromeunknown-More information
NarratorInternet Explorerunknown-More information
NVDAInternet Explorerunknown-More information
NVDAMicrosoft Edgeunknown-More information
TalkBackFirefox (Android)unknown-More information
Voice Access for AndroidFirefox (Android)not applicable-More information
VoiceOver for iOSGoogle Chrome (ios)unknown-More information
VoiceOver for macOSGoogle Chromeunknown-More information
VoiceOver for macOSFirefox (desktop)unknown-More information
OrcaGoogle Chromeunknown-More information
Voice Control for MacOSGoogle Chromenot applicable-More information
Voice Control for MacOSFirefox (desktop)not 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 SpeakingGoogle Chromenot applicable-More information
JAWSGoogle Chromeyes
  • Result: (pass)
    • command: equals sign (Follow the element referenced by aria-flowto)
    • 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
JAWSInternet Exploreryes
  • Result: (pass)
    • command: equals sign (Follow the element referenced by aria-flowto)
    • 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
JAWSFirefox (desktop)partial
  • Result: (partial)
    • command: equals sign (Follow the element referenced by aria-flowto)
    • 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
NarratorMicrosoft Edgepartial
  • Result: (fail)
    • command: Down arrow (Read next item (scan mode))
    • Output: (does not let user navigate to any of the targeted elements)
  • Result: (partial)
    • command: Narrator + right arrow (Read next item (item view, scan mode off))
    • Output: (automatically navigates to the first targeted element)
Notes: partial because user was not prompted to follow the alternate reading order.
More information
NVDAGoogle Chromenone
  • Result: (fail)
    • command: down arrow (Read next item)
    • Output: (does not let user navigate to any of the targeted elements)
More information
NVDAFirefox (desktop)none
  • Result: (fail)
    • command: down arrow (Read next item)
    • Output: (does not let user navigate to any of the targeted elements)
More information
OrcaFirefox (desktop)none
  • Result: (fail)
    • command: down arrow (Read next item)
    • Output: (does not let user navigate to any of the targeted elements)
More information
TalkBackGoogle Chrome (android)none
  • Result: (fail)
    • command: Swipe right (Read next item)
    • location before command: before target
    • location after command: target
    • Output: (does not let user navigate to any of the targeted elements)
More information
Voice Access for AndroidGoogle Chrome (android)not applicable-More information
Voice Control for iOSSafari (iOS)not applicable-More information
Voice Control for MacOSSafari (macOS)not applicable-More information
VoiceOver for iOSSafari (iOS)none
  • Result: (fail)
    • command: Swipe Right (Next item)
    • Output: (does not let user navigate to any of the targeted elements)
More information
VoiceOver for macOSSafari (macOS)none
  • Result: (fail)
    • command: VO + Right arrow (Read next item)
    • Output: (does not let user navigate to any of the targeted elements)
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 SpeakingInternet Explorernot applicable-More information
Dragon Naturally SpeakingFirefox (desktop)not applicable-More information
JAWSMicrosoft Edgeunknown-More information
NarratorFirefox (desktop)unknown-More information
NarratorGoogle Chromeunknown-More information
NarratorInternet Explorerunknown-More information
NVDAInternet Explorerunknown-More information
NVDAMicrosoft Edgeunknown-More information
TalkBackFirefox (Android)unknown-More information
Voice Access for AndroidFirefox (Android)not applicable-More information
VoiceOver for iOSGoogle Chrome (ios)unknown-More information
VoiceOver for macOSGoogle Chromeunknown-More information
VoiceOver for macOSFirefox (desktop)unknown-More information
OrcaGoogle Chromeunknown-More information
Voice Control for MacOSGoogle Chromenot applicable-More information
Voice Control for MacOSFirefox (desktop)not applicable-More information
Back to top

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 SpeakingGoogle Chromenot applicable-More information
JAWSGoogle Chromeyes
  • Result: (pass)
    • command: shift + equals sign (Go to the the first element that references this element via aria-flowto)
    • 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
JAWSInternet Exploreryes
  • Result: (pass)
    • command: shift + equals sign (Go to the the first element that references this element via aria-flowto)
    • 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
JAWSFirefox (desktop)partial
  • Result: (partial)
    • command: shift + equals sign (Go to the the first element that references this element via aria-flowto)
    • 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
NarratorMicrosoft Edgenone
  • Result: (fail)
    • command: Down arrow (Read next item (scan mode))
    • Output: (does not let user navigate to any of the targeting elements)
  • Result: (fail)
    • command: Narrator + left arrow (Read previous item (item view, scan mode off))
    • Output: (does not let user navigate to any of the targeting elements)
More information
NVDAGoogle Chromenone
  • Result: (fail)
    • command: down arrow (Read next item)
    • Output: (does not let user navigate to any of the targeting elements)
More information
NVDAFirefox (desktop)none
  • Result: (fail)
    • command: down arrow (Read next item)
    • Output: (does not let user navigate to any of the targeting elements)
More information
OrcaFirefox (desktop)none
  • Result: (fail)
    • command: down arrow (Read next item)
    • Output: (does not let user navigate to any of the targeting elements)
More information
TalkBackGoogle Chrome (android)none
  • Result: (fail)
    • command: Swipe right (Read next item)
    • location before command: before target
    • location after command: target
    • Output: (does not let user navigate to any of the referencing content)
More information
Voice Access for AndroidGoogle Chrome (android)not applicable-More information
Voice Control for iOSSafari (iOS)not applicable-More information
Voice Control for MacOSSafari (macOS)not applicable-More information
VoiceOver for iOSSafari (iOS)none
  • Result: (fail)
    • command: Swipe Right (Next item)
    • Output: (does not let user navigate to any of the referencing content)
More information
VoiceOver for macOSSafari (macOS)none
  • Result: (fail)
    • command: VO + Right arrow (Read next item)
    • Output: (does not let user navigate to any of the referencing content)
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 SpeakingInternet Explorernot applicable-More information
Dragon Naturally SpeakingFirefox (desktop)not applicable-More information
JAWSMicrosoft Edgeunknown-More information
NarratorFirefox (desktop)unknown-More information
NarratorGoogle Chromeunknown-More information
NarratorInternet Explorerunknown-More information
NVDAInternet Explorerunknown-More information
NVDAMicrosoft Edgeunknown-More information
TalkBackFirefox (Android)unknown-More information
Voice Access for AndroidFirefox (Android)not applicable-More information
VoiceOver for iOSGoogle Chrome (ios)unknown-More information
VoiceOver for macOSGoogle Chromeunknown-More information
VoiceOver for macOSFirefox (desktop)unknown-More information
OrcaGoogle Chromeunknown-More information
Voice Control for MacOSGoogle Chromenot applicable-More information
Voice Control for MacOSFirefox (desktop)not applicable-More information
Back to top

History

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