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

Test: aria-flowto test

Current support: partial (10/36)

A sample of aria-flowto functionality

Run this test and and submit your results

On this page

Test HTML

open the test page in a new tab
<!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>

Support tables

Expectations are conditions that must be met for the feature to be considered as "supported". Only "MUST" expectations need to be met for minimal "support". "SHOULD" and "MAY" expectations indicates support that goes above and beyond. Note that there is not an explicit standard that dictates these expectations, and as such, they are likely opinionated. As such, a feature might not meet all "MUST" expectations but still be usable (potentially frustratingly so). Additionally, the assistive technology may provide many different commands to read, navigate, or otherwise interact with a feature. Only one command is required to pass for the expectation to be minimally supported.

Summary of support by expectation type

MUSTSHOULDMAY
partial (10/36)

Summary of support by expectation and assistive technology

ExpectationDragon Naturally SpeakingJAWSNarratorNVDATalkBackVoiceOver for iOSVoiceOver for macOS
aria-flowto attribute
MUST convey the presence of the flowto attributenot applicablesupportednonenonenonenonenone
MUST convey that another element flows to the current elementnot applicablesupportednonenonenonenonenone
MUST 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.not applicablepartial (2/3)partialnonenonenonenone
MUST 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.not applicablepartial (2/3)nonenonenonenonenone

* means that some support is hidden behind settings

Detailed support results by expectation

aria-flowto attribute: The screen reader MUST 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.

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
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
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: The screen reader MUST 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
VoiceOver for iOSGoogle Chrome (ios)unknown-More information
VoiceOver for macOSGoogle Chromeunknown-More information
VoiceOver for macOSFirefox (desktop)unknown-More information
Back to top

aria-flowto attribute: The screen reader MUST 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.

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
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
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: The screen reader MUST 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
VoiceOver for iOSGoogle Chrome (ios)unknown-More information
VoiceOver for macOSGoogle Chromeunknown-More information
VoiceOver for macOSFirefox (desktop)unknown-More information
Back to top

aria-flowto attribute: The screen reader MUST 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.

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
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
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: The screen reader MUST 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
VoiceOver for iOSGoogle Chrome (ios)unknown-More information
VoiceOver for macOSGoogle Chromeunknown-More information
VoiceOver for macOSFirefox (desktop)unknown-More information
Back to top

aria-flowto attribute: The screen reader MUST 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.

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
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
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: The screen reader MUST 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
VoiceOver for iOSGoogle Chrome (ios)unknown-More information
VoiceOver for macOSGoogle Chromeunknown-More information
VoiceOver for macOSFirefox (desktop)unknown-More information
Back to top

Dates and Versions

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
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

History

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