Tab and read order

When creating web pages be sure the order of items in the source code matches the visual order. To test web pages, try navigating through your web page using the 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.

Understand how to use the HTML tabindex attribute, and avoid using unless it’s needed for a specific use case. Here are the valid values of  tabindex and the function of each:

• 0 – Adds an element to the tab order.  By default in most web browsers, only links, buttons, and form fields are focusable when users press the tab key.  Adding tabindex="0" allows an element that is otherwise non-focusable (e.g., a <div>) to be focusable.
• -1 – Identifies an element that is not part of the tab order by default, but can receive focus dynamically via JavaScript.
• Any positive integer – Specifies the order in which elements should be read. This should be avoided, as it overrides the default, expected tab order of the page and often has unexpected consequences.

In Adobe Acrobat Pro, go to View > Tools > Accessibility, and select “Reading Order.” In the Reading Order window, make sure “Show page content groups” and “Page content order” are selected. 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.

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.

With both of these features in Acrobat Pro, you can modify the read order if items are out of sequence.  In 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.

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.