ARIA Flowto

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

aria-flowto
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)

Comments are closed.