What is the Tab Order (Keyboard focus navigation)

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 build by adding elements in this order of precedence:

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)

You can jump for one element to another in the tab order via a skip link.





Discover More
Devtool Track Active Element
HTML - Focus (Active element) (and Blur)

The focus is the interactive element actually active on a HTML dom document through: a mouse click (if you mouse click on a text input field, ready to begin typing, this element will come into focus)...
HTML - Interactive Content (User Interaction) (Element)

Interactive element are interactive elements that are specifically intended for user interaction. (if the controls attribute is present) (if the usemap attribute is present) (if...
HTML - tabindex attribute (tab order)

tabindex is a global attribute that specifies whether: the element represents an element that is is focusable (that is, that you can click or navigate with tab or an element which is part of the sequence...
Skip Link

A skip link is a anchor link that permits to jump in the tab order to: an element or from one element to another The scroll is created by a anchor with a fragment uri. With bootstrap 5 and the...
Source, Visual and Focus Order

This article is the different type of order of HTML element. There is three kind of order: the source order the visual order: the order in which they are read the tab focus order: the order in...
What is the source order ?

The source order is the order of the element in the html document from top to bottom. Because this is the default visual and keyboard navigation order, correct source order is important for: speech,...



Share this page:
Follow us:
Task Runner