ARIA Flowto Controls The Reading Order Of A Page

This post originally appeared on the Yahoo! Accessibility blog.

Designing a good reading order makes sites more efficient for users of screen readers. The reading order is controlled by the actual physical order of elements in the DOM, rather than the visual presentation.

Screenshot of Yahoo! home page showing the order of modulesThe order of elements in a page

Test the reading order of your page by turning off CSS. As a general rule, place more important content higher in the DOM order so it can be quickly accessed by users of screen readers. You can use the Web Developer Toolbar to quickly enable/disable CSS.

Use the Web Developer to turn of CSSdisable CSS with Web Developer Toolbar

Use ARIA to modify the page flow

Use aria-flowto to define what part of a page a screen reader should visit. The following example would skip div#tv and continue to div#stock.


<div></div>
<div id="tv"></div>
<div id="stock"></div>

How aria-flowto works

Aria-flowto establishes the recommended reading order of content, so that the an assistive may overriding the default of reading in document order to its user. Aria-flowto could be used to control the reading order of a page. This is can be helpful in applications like the Yahoo! homepage where users can explicitly control the reading order.

two screenshots of the Yahoo! home page with modules reorderedButtons allow modules to be reordered

This screenshot shows the top news module in different locations. This is controlled by the outlined buttons.

Example

If your browser supports the aria-flowto attribute you should see move from the first div to the third div and back to the second div via the tab key.

This is the first div. You should skip to the third div via your tab key
This is the second div. you should skip this when tabbing from the third div.
This is the third div. You should skip to this div from the first one and hitting tab will take you to the second div.

Key Points

  • Screen readers read the DOM, not the painted/rendered UI
  • Check reading order via toggling off CSS