Implementing a logical tab order is an important part of providing your users with a smooth keyboard navigation experience. Screen readers 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, moving from left to right, from the top to the bottom of your page.
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, you should rearrange the elements in the DOM to make the tab order more natural.
If you've used CSS to visually reposition elements, screen reader users will experience a non-sensical 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
Learn more in Control focus with tabindex.
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.