What is the Tab Order (Keyboard focus navigation)
Table of Contents
About
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
Tab Order Sequence
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”
Modification
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)
Skip Link
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 1) 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>