Following Logical Tab Order
The tab order is important for proper navigation through a keyboard interface. The keyboard tab order must be coordinated with the structure of the webpage. In Western cultures, this usually means from left to right, top to bottom. In comparison, a sequential tab order would force users to tab through all controls (could be hundreds) before the one that they want. If the tab order is implemented correctly a webpage will read similar to a book to a keyboard user.
Best Practices
1. The keyboard navigation order must be logical and intuitive.
2. The tab order should follow the visual flow of the page: header first, then main navigation, then page navigation (if present), and finally the footer.
3. Adjusting tab order can be done using the tabindex attribute:
tabindex= “0”
allows elements besides links and form elements to receive keyboard focus. It does not change the tab order, but places the element in the logical navigation flow, as if it were a link on the page.
tabindex= “-1”
removes the element from the navigation sequence, but can be made focusable using javascript.
No other tabinex values can be used!
Creating/changing tab order via code
<label>
First in tab index
<input type =”text”>
</label>
<div tabindex =”0”>
Second in tab order: tabbable because tabindex was added
</div>
<div>
Not focusable because no tabindex is added to the div
</div>
<button>
Third in tab order
</button>
Tab Order
The image below shows the correct reading order on a page that has multiple navigation links on the side panels.
