Logical Tab order

Back to the a11y checklist

Why it matters

Users navigating with a keyboard or screen reader need to move around the page in a predictable way. Sometimes, a logical order will be obvious to front end teams on a simple page layout, but in more complex ones, work with your Designers to define and identify the tab order. When you want to modify the tab order you can use the tabindex HTML attribute to explicitly set an element’s tab position. tabindex can be applied to any element — although it is not necessarily useful on every element — and takes a range of integer values. Using tabindex, you can specify an explicit order for focusable page elements, insert an otherwise unfocusable element into the tab order, and remove elements from the tab order.

WCAG 2.0 reference: 2.4.3 Focus Order, 1.3.2 Meaningful Sequence

Example 1

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

Example 2

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.

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

How to check for this

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.
3. Accessibility Insights Chrome extension

Collaborators

• Designers identify and define the tab order

Resources

• Introduction to Focus
• Keyboard accessibility tabindex
• Using tabindex