What is the Tab Order (Keyboard focus navigation)

The tab order is the order of interactive elements such as:

• links
• and form controls

You can loop through this sequence in the browser by

• going to the address bar (alt+d)
• and pressing the tab key (of the keyboard).

The tab order is also known as:

• the sequential navigation
• the keyboard focus navigation

The selected element in this sequence is known as the the active element and has the focus.

This is one of the three html order with source and visual order

The tab order sequence is the build by adding elements in this order of precedence:

• all elements with tabindex value from 1 to N
• all elements with a tabindex value of 0 in document source order
• all other interactive element on the page that have not a tabindex=“-1”

You can modify the tab order with the tabindex attribute

You can:

• add an element (tabindex>=0)
• delete an element (tabindex=“-1”)
• and modify the position of element (tabindex)

You can jump for one element to another in the tab order via a scroll created by a anchor with a fragment uri.

This type of link are called skip link.

Example: With bootstrap 5 and the visually-hidden-focusable ¹⁾ class (the control becomes visible once focused).

• If the below code is at the top of the html document
• If you focus into the address bar with the keyboard shortcut alt+d
• and press the tab key (once for chrome, more for firefox), you would see the two below skip link

<div class="visually-hidden-focusable">
  <div class="container-xl">
    <a class="d-inline-flex p-2 m-1" href="#content">Skip to main content</a>
    <a class="d-none d-md-inline-flex p-2 m-1" href="#nav">Skip to docs navigation</a>
  </div>
</div>