HTML and XHTML
This technique relates to:
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.
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> 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.
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 are for information purposes only, no endorsement implied.
Check if tabindex is used
If tabindex is used, check that the tab order specified by the
tabindex attributes follows relationships in the content.
Check #2 is true.