WebAIR

Can the keyboard be used to successfully tab through each control? (FAC11)

Why Is This Important?

Not everyone uses a mouse to interact with a webpage, and even if they do, they might find it difficult to make precise movements or clicks. Blind users typically use a screen reader, which is keyboard-operated. Many people with physical disabilities use a keyboard or an input device that acts as a keyboard (such as speech input software or on-screen keyboard). Because of the many alternatives to using a mouse, it is important to ensure that a webpage can be operated using a keyboard. This includes ensuring that a keyboard can be used to tab through each control of a form.

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