Page Content
TABINDEX="0"
Keyboard users and screen reader users often use the TAB key to navigate to links and form elements. However, there may be times when you wish the TAB key to stop at another location on a Web page.
Adding the attribute TABINDEX=0 to any element forces forces the TAB key to stop at a location. TABINDEX="0" essentially works as a stop sign without changing the default order of navigation. It does not otherwise change tab orer.
Forms and TABINDEX="0"
In FORMS, adding TABINDEX="0" to non-form elements is important for allowing the instructions which would otherwise be skipped by a screen reader.
Sample Form
In this form, the TAB key stops at the headings for Name and Contact, each form field and at the instructions on how to enter phone numbers beneath the Phone field.
Fake Registration Form
View the Code
In the form below, the initial instructions are embedded in a <p tabindex="0"> tag while the instructions about not entering dashes for the phone number field are embedded in a <span tabindex="0"> tag.
HTML Code
<form>
<p tabindex="0">Instructions: Fill in form below with with your name and contant then click <b>Submit.</b></p>
<h3 tabindex="0">Name</h3>
<p><label for="First name">*First name:</label> <input id="First name" type="text" name="firstname" />
<br>
<label for="Last name">*Last name:</label> <input id="Last name" type="text" name="lastname" />
</p>
<h3 tabindex="0">Contact Information</h3>
<p><label for="Email">Email:</label> <input id="Email" type="email" name="email" />
<label for="phone">Phone:</label> <input id="phone" type="tel" name="telephone number" /><br>
<span tabindex="0" class="formhelp">Do not enter dashes for phone numbers.</p>
<p><input type="submit" /></p>
</form>