Using aria-flowto

Status

New technique.
Advisory technique: there is not enough accessibility support anywhere for this to be sufficient.
Surveyed by TF 25 June 2012
Discussed by TF 25 June 2012
Surveyed by TF 2 July 2012
http://www.w3.org/2012/07/02-html-techs-tf-minutes Discussed by TF 2 July 2012]
Ready for WG review
Survey by WG 14 Jan 2013
WG feedback: postpone work on this until there is more UA support and we have more compelling use cases

Applicability

HTML (or other ARIA supporting technologies).

WCAG references

content-structure-separation-sequence: SC 1.3.2 Meaningful Sequence (sufficient)

User Agent and Assistive Technology Support Notes [To be published separately]

What is the support status in AT?

The aria-flowto property is not listed in the JAWS ARIA Support documentation for JAWS 12. There is a UI behaviour connected with the ‘+’ key but doesn’t seem complete. Pressing the key will not show any existing flow ‘relationships’ or give the user a choice to follow a flow.
Taking a glance at aria-flowto, Sept 29, 2011 indicates JAWS 12 support, but buggy
ARIA Flowto, July 12, 2011 indidates that FireFox 5 and JAWS 12 announces flowto but that is all, and no support in IE9.
Safari 5.1.2 / VoiceOver 3: no support.
Firefox 12 / JAWS 12: States the ‘flows to’ and ‘flows from’ relationships. JAWS doesn’t announce or give any clue to the end user what these relationships were nor there was any indication of how to interact with or select/choose a ‘flow’. When using the virtual cursor and navigating the content it would be read as if the ‘aria-flowto’ property wasn’t there.

Description

The objective of this technique is to specify alternate reading orders for the content by use of the aria-flowto property. When the aria-flowto property of an element has a single value, assistive technologies may forego the normal document reading order and go to the element whose id is equal to that value. When the aria-flowto property has multiple ids, assistive technologies may present the targeted elements to the user as alternatives, identified by the names of the target elements, for the next content in the reading order.

Logical reading orders of the page content are identified by following the chains of content created by combining the normal reading order with the paths indicated by the aria-flowto properties. All such paths are potential reading orders of the content, and all present the content in a meaningful sequence.

Like all ARIA properties, aria-flowto is only used by assistive technologies and is ignored by the browser. The browser implements the tab order of interactive elements and does not use the alternate reading orders specified by aria-flowto to control the tab order. Per Success Criterion 2.4.3, it is important that the tab order is consistent with one of the logical reading orders for the page. See Understanding 2.4.3 for ways to implement logical focus order.

Examples

Example 1: Main article and secondary articles

A page contains a main article and several secondary articles. For page layout reasons, the default reading order does not start with the main article. aria-flowto is used to suggest a reading order that starts with the main article, then leads to the secondary articles.

  <h1 aria-flowto="main">The Daily Planet</h1>
  
  <h2> Weather</h2>
  <div id="weather" title="Weather" aria-flowto="sports">
    <p> The weather will be what it will be, if you want a forecast look out your window and have a guess. That's what the pros do!
    </p>
  </div>
      
  <h2> Election results</h2>
  <div id="main" title="Election Results"  aria-flowto="weather">
    <p> Whoever you vote for government wins. ANOK 1984</p>
  </div>

  <h2>Sports</h2>      
  <div id="sports" title="Sports">
    <p>Today there will be lots of goals scored, tennis played and footballs kicked.</p>
  </div>

This example is shown in operation in the working example of Main article and secondary articles.

Example 2: Main article and secondary articles using the `article` element

An HTML5 page contains a main article and several secondary articles. For page layout reasons, the default reading order does not start with the main article. aria-flowto is used to suggest a reading order that starts with the main article, then leads to the secondary articles.

  <h1 aria-flowto="main">The Daily Planet</h1>
  
  <h2> Weather</h2>
  <article id="weather" title="Weather" aria-flowto="sports">
    <p> The weather will be what it will be, if you want a forecast look out your window and have a guess. That's what the pros do!</p>
  </article>
  
  <h2> Election results</h2
  <article id="main" title="Election Results"  aria-flowto="weather">
    <p> Whoever you vote for government wins. ANOK 1984</p>
  </article>
  
  <h2>Sports</h2>
  <article id="sports" title="Sports">
    <p>Today there will be lots of goals scored, tennis played and footballs kicked</p>
  </article>

This example is shown in operation in the working example of Main article and secondary articles using the article element.

Example 3: Choice of articles

A variation of Example 2 doesn't consider any of the articles as the main article, but give the user a choice to proceed to any of the articles on the page.

  <h1 aria-flowto="election sports weather">The Daily Planet</h1>
  
  <article id="weather" title="Weather">
   The forecast for today will be ...
  </article>
  
  <article id="election" title="Election Results">
   ....
  </article>
  
  <article id="sports" title="Sports">
   ...
  </article>

Resources

Related Techniques

Tests

Procedure

For every element that has an aria-flowto property, check that the id(s) in the property value refer to elements on the current page.
For every element that has an aria-flowto property, check that the content at each id follows the current element in a logical reading order.

Expected Results

Checks #1 and #2 are true