TAB ORDER GUIDELINES
Overview
Keyboard accessibility is one of the most important aspects of web accessibility. Not all users navigate the page with the mouse or a trackpad; some users only rely on keyboard to navigate. Many users with motor disabilities rely on a keyboard. Assistive technology users will also typically use a keyboard for navigation. In addition to traditional keyboards, some users may use a modified keyboards or other hardware that mimics the functionality of a keyboard.
...
Normal flow in the keyboard tab order will be broken when tabbing through the interactive elements.
If content is dynamically added in between of elements with positive tabindex, it will interfere with the normal flow of tabbing.
General Guidelines
The best practices for keyboard tab order should include the following:
Tab order should have a logical reading order, similar to a book. It should be from left to right and top to bottom.
As you are tabbing through a website, there must be a visible indication of where the tab focus is at.
When using the tabindex to adjust the tab order, use tabindex= "0" or tabindex= "-1" ONLY
Tabindex values of 1 or higher must NOT be used.
Example
The image below shows the correct reading order on a page that has multiple navigation links on the side panels.
FOCUS ORDER GUIDELINES
Keyboard users should be able to navigate content in a correct order.
Elements should receive focus in an order that preserves meaning.
Ensure that when users navigate sequentially through content, they encounter information in an order that is consistent with the meaning of the content and can be operated from the keyboard.
This reduces confusion by letting users form a consistent mental model of the content.
There may be different orders that reflect logical relationships in the content. For example, moving through components in a table one row at a time or one column at a time both reflect the logical relationships in the content.
The focus order may not be identical to the programmatically determined reading order as long as the user can still understand and operate the web page.
For example, a screen reader user interacts with the programmatically determined reading order, while a sighted keyboard user interacts with the visual presentation of the Web page. Care should be taken so that the focus order makes sense to both of these sets of users and does not appear to either of them to jump around randomly.
For example:
Focusable components need to receive focus in an order that preserves meaning and operability only when navigation sequences affect meaning and operability.
In those cases where it is required, there may be more than one order that will preserve meaning and operability.
If there is more than one order that preserves meaning and operability, only one of them needs to be provided.
Please see more detailed information on how to comply with this guideline.