This page has been altered to accommodate the changes needed to demonstrate the effects of manually changing multiple TABINDEX values.
Page Content
Adjust Tab Order
This demo shows how you could use the TABINDEX attribute to alter the tab order within a form. However, if you use this technique, you must mark every element on the page with a TABINDEX attribute. Otherwise the tab order will move to the form first skipping over all other elements such as the links at the top of the page.
Example of Altering Tab order
HTML Form
Below is a form which allows you to enter information for two cars (e.g. compare prices). Here, we use the TABINDEX attribute to ensure that the tab order goes through the first col. This lets the user finish entering the specifics of Car 1 in column 1 before moving on to Car 2 in column 2.
Note: CSS can be used to conceal individual field LABELS from sighted users.
This example is based on WCAG Techniques, please visit the WCAG website to see the original example and find more details.
HTML Code
<form>
<table summary="This table allows you to compare any two cars">
<caption><b>Car Comparison</b></caption>
<tr>
<th scope="col">Car Info</th>
<th scope="col">Car 1</th>
<th scope="col">Car 2</th>
</tr>
<tr>
<th>Make</th>
<td><label for="Car 1 Make" class="hidden">Car 1 Make</label><input type="text" size="30" value="" name="car1make" tabindex="10"></td>
<td><label for="Car 2 Make" class="hidden">Car 2 Make</label><input type="text" size="30" value="" name="car2make" tabindex="40"></td>
</tr>
<tr>
<th>Model</th>
<td><label for="Car 1 Model" class="hidden">Car 1 Model</label><input type="text" size="30" value="" name="car1model" tabindex="20"></td>
<td><label for="Car 2 Model" class="hidden">Car 2 Model</label><input type="text" size="30" value="" name="car2model" tabindex="50"></td>
</tr>
<tr>
<th>Year</th>
<td><label for="Car 1 Year" class="hidden">Car 1 Year</label><input type="text" size="30" value="" name="car1year" tabindex="30"></td>
<td><label for="Car 2 Year" class="hidden">Car 2 Year</label><input type="text" size="30" value="" name="car2year" tabindex="60"></td>
</tr>
</table>
<input type="submit">
</form>
CSS code to hide LABEL tags
.hidden
{
position:absolute;
left:-5000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;
}
A Non TABINDEX Solution
Below is another solution that accomplishes the same goal, but without changing the tab order. In this case, the information about each car is placed in one cell.
This solution places all the information about Car 1 in a large cell. CSS is used to aliagn the label and input fields.
Note: This solution was based on that presented at the University of Oregon.
View the CSS
label {display:block; width:60px; padding: 0 10px; text-align: right; float:left }
input[type=text] {display:block; width:150px; margin:3px 0 3px 10px}
td {width: 280px}