Accessibility and Usability at Penn State

Skip to Demo

Tabindex Demo

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.

Car Comparison
Car Info Car 1 Car 2
Make
Model
Year

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.

Car Comparison
Car 1 Car 2

 

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}

Top of Page