HTML Focus and Tabbing Order: Managing User Navigation

What is focus

When a web page featuring several links or several form controls loads, you may have noticed that you are able to use your Tab key to move between those elements (or Shift+Tab to move backward through elements). As you move between them, the web browser tends to add some type of border or highlighting to that element (be it a link or a form control). This is known as focus .

If you want to control the order in which elements can gain focus, you can use the tabindex attribute to give that element a number between 0 and 32767, which becomes part of the tabbing order. Every time the user presses the Tab key, the focus moves to the element with the next highest tabbing order (and again, Shift+Tab moves focus in reverse order).

The following elements can carry a tabindex attribute:

<span class="pln">
</span><span class="tag">&lt;a&gt;</span><span class="pln"> </span><span class="tag">&lt;area&gt;</span><span class="pln"> </span><span class="tag">&lt;button&gt;</span><span class="pln"> </span><span class="tag">&lt;input&gt;</span><span class="pln"> </span><span class="tag">&lt;object&gt;</span><span class="pln"> </span><span class="tag">&lt;select&gt;</span><span class="pln"> </span><span class="tag">&lt;textarea&gt;</span><span class="pln">
</span>

<span class="pln">

</span><span class="tag">&lt;form</span><span class="pln"> </span><span class="atn">action</span><span class="pun">=</span><span class="atv">"http://www.atnyla.com/tabbing.php"</span><span class="pln"> </span><span class="atn">method</span><span class="pun">=</span><span class="atv">"get"</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"frmTabExample"</span><span class="pln"> </span><span class="tag">&gt;</span><span class="pln">
	</span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"checkbox"</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"chkNumber"</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"1"</span><span class="pln"> </span><span class="atn">tabindex</span><span class="pun">=</span><span class="atv">"3"</span><span class="tag">&gt;</span><span class="pln"> Semester One </span><span class="tag">&lt;br&gt;</span><span class="pln">
	</span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"checkbox"</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"chkNumber"</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"2"</span><span class="pln"> </span><span class="atn">tabindex</span><span class="pun">=</span><span class="atv">"7"</span><span class="tag">&gt;</span><span class="pln"> Semester Two </span><span class="tag">&lt;br&gt;</span><span class="pln">
	</span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"checkbox"</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"chkNumber"</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"3"</span><span class="pln"> </span><span class="atn">tabindex</span><span class="pun">=</span><span class="atv">"4"</span><span class="tag">&gt;</span><span class="pln"> Semester Three </span><span class="tag">&lt;br&gt;</span><span class="pln">
	</span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"checkbox"</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"chkNumber"</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"4"</span><span class="pln"> </span><span class="atn">tabindex</span><span class="pun">=</span><span class="atv">"1"</span><span class="tag">&gt;</span><span class="pln"> Semester Four </span><span class="tag">&lt;br&gt;</span><span class="pln">
	</span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"checkbox"</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"chkNumber"</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"5"</span><span class="pln"> </span><span class="atn">tabindex</span><span class="pun">=</span><span class="atv">"9"</span><span class="tag">&gt;</span><span class="pln"> Semester Five </span><span class="tag">&lt;br&gt;</span><span class="pln">
	</span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"checkbox"</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"chkNumber"</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"6"</span><span class="pln"> </span><span class="atn">tabindex</span><span class="pun">=</span><span class="atv">"6"</span><span class="tag">&gt;</span><span class="pln"> Semester Six </span><span class="tag">&lt;br&gt;</span><span class="pln">
	</span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"checkbox"</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"chkNumber"</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"7"</span><span class="pln"> </span><span class="atn">tabindex</span><span class="pun">=</span><span class="atv">"10"</span><span class="tag">&gt;</span><span class="pln"> Semester Seven </span><span class="tag">&lt;br&gt;</span><span class="pln">
	</span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"checkbox"</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"chkNumber"</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"8"</span><span class="pln"> </span><span class="atn">tabindex</span><span class="pun">=</span><span class="atv">"2"</span><span class="tag">&gt;</span><span class="pln"> Semester Eight </span><span class="tag">&lt;br&gt;</span><span class="pln">
	</span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"checkbox"</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"chkNumber"</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"9"</span><span class="pln"> </span><span class="atn">tabindex</span><span class="pun">=</span><span class="atv">"8"</span><span class="tag">&gt;</span><span class="pln"> SemesterNine </span><span class="tag">&lt;br&gt;</span><span class="pln">
	</span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"checkbox"</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"chkNumber"</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"10"</span><span class="pln"> </span><span class="atn">tabindex</span><span class="pun">=</span><span class="atv">"5"</span><span class="tag">&gt;</span><span class="pln"> Semester Ten </span><span class="tag">&lt;br&gt;</span><span class="pln">
	</span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"submit"</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"Submit"</span><span class="tag">&gt;</span><span class="pln">
</span><span class="tag">&lt;/form&gt;</span><span class="pln">

</span>

In this example, the checkboxes receive focus in the following order: 4, 8, 1, 3, 10, 6, 2, 9, 5, 7

Elements that could gain focus but do not have a tabindex attribute are automatically given a value of 0 ; therefore, when you specify a tabindex value, it should be 1 or higher, rather than 0 .

If two elements have the same value for a tabindex attribute, they will be navigated in the order in which they appear in the document.

Live Preview