Making Accessible Websites for the United Nations

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.