Tab Order
While accesskey has its problems,
there’s little reason to ignore the tabindex attribute. Setting a useful tab order
is good for all keyboard users, including those using screen readers or
onscreen keyboards. Most mobile browsers ignore tabindex in favor of navigating with the arrow
keys—which makes sense when you remember very few of them have a Tab key
to begin with. Because of this, tabindex fits with the principles of universal
design: it offers a benefit to one class of users, without side effects
for others.
Note
Be sure to keep tabindex values
up-to-date. When new content is added, test that the tab order still
makes sense and update tabindex
values accordingly.
The tabindex attribute is not
called for unless the fields being tabbed to are somehow out of order.
Most commonly, this happens when using a layout table to form two columns
of form controls:
<table>
<tr>
<td>
<label for="firstname">First name:</label>
<input type="text" name="firstname" id="firstname" />
</td>
<td>
<label for="cardtype">Credit Card: </label>
<select name="cardtype" id="cardtype">
<option>MasterCard</option>
<option>Visa</option>
<option>American Express</option>
</select>
</td>
</tr>
<tr>
<td>
<label for="lastname">Last name:</label>
<input type="text" name="lastname" id="lastname" />
</td>
<td>
<label for="cardnumber">Card Number:</label>
<input type="text" name="cardnumber" id="cardnumber" />
</td>
</tr>
</table>This code is for a simple table with first and last name on the left and credit ...