Accessibility - Refactoring HTML: Improving the Design of Existing Web Applications - page 220

Add Tab Indexes to Forms
Add a tabindex attribute to every editable, nonhidden form control.
Code View:
<form action="login.php" method="post">
<p><label>Username:
<input type="text" name="log" size="18" />
</label></p>
<p><label>Password:
<input type="password" name="pwd" size="8" />
</label></p>
<p><label>
<input name="stayloggedin" type="checkbox"
id="stayloggedin" value="remember" />
Remember me on this computer</label>
</p>
<p class="submit">
<input type="submit" value="Login" />
</p>
</form>
<form action="login.php" method="post">
<p><label>Username:
<input tabindex="1" type="text" name="log" size="18" />
</label></p>
<p><label>Password:
<input tabindex="2" type="password" name="pwd" size="8"/>
</label></p>
<p><label>
<input tabindex="3" name="stayloggedin" type="checkbox"
value="remember" />
Remember me on this computer</label>
</p>
<p class="submit">
<input tabindex="4" type="submit" value="Login" />
</p>
</form>
Motivation
Keyboard navigation is greatly simplified if the user can tab from one control to the next. This is especially
important on forms that will be used frequently—for example, by a data entry clerk. It is also important for
users with lesser manual dexterity who aren't able to reliably or easily target fields with a mouse. However,
even dexterous, one-time users expect to be able to tab between fields and will attempt to do so. Make sure
that when they press the Tab key, the focus advances to the next logical field.