Ensuring proper tab and read order

Overview

Movement through a web page or application should follow a logical order. It should mirror the visual order of navigation and controls on the page. Users who are navigating by keyboard (e.g., using the tab key) expect to move sequentially from left to right and top to bottom through the focusable elements on the page.

Techniques

When creating web pages be sure the order of items in the source code matches the visual order.

Testing

Testing HTML Web Pages

Try navigating through your web page using keyboard alone. Using the tab key, you should be able to access all links and controls in a predictable order based on their visual position on the page.  The success of this test can also be affected by whether there is sufficient visual indication of focus.

Testing PDF Documents

In Adobe Acrobat Pro, go to View > Tools > Accessibility, and select “Touch Up Reading Order”. This feature provides a visual indication of the approximate order in which content will appear if automatically re-purposed for display on a small screen.

Screen shot of Touch Up Reading Order, which organizes the page into blocks and displays a number on each block indicating the current read order

Generally this order is fairly consistent with the read order for screen readers. However, a more accurate test for screen reader order is to check the tag tree, by going to View > Show/Hide > Navigation Pane > Tags.

Screen shot of PDF tag tree as seen in Adobe Acrobat Pro

With both of these features in Acrobat Pro, you can modify the read order if items are out of sequence.  In Touch Up Reading Order, click the “Show Order Panel” button, then drag the various blocks of content into a logical reading order. The process is the same in the Tag Tree: If any items are out of order, simply drag them to their appropriate place in the tree.

Testing PDF Forms

To test an interactive PDF form, open the form in any desktop PDF reader and move through the form fields by pressing the Tab key. Fields will be highlighted as they receive focus.  If fields are not arranged in the expected sequence, this can be fixed in Adobe Acrobat Pro. Go to View > Tools > Forms > Edit. All form fields will be listed in tab order in a sidebar panel. Simply drag fields to their correct position in the tab order.

screen shot of a form in Adobe Acrobat Pro, with fields listed in incorrect order

References