Web Standards Programmer's Reference: HTML, CSS, JavaScript®, Perl, Python®, and PHP

9.20. Tab Order and Keyboard Shortcuts

Two additional attributes, tabindex and accesskey, should be used with your form fields to increase their accessibility.

The tabindex attribute defines what order the fields are selected in when the user presses the Tab key. This attribute takes a numeric argument that specifies the field's order on the form. The fields are then accessed in their numeric, tabindex order—tabindex 1, then 2, and so forth.

The accesskey attribute defines a key that the user can press to directly access the field. This attribute takes a single letter as an argument; that letter becomes the key the user can press to directly access the field. Keys specified in accesskey attributes typically require an additional key to be pressed with the specified key. For example, user agents running on Microsoft Windows typically require the Alt key to be pressed along with the letter specified by accesskey. Other platforms require similar keys; such keys typically follow the GUI interface conventions of the platform.

The following example defines a text box that can be accessed by pressing Alt+F (on Windows platforms) and is third in the tab order:

<p><label for="FirstName"><span class="und">F</span>irst Name: </label>
<input type="text" id="FirstName" name="FirstName" value=""
tabindex="3" accesskey="F" size="30" maxlength="40"></p>

Note the use of the <span> tag to delimit the corresponding letter ("F") in the field's label. Deprecation of the underline element caused a ...