Technique H4:Creating a logical tab order through links, form controls, and objects
About this Technique
This technique is not referenced from any Understanding document.
This technique applies to HTML and XHTML.
Description
The objective of this technique is to provide a logical tab order when the default tab order does not suffice. Often, 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.
<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.
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.
<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>
Related Resources
No endorsement implied.
Tests
Procedure
- Check if
tabindex
is used - If
tabindex
is used, check that the tab order specified by thetabindex
attributes follows relationships in the content.
Expected Results
- Check #2 is true.