Skip to Main Content

go to Indiana University Indiana University


Web Accessibility Made Easy: Tab Order

This entry in the “Web Accessibility Made Easy” series discusses an HTML attribute many web developers may overlook… tab order.

Tab order and tabindex

Tab order or “tabbing order”, “defines the order in which (HTML) elements will receive focus when navigated by the user via the keyboard.” (Tabbing navigation, W3C) All elements that by specification or scripting can receive focus will be present in the tab order. The tab order works with the following elements among others…. <a>, <area>, <button>, <input>, <object>, <select>, and <textarea> HTML elements. Normally, the tab order is determined by the order of elements in the HTML source code. The tab order may follow an unexpected order because of the way the web page is coded. Below is an example of an illogical tab order. The example shows the layout of an HTML form with elements that would be formatted in a two column layout with CSS.

Form

First Name                  Email
Last Name                   Confirm Email

If viewing the source code for the form elements above, it seems like they should appear in this order: first name, email, last name and confirm email. This order could easily confuse someone with a cognitive disability or someone using screen-reading software. They would expect the last name field to come after the first name field because these two pieces of information (data) are closely associated. On an extremely long form or a form with more than two columns of form elements the illogical tab order would be even more evident.

The tab index attribute can correct an illogical tab order. The tab index attribute, “specifies the position of the current element in the tabbing order for the current document. This value must be a number between 0 and 32767.” (Tabbing navigation, W3C) Use of the tab index attribute enables tabbing to elements in the correct sequence based on the value provided in the attribute(s), beginning with the smallest value and ending with the largest value.

It should be noted that all elements with tab index attributes are accessed prior to page elements without tab index attributes. So tab order consists first of all page elements with tab index attributes followed by all elements without tab index attributes. This may result in illogical tab order. Tab index attributes may need to be added to all focusable HTML elements to create consistent, logical document wide tab order. Therefore, if the tab order appears logical to users without including the tabindex attribute, it is best to omit the attribute all together.

Guideline

IU Web Accessibility Guidelines

19.    Be sure tabbing through links, form controls, and objects occurs in a logical order (sequence).

Tutorial

This tutorial will be using both the Bad example web page and the Good example web page, along with their associated style sheets.

1.      The bad code – illogical tab order

The code below has four form field elements, which are styled using CSS to control their layout. The problem is the email field comes before the last name field, so the tab order will be: first name, email, last name, confirm email.

<div class="formfield">
<input name="FName"/>
<font color="#FF0000">First Name</font>
</div>
<div>
<input name="Email"/>
<font color="#FF0000">Email</font>
</div>
<div>
<input name="LName"/>
<font color="#FF0000">Last Name</font>
</div>
<div>
<input name="Email2"/>
<font color="#FF0000">Confirm Email</font>
</div>

2.      Adding the tab index attribute to each of the form elements to correct the tab order.

The tab index attribute is added to each form element in the code below. Because this form is not the only content on the example page, a tabindex attribute of 1 is not used. Instead, the tabindex attributes begin with a value of 100. The higher tabindex attribute allows the developer to add tabindex attributes to other focusable HTML elements, preserving a logical tab order. These elements may precede the form in the source code.

<div class="formfield">
<input name="FName" tabindex="100" />
<font color="#FF0000">First Name</font>
</div>
<div>
<input name="Email" tabindex="300" />
<font color="#FF0000">Email</font>
</div>
<div>
<input name="LName" tabindex="200" />
<font color="#FF0000">Last Name</font>
</div>
<div>
<input name="Email2"  onblur="validateemail();" tabindex="400" />
<font color="#FF0000">Confirm Email</font>
</div>

Note: To ensure a logical tab order on the Good example web page, tabindex attributes should be added to all other <a>, <select>, <input>, <textfield> and <button> HTML elements.

Wrap Up

To ensure web pages have a logical tab order, use the tabindex attribute to control tab order. Logical tab order is important for people with and without disabilities because most people find it is very convenient to use tabbing navigation when filling out online forms. The next time you are filling out an online form, pay close attention to the tab order and the use of tabbing navigation. You will realize just how important tab order really is.


Leave a Reply

 

Get Training Tips via RSS Subscribe to Entries feed or Read Comments via RSS Subscribe to Comments feed.