Site visitors use the tab key to move between the fields in a form. In order to enable the screen reader and keyboard users to move between form fields (and links), the logical order of the form for tabbing should be determined. The order in which form fields receive focus is called the tab order. By default, the tab key will start at the top and works its way down the page. Failing to provide a logical tab order is highly confusing and makes the task of navigation very difficult.

Guidelines:

• Navigation should be logical, generally from left to right, top to bottom
• Ensure that all interactive elements can be accessed simply without the use of a mouse
• Make sure that fields appear in the HTML code in a logical order and/or use the < tabindex> attribute to set the appropriate order.
• Do not remove the focus rectangle surrounding a link or the possibility of focusing on a link.

Good Example:

First Name                     Last Name
Email ID                         Confirm Email ID

Bad Example:

Below is the example of an illogical tab order, in a two column CSS layout. This order could easily confuse someone with a cognitive disability or someone using screen reading software.
First Name                       Email
Last Name                       Contact No

Validation Technique:

• Use the “tab” key to navigate the site
• Ensure that the movement to each location follows in a logical order.

Note:The Tabindex attribute is only supported by Internet Explorer 4 and up and not every link on the page needs to have a Tabindex attribute. Try to minimize the use of this attribute. Instead, rely on the natural order of the links as much as possible.