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.
The 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.
disable 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.
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.
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.
- Screen readers read the DOM, not the painted/rendered UI
- Check reading order via toggling off CSS