Make forms easier to use by creating a logical tab order.
The one time I use a keyboard rather than a mouse on the web, is when I am filling in a form. And in common with many other keyboard users (e.g. web surfers who are blind) - I use the tab key to move from one field to the next. So I tend to notice when the order in which I cycle through the fields does not seem logical or sensible.
If not specifically set by the designer - the order in which the tab key takes me through a form is determined by the order the fields appear in the HTML code. Most of the time this is ok, but because many designers design the layout of forms using tables - occasionally there is an inconsistency between the visual order of input fields, and the order that they appear in the HTML. These inconsistencies will lower the usability of a site, as the 'route' taken through the form will seem erratic, and potentially confusing.
This weeks tip: use the taborder attribute to specifically set the 'order-of-travel' through your forms.
This is an easy technique to master; each taborder attribute is assigned a number - the 'order-of-travel' is from lowest number to highest, e.g.,
Name : <input type = "text" name = "membername" tabindex="1">
Email: <input type = "text" name = "email" tabindex="2">
Subscribe to receive your weekly accessible web design tip.
You have permission to reprint this and other accessible web design tips on your own website - see http://www.mcu.org.uk/weeklytips/ for terms and conditions.