Chapter #66. Give Navigation Elements a Logical Tab Order

Try an experiment: head to a website in your browser and start pressing the Tab key. You should notice the "focus" (usually a colored rectangle or shaded area) move from item to item across the site.

This is one of the ways that users who are partially sighted, or have motion difficulties, use web pages. These users rely on interface designers to use common sense in the tab order that they assign to items. On some websites and web apps this is horrible, while on some it's clearly been well thought through.

Filling in a form is often extra frustrating when tapping the Tab key takes your focus to a strange part of the page. It's unlikely that you'll be writing code yourself, but you may wish to tell your frontend developers that they can specify the order that items are selected in using the tabindex attribute:

<input type="text" name="field1" tabindex=1 />
<input type="text" name="field2" tabindex=2 />

For navigation and menus...