Making Accessible Websites for the United Nations


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.


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).


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.


In the next example, a logical tab order is specified among elements (in order, "field2", "field1", "submit") with "tabindex".


<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">



Use the "tab" key to navigate the site.

Success Criteria

Ensure that the movement to each location follows a logical order.