Many users navigate webpages by 'tabbing' through the interactive components (e.g. links, form controls etc.). The tabbing order on the majority of webpages is determined by the order in which the elements appears. It is therefore important to ensure that the order of the elements on a webpage is logical. Some assistive technologies, such as screen readers, render webpages without CSS. This means that elements on the webpage are displayed in the same order that they appear in the code without any positioning or styles applied. It is therefore important to ensure that the order of the content still makes sense when CSS is disabled.
Where it is not possible to adjust the order of elements in the code, you can use the "tabindex" attribute to assign each element to a position in the tab order. When a user tabs through a webpage, the tabbing order will follow the values specific in tabindex. Tabindex values range from 0 to 32767. Any elements with a value higher than 0 will receive focus before elements without a tabindex.
An easy way to determine the tabbing order on a webpage is simply to tab through it yourself using the Tab key on the keyboard. Make sure the order in which each interactive component gains focus makes logical sense.
To view a webpage with CSS disabled, which will allow you to see how elements are displayed without any positioning or styles applied, either adjust your browser settings or install a development plug-in, such as FIrebug or Web Developer Toolbar.
//A section of a form with a tabbing order specified using tabindex
<label for="house_number">House Number</label>
<input type="text" size="30" value="" name="house_number" title="House Number" tabindex="2">
<label for="street">Street</label>
<input type="text" size="30" value="" name="street" title="Street" tabindex="3">
<label for="postcode">Postcode</label>
<input type="text" size="30" value="" name="postcode" title="Postcode" tabindex="1">