20 Days Of Web Testing > Tab order

Why?

There are many people using and operating websites without using the mouse.

If the tab order of the page is not logical then it makes using the keyboard a chore, illogical and in some cases impossible.

Testing tab orders seems like a simple check to do, but always consider the way your page renders, refreshes elements or uses neat tricks to hide content based on selections; these things may all affect the overall order of the tabbing.

 

How?

For example, if you have a form that has 10 questions on it then the tab order should be fairly logical.

When you press the tab button you should move forward through all ten fields in a logical order (typically left to right, top to bottom, but this will vary for each design) often including any buttons or help icons etc.

However, if that same form reveals questions 11 and 12 if the user answers “Yes” to question 2 then ensure that this too is reflected in the tab order.

In some instances questions 11 and 12 may be missing from the tab order.

 

Useful Hint

Hitting SHIFT and TAB will do a reverse tab in most environments. Reverse tab is just as important as forward tab.

 

Useful Links

Tabbing in HTML guidelines – http://www.w3.org/TR/html4/interact/forms.html#h-17.11.1

Web Aim guide to changing tab orders – http://webaim.org/techniques/keyboard/tabindex

—-

If you want to talk Testing – catch me later this year at EuroSTAR conference.