DEV 3.5 Create a logical tab order through the page

Some people navigate through pages using the tab key rather than the mouse. You must ensure that the order that page elements are presented is logical and gives a similar experience to that which would be obtained visually.

  • Try to ensure that the default tab order is the most logical route:
    • This will simply be the order that elements appear in the underlying code that makes the page.
  • If you can't get a logical default order, use the tabindexattribute to change the tab order to suit user needs:
    • NB: Use of tabindex can cause problems so ensure you test the page to check that is is logical and usable
      • It is most often useful for forms;
    • The order follows numeric order lowest to highest that you set for tabindex
      • Use positive integer.

Tip: Use the keyboard to tab through the page. Does it make sense this way?

Normal tab order in tables is row by row  Tabindex can change to column by column

Second <input ... tabindex="20">

First <input ...
tabindex="1">
Third <input ... tabindex="30">