Logical focus order isn’t provided

What is the problem?

The English language follows a logical reading order of left to right, top to bottom. It is not required that focus order follow that same pattern. However the requirement is that the order be logical and preserves meaning. Left to right, top to bottom is often the same logic used to define focus order but it is more important for the focus order to be logical than to follow the visual layout.

Focus Order is wrong for newly added controls

In an eagerness to get focus order correct, it could be appealing to define the exact desired focus order using increasing positive tabindex values on all focusable elements. This is a large amount of work and is actually against accessibility best practices. Most focusable elements do not need to have a tabindex defined, having a default tabindex equal to zero. Defining any positive tabindex will force focus to those elements before continuing to any additional elements based on source order. This means that if the tabindex is not defined for every element on the page focus order could become illogical.

Remove positive tabindex values

Remove instances of tabindex where the value is 1 or more.

tabindex is a global attribute in HTML 5, meaning it can be added to any element. tabindex="0" should be added only to actionable elements that aren’t naturally in the focus order.

H4: Creating a logical tab order through links, form controls, and objects

Elements with a default or natural tabindex="0"

• <a> elements with an href attribute
• <link> elements with an href attribute
• <button> elements
• <input> elements that are not type="hidden"
• <select> elements
• <textarea> elements List defined by HTML 4, reference from bitsofcode

Tab order jumps back and forth between regions

As web pages are made up of regions (header, left hand navigation, main, footer, etc) tab order should enter a region move through it and then onto another region. Focus should not return to a region until all other regions have been navigated.

Update source to match visual regions

• C27: Making the DOM order match the visual order
• G59: Placing the interactive elements in an order that follows sequences and relationships within the content

Closing a menu or dialog doesn’t return focus to the element that launched it

Logical focus order isn’t limited to the elements on the page, but includes the logic of where focus goes to and where it is returned to. The common error Focus does not move to newly requested dialog/control will focus on where focus goes, but here we will discuss how focus is returned.

In this example from the county’s intranet site, the “more options” menu is closed and focus is place back at the beginning of the page rather than on the element the opened the menu.

Elements created to move focus to another control within the page, must also handle the return focus

In the W3C example Actions Menu Button Example Using element.focus() they insure focus is returned by handling the Esc to return focus to the control that launched the menu.

case this.keyCode.ESC:
  this.popupMenu.setFocusToController();
  this.popupMenu.close(true);
  flag = true;
  break;