Navigate Without The Mouse

The majority of web users like using the mouse, it makes them feel free in a way. Other users dislike the mouse and would rather use the tab key to navigate especially when filling out a form. Then there are users who have no choice but to use the tab key because maybe their mouse is broken or they have problem making the mouse land exactly where it needs to land in order to click no a link or switch to a different field in a text box.

Because there are so many different types of users out there when it comes to the mouse it is very important, especially if we have forms, that they work with the tab key. If you use a tab key on the main page of Grinding Gears you will find that the first time you hit tab it will select the breadcrumb "Open Source Development Tutorials and Articles", then the next time it will select "About Us" and so on. The most important part is that if you are in the search box and you hit tab it will bring you to the submit button so you can submit the search without having to use the mouse.

Some sites are not setup correctly and hitting tab from the search box itself might bring you to the navigation. For the most part this is setup all by itself though so most likely you will be lucky enough that it will just work for you. If it does not though this is how you get it to work the way you want it.


<input type="text" name="Name" tabindex="#">

?>

What you want to do is set the "#" to the number of times you have to hit the tab button before you get there. That is really not a good way to explain it but say on Grinding Gears homepage we wanted the first time someone hit the tab button to bring them to the search box and the second tab to bring them to the "submit" button. Then we would set the tabindex to 1 for the input box and tab index to 2 for the "submit" button. If we did this then the order would be Search Box, Submit Button, then "Open Source Development Tutorials and Articles", and it would continue in the same order except that it would not go into Search Box and Submit Button again it would skip over them because it already did them.

Below you will find an example on this page which is a fake information form. I have set the tabindexes such that the first tab will bring you to the Name box and the second tab to the Email box and then third to the Submit button. After that the order would continue as normal going up to the breadcrumb.


<form action="#" method="POST">
Name <input type="text" size="20" tabindex="1">
Email <input type="text" size="20" tabindex="2">
<input type="submit" value="Submit" tabindex="3">
</form>

?>

The default way for the tab button to work is for it to follow in order of how the source code is. So if you have everything laid out in the source the way you want the tab to work then you will probably be all set. However, in a case where you have a form as the body of a page, chances are that you will want the form to be the first thing hit when someone press the tab key. The example above shows could that would do exactly that in making the form the first thing that gets selected when you press the tab key. Give it a shot on this page and you should see it work for yourself.

You might not think this is that important to worry about but many people that use the web all the time and are used to doing data entry know the value of using the keyboard instead of the mouse because it is faster. Also many people have problems making the mouse go where they want so making sure that you can navigate your site with the tab key is very important to keeping your visitors happy.