Get your FREE 30-day trial.
Please complete all fields.
This post is part of series on Universal Design at Salesforce.com. As always, all of the content and images in these posts fall under our safe harbor agreement.
As the order in which a user will navigate through your form when using the tab key, it is important to specify the tab order. While there are several right and wrong interactions for every form, it is important to be consistent and to include all aspects of the form.
In this first example, the designer chooses a standard top to bottom, left to right flow for the tab sequence. The first step is the Help link, and then the tabset, then the play button, followed by the checkboxes, and ultimately submit and cancel buttons. For the three tabs, once the focus is on the tabset, the arrow keys will navigate through the tabs.
Below is an example from a bank login page. They place the "Forgot Password" link between the Username field and the Submit button. I regularly enter in my username, press tab, press enter and wonder why I am redirected asking for personal information.
In this situation the Forgot Username hyperlink would be better placed after the Continue button in the tab order.
Here is another example of a bank's login form. There are six tab stops: Enter ID edit field, Sign In button, Save this ID checkbox, Enroll link, Select location combo box, and a help/options link. The lock image is not actionable.
What tab order would you choose for this current design? What if we chose a standard, top-bottom, left-right tab order?
If you go straight from the edit field to the sign in button without selecting an account location, your users will receive an error message. They would have to enter in their online ID, tab to the button, tab to the checkbox, tab to the enroll link, then tab to the combo box. After choosing their location, they must shift-tab three times to go back to the sign-in button.
Given that choosing an account location is a requirement for completing the form, consider this proposed tab order:
While the choice is up to you, remember that your choices will have an effect on the user experience.
