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

Instructions: Fill in form below with your name and contact information then click Submit.

Name



Contact Information




Do not enter dashes for phone numbers.

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>

Top of Page

Skip to toolbar