ARIA’s aria-flowto=id allows the developer to change the current reading order. The ID identifies the next element or elements to be read by assistive technology.
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.
At the time of this writting, I’m not sure how well aria-flowto is supported. Using FireFox 5 and JAWS 12, the screen reader does announce “Has Flow To” and Has Flow From”. But that seems to be the extent of the implementation.
Example 1:
This is content 1 div. Reading order should jump to content 3.
This is content 2 div.
This is content 3 div.
Code
<div id="content1" aria-flowto="content3"> This is content 1 div. Reading order should jump to content 3. </div> <div id="content2"> This is content 2 div. </div> <div id="content3"> This is content 3 div. </div>
Example 2:
This is content 1 div. Focus should flow to content 3 and then content 5.
This is content 2 div.
This is content 3 div.
This is content 4 div.
This is content 5 div.
Code
<div id="content1" aria-flowto("content3 content5"> This is content 1 div. Focus should flow to content 3 and then content 5. </div> <div id="content2"> This is content 2 div. </div> <div id="content3"> This is content 3 div. </div> <div id="content4"> This is content 4 div. </div> <div id="content5"> This is content 5 div. </div>
Works With
| Browser | Screen Reader | Results |
|---|---|---|
| IE 9 | JAWS 12 | No |
| FF 5 | JAWS 12 | JAWS announces “Has flow to” and “Has flow from”. |
Standards:
- WCAG 2.0 SC 2.4.3 Focus Order: If a Web page can be navigated sequentially and the navigation sequences affect meaning or operation, focusable components receive focus in an order that preserves meaning and operability. (Level A)
