Navigation
Logical Tab Order
WAI Definition (Checkpoint 9.4)
Create a logical tab order through links, form controls, and objects.
For example, in HTML, specify tab order via the "tabindex" attribute or ensure a logical page design.
Explanation
In order to enable the user to use the "tab" key for navigation, you must form a logical order for the tabbing. Normally, the "tab" key will start at the top and works its way down the page. However, there are instances where the "tab" key would require guidance as to which location to jump to next, such as in form fields (see the example below).
Rationale
Many users are unable to use a mouse for navigation. A logical tab order offers the user ease of navigation throughout the site using the "tab" key.
Technique
In the next example, a logical tab order is specified among elements (in order, "field2", "field1", "submit") with "tabindex".
Example
<form action="submit" method="post">
<label for="field1">Field1:</label>
<input tabindex="2" type="text" name="field1" id="field1">
<label for="field2">Field2:</label2>
<input tabindex="1" type="text" name="field2">
<input tabindex="3" type="submit" name="submit">
</form>
Validation
Test
Use the "tab" key to navigate the site.
Success Criteria
Ensure that the movement to each location follows a logical order.