A logical tab order is important for users to have a smooth keyboard experience. Screen readers and other assistive technologies navigate the page in DOM order. The flow of information should make sense.
How to manually test
To check if your application's tab order is logical, try tabbing through your page. In general, focus should follow reading order, from the top to the bottom of your page. In most languages, reading order moves from left to right. In some, such as Arabic and Hebrew, reading order moves from right to left.
There are two main ideas to keep in mind when assessing your tab order:
- Are the elements in the DOM arranged in a logical order?
- Is offscreen content correctly hidden from navigation?
Notice any jumps in navigation that seem jarring. Also notice any offscreen jumps, where tabbing brings you to content that's not meant to be visible.
Learn more in Keyboard access fundamentals.
How to fix
If the focus order seems wrong, rearrange the elements in the DOM to make the tab order more natural.
Avoid using CSS to visually reposition elements, as assistive technology users will experience a nonsensical navigation. Instead of using CSS, move the element to an earlier position in the DOM.
If offscreen content is still accessible to keyboard controls,
consider removing it using tabindex="-1".
Learn more in Control focus with tabindex.
Resources
Source code for Visual order on the page follows DOM order audit