Best Practices in keyboard navigation of JavaScript Controls?

Question

Apparently "best practice" when creating DHTML widgets, such as menus etc., is to allow users to navigate to the widget using the tab key, and navigate within the widget using arrow keys. This follows the way OS have traditionally worked when navigating among and between controls, and allows users to easily skip the control along the tab order. See http://dev.aol.com/dhtml_style_guide/ etc.

A lot of people, though (if they even bother to make their DHTML widgets keyboard accessible, ignore this advice and just allow users to tab between elements within the control.

I am asking experienced accessibility folk what the current best practice is. Do most keyboard users expect this behavior from DHTML controls? If they don't expect to be able to navigate with arrow keys within a control this could end up confusing more people than it helps... Thanks in advance

Answer 1

Using Tab Order is great help for experienced users, since it speeds up the (often boring) task of filling in a form of any kind. There are forms for everything from making your yearly Tax Submission to the government agency, to the little sign in form of username/password. Using keyboard only controls makes the user experience better and your users will love you for the effort (which is quite simple measured in time).

The tabindex html-attribute should follow all inputs from left-to-right (in LTR reading countries. The opposite apply in RTL reading countries) and top-to-bottom. Avoid using tabindex on labels, since they are only in the way, and makes the user experience worse. It's a common issue, but can be corrected easely if you put your mind to it.

Setting correct tab order is a small, yet dull, development task. You don’t gain much completing the task. On the other hand you lose much if you reject to set the tab order properly. Your users get frustrated with the product. User experience peaks down. Everyone starts using competitor’s software.

Usability Issues: Tab Order

Microsoft and Adobe encourage the use of tab order (tabindex) with the following:

To enhance the user experience of using controls in ASP.NET Web pages, you can specify the order in which users can tab through ASP.NET Web server controls, and you can specify which control on the page has the focus when the page is initially opened. (Microsoft)

---

Tabbing order is important for interactive forms and forms that have a fixed layout. For interactive forms, the tabbing order affects the end user's experience when filling the form. (Adobe)

Microsft have also listed the Top Guidelines Violations where they say:

Within a tab stop, the arrow key order should flow from left to right, top to bottom, without exceptions. The arrow keys should cycle through all items in both directions without stopping.

TL;DR

So I think it's safe to say that you should implement tab order (tabindex) without exception in any web app you're producing.