Why Does the Tab Key Jump Around a Web Page?

Many people move through a website with the keyboard instead of a mouse. The Tab key takes them from one link, button, or form field to the next, and a highlight shows where they are. On a well-built page, that highlight moves the way the page reads. On a carelessly built one, it jumps: from the top menu to the footer, back to the middle, then to a button the person passed a moment ago.

What the standard asks

The rule is WCAG success criterion 2.4.3, Focus Order, at Level A, the most basic level. Its text (opens in a new tab) reads: "If a web page can be navigated sequentially and the navigation sequences affect meaning or operation, focusable components receive focus in an order that preserves meaning and operability."

In plain terms, the order the highlight travels in has to keep the page making sense and keep it usable. On most pages, that means the order the page appears in on screen: top to bottom, and left to right in English. The criterion is part of WCAG 2.1 Level AA, the standard the ADA's Title II rule names for state and local government websites.

Who a jumping order affects

• People who can't use a mouse, because of a tremor, limited movement, or an injury, and who move through a page with a keyboard or a switch.
• People who are blind and use a screen reader, which reads the page aloud in the order the highlight travels.
• People who magnify the screen to read. They see one small part of the page at a time, and lose their place when the highlight jumps out of view.

For each of them, a jumping order turns a short form into a search. A field gets skipped, a payment goes in before the last box is filled out, or the person gives up and calls instead.

Three shapes the barrier takes

A focus order problem usually comes from how a page was put together rather than how it looks.

• A layout rearranged on screen by its styling, while the code underneath keeps the old order. The page looks right, and the highlight follows the code.
• A menu or pop-up window that opens beside its button on screen but sits at the bottom of the page's code, so the highlight travels the whole page to reach it.
• Numbers added to a few elements to force them first, which then jump ahead of everything else on the page.

Why the fix is usually small

The highlight follows the order of the page's code, so the fix is usually putting that code back in the order the page reads, or taking out a forced number. Where the problem sits in a template, one correction carries to every page that uses it.

The check needs no special software. From the top of a page, the Tab key moves the highlight one stop at a time, and the question at each stop is whether the next one is where a reader would expect it.

What a dated record adds

A complaint about a website often describes a person who could not finish a task, and a jumping focus order is one of the plainer ways a task fails. An organization holding a dated record can show when a page's order was found to be wrong, when it was corrected, and that it stayed corrected. Esther assesses a site and dates every finding, so the record of a fix begins the day the barrier stops being found.

Questions about your own site

• ?From the top of your most-used form, does the highlight move through the fields in the order they appear?
• ?When a menu or pop-up window opens, does the highlight go into it, and return to the button when it closes?
• ?After the last redesign or template change, did anyone check the order again?

Focus order is one of the simplest standards to describe, and one of the simpler barriers to correct. Organizations under Title II will find their side at For government, and private organizations at For business.