Example Navigation

Example 12: Instructions as tabindex

Best Practice Rating: Poor

The tabindex technique to make instructions more accessible, but is considered a poor accessibility practice since it adds additional tab stops for all keyboard users and the tabindex technique is not supported by all browser and assistive technology combinations.
The tabindex attribute with a value equal to or greater than 0 can be used in Internet Explorer and other browser to set focus to non-link and non-form controls as the user tabs through a web site.

Example Start

Name can only contain letters.

Name

E-mail will only be used to send you copy of your commment and allow us send you a response.

E-mail

Please comment on the services and resources you found on this web site.

Comment

Example End

HTML Source Code

<div class="inst" tabindex="0">
  Name can only contain letters.
</div>

<div class="text">
    <label for="name">Name </label>
    <input type="text" size="30" name="name" id="name" />
</div>

<div class="inst" tabindex="0">
  E-mail will only be used to send you copy of your commment and allow us send you a response.
</div>

<div class="text">
    <label for="email">E-mail </label>
    <input type="text" size="25" name="email" id="email" />
</div>

<div class="inst" tabindex="0">
   Please comment on the services and resources you found on this web site.
</div>

<div class="text">
    <label for="comment">Comment </label>
    <textarea rows="5" cols="50" name="commnet" id="comment" ></textarea>
</div>

CSS Source Code