Accessibility and Usability at Penn State

Skip to Forms Demo Non Forms Demo

TABINDEX = 0 Demo

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"

Note: None of the forms examples are actual HTML forms, but the code reflects what should be done.

In FORMS, adding TABINDEX="0" to non-form elements is important for allowing the instructions which would otherwise be skipped by a screen reader.

For instance, in the form below, the instructions about a username containing at least six characters is embedded in a <p tabindex="0"> tag.

Using Tabindex=0 in a form

Adding the TABINDEX="0" to the P containing instructions about what a username must contain forces the screen reader to read the text aloud.

Let Us help you find a car!!

Instructions: Fill in form below with critical car information then click Submit









Username must contain at least 6 characters including one upper case letter (A-Z), one lower case letter(a-z), and one number(0-9)

HTML Code

<form>

<h2 tabindex="0">Let Us help you find a car!! <b style="color:#C00"></b></h2>

<p tabindex="0">Instructions: Fill in form below with critical car information then click <b>Submit</b></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" /> <br>
<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>

<label for="Username">Username:</label> <input id ="Username" type="text" name="username" />

<p tabindex="0">Username must contain at least 6 characters including one upper case letter (A-Z), one lower case letter(a-z), and one number(0-9)</p>

<label for="Password">Password: </label> <input id ="Password" type="password" name="pwd1" /></p>
<label for="Confirm">Confirm Password:</label> <input id = "Confirm" type="password" name="pwd2" />

<p><input type="submit" /></p>

</form>

Top of Page

Tabindex on Non-form elements

The TABINDEX=0 attribute can be used on non-form elements as well. For example, if an webpage has a question for the user, we can use the TABINDEX to force the TAB key to pause at the question first, then a second TABINDEX to view the answer by clicking TAB again.

In the example below, we can see that the question can be tabbed into before directly moving onto the answer. The answer is hidden and it is revealed when it is tabbed into or the pointer hovers over it.

Sample Self Check with TABINDEX

Each paragraph in the "self-check" below has a TABINDEX="0" attribute so that a keyboard user can read each paragraph separately. CSS is used to hide the answer until

Question: Where can I find some useful keyboard shortcuts for the NVDA screen reader?

Answer (Click Tab or hover over next paragraph with mouse)

The NVDA page at PSU accessibility

This example is based on the techniques explained on the Quick and Dirty Accessible Self-Check Quiz with Just CSS and Tabindex webpage.

HTML Code

<p tabindex="0"> <b>Question: </b>Where can I find some useful keyboard shortcuts for the NVDA screen reader? </p>

<p tabindex="0"><b>Answer</b> (Click Tab or over over with mouse)</p>

<p><a href="http://accessibility.psu.edu/NVDA" class="answer">The NVDA page at PSU accessibility </a></p>

CSS Code to hide the answer

a.answer
{
display: block;
background-color: #369; color: #369;
text-decoration: none;
padding: 0 3px 0 3px;
border: 1px solid #369;
padding: 3px
}

CSS Code to reveal answer by keyboard focus

a:focus.answer
{
background-color: #DDD; color: #000;
text-decoration: none;
padding; 3px; border: 1px solid #369;
}

CSS Code to reveal answer by mouse hover

a:hover.answer
{
background-color: #DDD; color: #000;
text-decoration: none;
padding; 3px; border: 1px solid #369;
}

Top of Page

Tabindex to Change Tab Order

You can use the TABINDEX attribute to manually adjust the Tab order in order to accommodate a visual design (e.g. comparing two items in a form entry).
Note: This example has been moved to a separate page to make it possible to show the example without hampering logical navigation of this page.

Caution

When the TABINDEX attribute is used on any element you need to add TABINDEX attributes for all sections of the page to maintain the logical order of navigation.

Top of Page