Recently a colleague in the Drupal community asked me if I could provide any insight into the workings of the aria-flowto property. Knowing very little about this property I took a look at the WAI-ARIA spec, which reads:

aria-flowto (property)

Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion, allows assistive technology to override the general default of reading in document source order.

When aria-flowto has a single IDREF, it allows assistive technologies to, at the user's request, forego normal document reading order and go to the targeted object. However, when aria-flowto is provided with multiple IDREFS, assistive technologies SHOULD present the referenced elements as path choices.

In the case of one or more IDREFS, user agents or assistive technologies SHOULD give the user the option of navigating to any of the targeted elements. The name of the path can be determined by the name of the target element of the aria-flowto attribute. accessibility APIs can provide named path relationships. ( http://www.w3.org/TR/wai-aria/states_and_properties#aria-flowto )

On the surface this seems like a potentially useful property. Imagine being on a site where for design reasons it is necessary to insert complementary content within the main page content (this happens a great deal on news sites).

For example:

<article id="content">
Beginning of the main article on the page...

<section id="related-stories">
Related stories links.
</section>

Main content continues...

</article>

It does seem like it would be useful to provide a mechanism by which a user can be informed of an option to proceed to a different section of the page, to continue reading in the logical flow. The spec appears to cover all that is required:

1. Identify options to the user
2. Allow the user to select an option
3. Navigate the user to the selected path

Practicality

A problem has been identified, and a spec exists to address the problem. There is at least one implementation that I have tested, by using JAWS 12 and above, using the following example markup:

<p id="p1" aria-flowto="p2 p3">This is the first paragraph</p>

<p id="p2">This is the second paragraph</p>

<p id="p3" title="Continue reading">This is the third paragraph</p>

After reading the first paragraph JAWS reads "has flows to".

After reading the third paragraph JAWS reads "has flow from".

Pressing '=' (equals) on the first paragraph provides a list of options. The first option in the list has no label, as there is no property from which the user agent (Firefox in my testing) can obtain an accessible name for the element. The second option uses the title attribute of p3 as the label for the option. Selecting either option advances the virtual cursor to that part of the page.

Pressing 'shift + =' (shift + equals) on the third paragraph automatically moved the virtual cursor to p1.

Note: it is worth noting that when I e-mailed Freedom Scientific (JAWS) technical support about this issue that the technician did not immediately know the answer to which keys were to be used for this function, making me think that it isn't something that is currently practically reliable, as few if any users know of its existence.

Conclusion

It is best to build pages in a clean semantic structure. As much as it is possible adding sections of complementary content within your main article content is a poor design decision. If, however, you are faced with a situation where this is necessary, using the aria-flowto property may improve the user experience for some of your site's visitors.