Universal Design for Web Applications

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 ...