PF/ARIA/BestPractices/Flowto
Changing the Reading Flow (flowto)
(X)HTML suffers from a number of disadvantages in keyboard navigation today. One such example is the restriction of navigation to the tabbing order. This is a common problem with presentations in office suites where the logical, perceivable, navigation order of a slide may not match the tabbing order. Sighted users may see a logical navigation process (such as visual steps in the process for assembling a lawn mower). This "flow" is not conveyed by the tab order. The user might tab from step 1 and land on step 4. Another problem is the construction of model-based authoring tools on a web page. In a model-based authoring tool, a visual object may provide a number of paths that the user can take, such as a multiplexor, which may have output that logically flows to a number of optional electronic components in a drawing. In Web 2.0, developers are actually creating drawings like this to perform tasks such as visually model a work flow. In this scenario, the user will want to decide which object they will navigate their screen reader or alternate input device to next.
For these reasons, ARIA provides a relationship property, called flowto, for the author to provide an alternative navigation order(s),enabling an assistive technology to exchange the normal navigation flow for one that is logical for people with disabilities. flowto establishes the recommended reading order of content, overriding the default of reading in document order.
Consider the first case of changing a basic reading flow to circumvent(X)HTML tabbing. A good example of this is a logical reading flow in a portal with landmarks. In the future, the user may wish to change the reading flow based on the order of priority with which they navigate a personalized web application like MySpace or MyYahoo. In the following example, the navigation would follow the order of "Top News Stories", "television listings", "stock quotes", and "messages from friends" by following (X)HTML document reading order. However, the author or end user may determine that the main content is most important, followed by "stock quotes", "messages from friends", and then "TV listings."
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"
xmlns:wairole="http://www.w3.org/2005/01/wai-rdf/GUIRoleTaxonomy#"
xmlns:aria="http://www.w3.org/2005/07/aaa">
...
<div role="main content" title="Top News Stories" id="main" aria:flowto="stock">
</div>
<div role="secondary" title="television listings" id="tv">
</div>
<div role="secondary" title="stock quotes" id="stock" aria:flowto="messages">
</div>
<div role="secondary" title="messages from friends id="messages" aria:flowto="tv">
</div>
The second use case is such that the web developer may wish to circumvent the flow by branching to multiple paths in the web page, requiring the assistive technology to present a collection of options where the user could go next. This is important for workflows or business process management applications as shown in this Process Designer Tool. More of these applications are becoming web based, and a vehicle is required to tell the user how to get through the work flow. The flowto property takes multiple idrefs, allowing the author to define each object the user could flow to. To implement this techique do the following.
Step 1: Make each objects in the work flow accessible
This will require assigning a title or ARIA label for each object and a unique HTML id. Also, if the html element is repurposed assign it an ARIA role.
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"
xmlns:wairole="http://www.w3.org/2005/01/wai-rdf/GUIRoleTaxonomy#"
xmlns:aria="http://www.w3.org/2005/07/aaa">
...
<img src="foo.jpg" id="331" title="What is the Invoice Value?">
<img src="foo.jpg" id="333" title="Finance Manager Approval">
<img src="foo.jpg" id="334" title="Sales Manager Approval">
...
Step 2: Assign the flowto properties
For each visual object that will flow to one or more other objects assign the flowto property the list of IDs to which it flows.
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"
xmlns:wairole="http://www.w3.org/2005/01/wai-rdf/GUIRoleTaxonomy#"
xmlns:aria="http://www.w3.org/2005/07/aaa">
...
<img src="foo.jpg" id="331" title="What is the Invoice Value?" aria:flowto="333 334">
<img src="foo.jpg" id="333" title="Finance Manager Approval">
<img src="foo.jpg" id="334" title="Sales Manager Approval">
...
Step 3 Make sure visual objects are keyboard accessible
Use tabindex to set allow objects to receive focus. Actually setting focus to them may be performed by an assistive technology, such as an alternative input device. This example places each drawing object in document order with respect to the tab sequence.
<img src="foo.jpg" id="331" title="What is the Invoice Value?" aria:flowto="333 334" tabindex="0"> <img src="foo.jpg" id="333" title="Finance Manager Approval" tabindex="0"> <img src="foo.jpg" id="334" title="Sales Manager Approval" tabindex="0"> ...
When an assistive technology encounters "What is the Invoice Value?," it will know to tell the user that they may choose to navigate either to the "Financial Manager Approval" or to the "Sales Manager Approval" object. The options may be provided through a menu for the to What is the Invoice Valueto object by the assistive technology. After a choice is made, then the AT can then move focus to the target object; or in the case of a screen reader, it may just move the user to that location in the screen reader's virtual buffer.
Note: ARIA does not specify backward flowto properties for the same reason that we do not have the reverse of relationships like labelledby. The author may incorrectly do the reversal, creating a whole set of new problems. Rather, the task of the reversal relationships may be handled by the user agent through its accessibility API mapping or in the assistive technology itself.