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

Assertions are conditions that must be met for the feature to be considered as "supported". Only "MUST" assertions need to be met for minimal "support". "SHOULD" and "MAY" assertions indicates support that goes above and beyond. Note that there is not an explicit standard that dictates these assertions, and as such, they are likely opinionated. Minimal support reflects that the structure, relationships, and functionality of the feature are conveyed and operable by assistive technology rather than minimal conformance to any specific WCAG SC. As such, a feature might not meet all "MUST" assertions but still be usable (potentially frustratingly so).

Assertion support summary by type of assertion
MUSTSHOULDMAY
partial (10/36)nana

Assertion support summary by assertion

FeatureAssertionSupportHas failing tests
aria-flowto attributeThe screen reader MUST convey the presence of the flowto attributepartial (3/9)Yes
aria-flowto attributeThe screen reader MUST convey that another element flows to the current elementpartial (3/9)Yes
aria-flowto attributeThe 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.partial (2/9)Yes
aria-flowto attributeThe 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.partial (2/9)Yes

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.

This assertion is from the aria-flowto attribute feature.

ATBrowserHas SupportOutputAction
Dragon Naturally SpeakingInternet Explorernot applicable-More information
JAWS 2018.1811.2Google Chrome 74yes
  • Result: (pass)
    • command: Down arrow
    • 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
JAWS 2018.1811.2Internet Explorer 11.134yes
  • Result: (pass)
    • command: Down arrow
    • 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
JAWS 2018.1811.2Firefox (desktop) 66yes
  • Result: (pass)
    • command: Down arrow
    • 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
Narrator 1809Microsoft Edge 44.17763none
  • Result: (fail)
    • command: Down arrow
    • Output: (does not convey presence of aria-flowto)
  • Result: (fail)
    • command: Narrator + right arrow
    • Output: (does not convey presence of aria-flowto)
More information
NVDA 2018.1808.10Google Chrome 74none
  • Result: (fail)
    • command: down arrow
    • Output: (does not convey presence of aria-flowto)
More information
NVDA 2018.3.2Firefox (desktop) 66none
  • Result: (fail)
    • command: down arrow
    • Output: (does not convey presence of aria-flowto)
More information
TalkBackGoogle Chrome (android)unknown-More information
VoiceOver for iOS 12.2Safari (iOS) 12.2none
  • Result: (fail)
    • command: Swipe Right
    • Output: (does not convey presence of aria-flowto)
More information
VoiceOver for macOS 10.14.4Safari (macOS) 12.1none
  • Result: (fail)
    • command: VO + Right arrow
    • 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 SpeakingFirefox (desktop)not applicable-More information
Dragon Naturally SpeakingGoogle Chromenot 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 (desktop)unknown-More information
VoiceOver for iOSGoogle Chrome (ios)unknown-More information
VoiceOver for macOSGoogle Chromeunknown-More information
VoiceOver for macOSFirefox (desktop)unknown-More information

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.

This assertion is from the aria-flowto attribute feature.

ATBrowserHas SupportOutputAction
Dragon Naturally SpeakingInternet Explorernot applicable-More information
JAWS 2018.1811.2Google Chrome 74yes
  • Result: (pass)
    • command: Down arrow
    • Output: announces "has flow from" if another element references the current element.
More information
JAWS 2018.1811.2Internet Explorer 11.134yes
  • Result: (pass)
    • command: Down arrow
    • Output: announces "has flow from" if another element references the current element.
More information
JAWS 2018.1811.2Firefox (desktop) 66yes
  • Result: (pass)
    • command: Down arrow
    • Output: announces "has flow from" if another element references the current element.
More information
Narrator 1809Microsoft Edge 44.17763none
  • Result: (fail)
    • command: Down arrow
    • Output: (does not convey presence of aria-flowto)
  • Result: (fail)
    • command: Narrator + right arrow
    • Output: (does not convey presence of aria-flowto)
More information
NVDA 2018.1808.10Google Chrome 74none
  • Result: (fail)
    • command: down arrow
    • Output: (does not convey presence of aria-flowto)
More information
NVDA 2018.3.2Firefox (desktop) 66none
  • Result: (fail)
    • command: down arrow
    • Output: (does not convey presence of aria-flowto)
More information
TalkBackGoogle Chrome (android)unknown-More information
VoiceOver for iOS 12.2Safari (iOS) 12.2none
  • Result: (fail)
    • command: Swipe Right
    • Output: (does not convey presence of aria-flowto)
More information
VoiceOver for macOS 10.14.4Safari (macOS) 12.1none
  • Result: (fail)
    • command: VO + Right arrow
    • 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 SpeakingFirefox (desktop)not applicable-More information
Dragon Naturally SpeakingGoogle Chromenot 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 (desktop)unknown-More information
VoiceOver for iOSGoogle Chrome (ios)unknown-More information
VoiceOver for macOSGoogle Chromeunknown-More information
VoiceOver for macOSFirefox (desktop)unknown-More information

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.

This assertion is from the aria-flowto attribute feature.

ATBrowserHas SupportOutputAction
Dragon Naturally SpeakingInternet Explorernot applicable-More information
JAWS 2018.1811.2Google Chrome 74yes
  • Result: (pass)
    • command: equals sign
    • 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
JAWS 2018.1811.2Internet Explorer 11.134yes
  • Result: (pass)
    • command: equals sign
    • 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
JAWS 2018.1811.2Firefox (desktop) 66partial
  • Result: (partial)
    • command: equals sign
    • 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
Narrator 1809Microsoft Edge 44.17763partial
  • Result: (fail)
    • command: Down arrow
    • Output: (does not let user navigate to any of the targeted elements)
  • Result: (partial)
    • command: Narrator + right arrow
    • Output: (automatically navigates to the first targeted element)
Notes: partial because user was not prompted to follow the alternate reading order.
More information
NVDA 2018.1808.10Google Chrome 74none
  • Result: (fail)
    • command: down arrow
    • Output: (does not let user navigate to any of the targeted elements)
More information
NVDA 2018.3.2Firefox (desktop) 66none
  • Result: (fail)
    • command: down arrow
    • Output: (does not let user navigate to any of the targeted elements)
More information
TalkBackGoogle Chrome (android)unknown-More information
VoiceOver for iOS 12.2Safari (iOS) 12.2none
  • Result: (fail)
    • command: Swipe Right
    • Output: (does not let user navigate to any of the targeted elements)
More information
VoiceOver for macOS 10.14.4Safari (macOS) 12.1none
  • Result: (fail)
    • command: VO + Right arrow
    • 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 SpeakingFirefox (desktop)not applicable-More information
Dragon Naturally SpeakingGoogle Chromenot 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 (desktop)unknown-More information
VoiceOver for iOSGoogle Chrome (ios)unknown-More information
VoiceOver for macOSGoogle Chromeunknown-More information
VoiceOver for macOSFirefox (desktop)unknown-More information

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.

This assertion is from the aria-flowto attribute feature.

ATBrowserHas SupportOutputAction
Dragon Naturally SpeakingInternet Explorernot applicable-More information
JAWS 2018.1811.2Google Chrome 74yes
  • Result: (pass)
    • command: shift + equals sign
    • 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
JAWS 2018.1811.2Internet Explorer 11.134yes
  • Result: (pass)
    • command: shift + equals sign
    • 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
JAWS 2018.1811.2Firefox (desktop) 66partial
  • Result: (partial)
    • command: shift + equals sign
    • 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
Narrator 1809Microsoft Edge 44.17763none
  • Result: (fail)
    • command: Down arrow
    • Output: (does not let user navigate to any of the targeting elements)
  • Result: (fail)
    • command: Narrator + left arrow
    • Output: (does not let user navigate to any of the targeting elements)
More information
NVDA 2018.1808.10Google Chrome 74none
  • Result: (fail)
    • command: down arrow
    • Output: (does not let user navigate to any of the targeting elements)
More information
NVDA 2018.3.2Firefox (desktop) 66none
  • Result: (fail)
    • command: down arrow
    • Output: (does not let user navigate to any of the targeting elements)
More information
TalkBackGoogle Chrome (android)unknown-More information
VoiceOver for iOS 12.2Safari (iOS) 12.2none
  • Result: (fail)
    • command: Swipe Right
    • Output: (does not let user navigate to any of the referencing content)
More information
VoiceOver for macOS 10.14.4Safari (macOS) 12.1none
  • Result: (fail)
    • command: VO + Right arrow
    • 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 SpeakingFirefox (desktop)not applicable-More information
Dragon Naturally SpeakingGoogle Chromenot 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 (desktop)unknown-More information
VoiceOver for iOSGoogle Chrome (ios)unknown-More information
VoiceOver for macOSGoogle Chromeunknown-More information
VoiceOver for macOSFirefox (desktop)unknown-More information

History

  • 2019-05-08 Test created