WebAIR

Does the tab order make sense in terms of a user moving through the form? (FAC12)

Why Is This Important?

In addition to making sure that a form can be operated and tabbed through using a keyboard, you should also make sure that the order in which the user tabs through the form makes sense. For example, a user entering a postal address into a form would expect to tab from the "street" field, to the "city" field, and to the "postcode" field. If the tabbing order is not logical, it could be very confusing to the user.

How To Fix The Problem

Keyboard accessibility is determined by the source order of elements within the HTML code. Therefore, order your elements within the code in a way that would support a logical flow. Where forms are more complex, dynamic or larger you may use the tabindex attribute to tweak the tab order as needed. Also the tabindex attribute with a value equal to or greater than 0 can be used to set focus to elements other than links and focus controls if needed but caution is urged as unnecessarily adding extra steps can be considered to be poor practice.

Example

//Adding tabindex="0" to a <div> element will make it keyboard accessible

<div id="some_widget" tabindex="0">

Further Information

  1. http://webaim.org/techniques/forms/screen_reader#logical
  2. http://webaim.org/techniques/keyboard/tabindex
  3. http://html.cita.illinois.edu/nav/form/text/index.php?example=11