Tab Order

Summary

Ensure all form and scripted controls can be reached and their tab order matches their logical sequence in the content.

Techniques

Ensure there is a logical tab order. [[WCAG-2.4.3]]

Example

Example 1 — Two-column form

The following example shows part of a table layout used to position shipping and billing addresses side by side. The tabindex attribute is used to ensure a logical flow from form field to form field.

<table>
   <tr>
      <td>
         <span id="shipping">Shipping Address</span>
      </td>
      <td>
         <span id="billing">Billing Address</span>
         <label>
            <input type="checkbox" id="bill-sameas" tabindex="8"/>
            Use shipping address for billing
         </label>
      </td>
   </tr>
   <tr>
      <td>
         <span class="label" id="str">Street</span>
         <input type="text" id="ship-street"
            aria-labelledby="shipping str" tabindex="1"/>
      </td>
      <td>
         <span class="label">Street</span>
         <input type="text" id="bill-street"
            aria-labelledby="billing str" tabindex="9"/>
      </td>
   </tr>
   <tr>
      <td>
         <span class="label" id="city">City</span>
         <input type="text" id="ship-city"
            aria-labelledby="shipping city" tabindex="2"/>
      </td>
      <td>
         <span class="label">City</span>
         <input type="text" id="bill-city"
            aria-labelledby="billing city" tabindex="10"/>
      </td>
   </tr>
   …
</table>

Example 2 — Adding a custom control to the tab order

The following example shows the tabindex attribute set to 0 to include a scripted image button in the tab order.

<img src="controls/start.png"
    id="start"
    role="button"
    tabindex="0"
    alt="Start"/>

Example 3 — Using a negative tab order value for a modal dialog

The following example shows the tabindex attribute set to -1 to prevent users from tabbing to a pop-up dialog box until it is opened by script.

<div role="dialog" aria-modal="true" aria-label="Results"
     tabindex="-1" >
   …
</div>

Explanation

The keyboard tab button provides a shortcut to move through interactive elements like hyperlinks, scripted controls, and forms. The sequence in which these elements take focus as a user presses the tab key is called the tab order.

By default, native HTML controls (e.g., a, button, input) receive tab focus according to the order in which they are included in the markup. While this is often sufficient to provide a meaningful tab order, complex layouts and the scripting of custom controls can cause ordering problems.

For example, table layouts are sometimes used to lay out forms so that they appear to be two side-by-side columns (see Example 1). In this case, tabbing from one field to the next will jump the user between the two columns (i.e., from one cell to the next within each row) instead of allowing them to move down one column before starting the next.

Similarly, when scripted controls are created, they need to be explicitly added to the tab order otherwise browsers and assistive technologies will not provide access to the element through the tab key.

In these cases, the tabindex attribute is used to change the default tab order of elements, or to add an element to the tab order. The value of the attribute must be one of the following:

-1 — The value -1 is used to exclude an element from the tab order. This value is most often used if an element will be made focusable by script. Although any negative number can be used, the effect is the same (i.e., no precedence or sequence imparted).
0 — The value 0 is used to place an element into the tab order according to its position in the markup. This value is most often used to add scripted controls to the tab order as it avoids having to create a numbered sequence for all the focusable elements.
any positive number — If a positive number is used, the number indicates the sequence in which to move to the control. The number 1 indicates the first control in the tab order, 2 the second, and so on. Gaps in the sequence are ignored (i.e., focus moves from 1 to 10 if there are no values between). After moving through all sequenced controls, all controls without an explicit tabindex value are iterated.

In general, it is best to ensure that focusable elements are in the correct order in the markup so that positive tabindex values do not have to be used. Although it may seem like creating a sequence is a simple task, doing so often has unexpected consequences. For example, if a tab sequence needs to be created for form fields at the end of the file, unless every focusable element before the form gets a tabindex value (e.g., all hyperlinks), users will be taken to the form the first time they press the tab key. Maintaining long sequences of reordered focusable elements is also cumbersome.

Summary

Techniques

Example

Explanation

Related Links