Go to overview: WAI-ARIA techniques with code examples

Using aria-flowto to give users a choice of reading order

Detlev Fischer, (detlev [dot] fischer [ at ] testkreis [dot] de)

Last update: 18 January 2013

This screen reader test is based on the third example in the Using aria-flowto draft technique in the ARIA Techiques section of the WCAG WG Wiki.

A big 'thank you' to @mixolydian for cross-testing and putting me on the right track!

How aria-flowto is supposed to work

Everett Zufelt was taking a glance at aria-flowto about 16 months ago and not much has changed since, it seems. I guess poor support means few real-world examples means no perceived urgency in improving support...

Not sure whether the element carrying the aria-flowto property necessarily needs to be in the tab order to be read (just to be sure, I included tabindex="0" in this example, as proposed in the WAI-ARIA 1.0 Authoring Practices). Searching reveals precious little information about the actual use of aria-flowto right now.

In the example given in the WAI-ARIA 1.0 Authoring Practices, AT is assumed to present a menu to choose one of the options; the items in the menu should come from the accessible name (in this case title attributes) of the elements referenced. So far, this seems to work only in Firefox and JAWS (see test results below).

The JAWS ARIA Support documentation adivses to use the EQUALS Navigation Quick Key ('=') - but JAWS' built-in Navigation Quick Key Documentation (JAWS key & F2) doesn't list it. German users need to us the '´' key which is in the same position as '=' on the QWERTY keyboard. For now, consult some keyboard layout source to check for the right key in your language (it's the key to the left of the delete key).

I am a bit puzzled by the reference to aria-flowfrom in the JAWS ARIA Support documentation - this attribute is no longer mentioned in the ARIA Roles Model, and there is the following explicit statement in WAI-ARIA 1.0 Authoring Practices:

Note: WAI-ARIA does not specify backward flowto properties for the same reason that we do not have the reverse of relationships like labelledby.

Any thoughts or corrections?

If you have anything to add or know of other useful examples, please let me know (detlev.fischer [ at ] testkreis dot de) and I'll update this page. (I know this should really be a blog but it isn't, currently.)

About the aria-flowto example below

In the following example, the h1 heading 'The Daily Planet' has an aria-flowto attribute with three IDs and a tabindex attribute to bring it into the focus order:

<h1 tabindex="0" aria-flowto="election sports weather">

...the aria-flowto attribute values referring to the IDs identifying the three article elements below.

The Daily Planet