9.4 Create a logical tab order

When you use the Tab key, the cursor's movement should follow the structural order of the page elements so the user can select and activate them. It should be possible to use the Tab key to make the cursor jump between form fields, buttons and other controls, links, pop-out menus or more complex interactive features.

You specify a tabbing order with the tabindex attribute. These elements support the tabindex attribute: <a>, <area>, <button>, <input>, <object>, <select> and <textarea>.

For example, you can set the tabbing order for a form:

<form action="submit" method="post">
<input tabindex="2v type="text" name="lastname">
<input tabindex="1" type="text" name="firstname">
<input tabindex="3" type="submit” name="submit">
</form>

Here, anyone who uses the keyboard to navigate will enter their first name before their last name.

If you use the tabindex for links, you skip from link to link or even skim over a repetitive opening section of a page without relying upon the mouse.