Techniques for WCAG 2.0

On this page:

-

# H4: Creating a logical tab order through links, form controls, and objects

## Applicability

HTML and XHTML

This technique relates to:

- Success Criterion 2.4.3 (Focus Order)
  - How to Meet 2.4.3 (Focus Order)
  - Understanding Success Criterion 2.4.3 (Focus Order)

## Description

The objective of this technique is to provide a logical tab order when the default tab order does not suffice. Often, G59: Placing the interactive elements in an order that follows sequences and relationships within the content is sufficient and this technique is not necessary. It can be very easy to introduce usability bugs when setting the tab order explicitly.

In some cases, the author may want to specify a tab order that follows relationships in the content without following the order of the interactive elements in the code. In these cases, an alternative order can be specified using the `tabindex` attribute of the interactive element. The `tabindex` is given a value between 0 and 32767.

When the interactive elements are navigated using the tab key, the elements are given focus in increasing order of the value of their `tabindex` attribute. Elements that have a `tabindex` value higher than zero will receive focus before elements without a `tabindex` or a `tabindex` of 0. After all of the elements with a tabindex higher than 0 have received focus, the rest of the interactive elements are given focus in the order in which they appear in the Web page.

## Examples

### Example 1

A genealogical search form searches for marriage records. The search form includes several input fields for the bride and the groom. The form is marked up using a data table that includes the fields of the groom in the first column and the fields of the bride in the second column. The order in the content is row by row but the author feels it is more logical to navigate the form column by column. This way, all the groom's criteria can be filled in before moving on to the bride's criteria. The `tabindex` attributes of the input fields are used to specify a tab order that navigates column by column.

Example Code:

    <form action="#" method="post">
     <table summary="the first column contains the search criteria
      of the groom, the second column the search criteria of
      of the bride">
     <caption>Search for marriage records</caption>
     <tr>
       <th>Search criteria</th>
       <th>Groom</th>
       <th>Bride</th>
     </tr>
     <tr>
      <th>First name</th>
      <td><input type="text" size="30" value="" name="groomfirst"
          title="First name of the groom" tabindex="1"></td>
      <td><input type="text" size="30" value="" name="bridefirst"
           title="First name of the bride" tabindex="4"></td>
     </tr>
     <tr>
      <th>Last name</th>
      <td><input type="text" size="30" value="" name="groomlast"
          title="Last name of the groom" tabindex="2"></td>
      <td><input type="text" size="30" value="" name="bridelast"
          title="Last name of the bride" tabindex="5"></td>
     </tr>
     <tr>
      <th>Place of birth</th>
      <td><input type="text" size="30" value="" name="groombirth"
          title="Place of birth of the groom" tabindex="3"></td>
      <td><input type="text" size="30" value="" name="bridebirth"
          title="Place of birth of the bride" tabindex="6"></td>
     </tr>
    </table>
    </form>

### Example 2

A Web page contains a search field in the upper right corner. The field is given tabindex="1" so that it will occur first in the tab order, even though it is not first in the content order.

### Example 3

`Tabindex` values need not be sequential nor must they begin with any particular value. The values do not have to be unique. Elements that have identical `tabindex` values are navigated in the order they appear in the character stream. So in the following example, the tab order would be one, three, two, four.

Example Code:

    <a href="" tabindex="1">one</a>
     <a href="" tabindex="2">two</a>
     <a href="" tabindex="1">three</a>
     <a href="" tabindex="2">four</a>

In sections of the content where the tab order follows the content order, it can be less error prone to give all elements the same tabindex value rather than specifying a different number for each element. Then it is easy to rearrange those elements or add new elements and maintain a logical tab order.

Example Code:

     <a href="xxx" tabindex = "1">First link in list</a>
    <a href="xxx" tabindex = "1">Second link in list</a>
    <a href="xxx" tabindex = "1">Link that was added long
      after the original list was created</a>
    <a href="xxx" tabindex = "1">Third link in list</a>
      ...
    <a href="xxx" tabindex = "1">Twentieth link in list</a>

## Resources

Resources are for information purposes only, no endorsement implied.

- Tabbing navigation in the HTML 4.01 specification

## Related Techniques

- G59: Placing the interactive elements in an order that follows sequences and relationships within the content
- F44: Failure of Success Criterion 2.4.3 due to using tabindex to create a tab order that does not preserve meaning and operability
- F85: Failure of Success Criterion 2.4.3 due to using dialogs or menus that are not adjacent to their trigger control in the sequential navigation order

## Tests

### Procedure

1. Check if `tabindex` is used

2. If `tabindex` is used, check that the tab order specified by the `tabindex` attributes follows relationships in the content.

### Expected Results

- Check #2 is true.

- Top
- Contents
- Intro
- Previous: Technique H2
- Next: Technique H24