Keyboard Focus Order: Navigating by Tab

WHY IT EXISTS: To ensure users who cannot use a mouse can navigate and operate a web page logically. Without a predictable focus order, a site can be confusing or completely unusable for keyboard-only and screen reader users, preventing them from completing tasks.

THE MENTAL MODEL: Think of focus order as telling a story with interactive elements. When a user hits the Tab key, they're asking "what's next?". The answer should be logical, like reading a book from left-to-right and top-to-bottom, not jumping to a random chapter. The default order is simply the order of elements in your HTML document.

HOW IT WORKS: By default, sequential navigation via the Tab key follows the source order of focusable elements in the HTML. This is the "tabbing order". While this sequence can be modified using the tabindex attribute or JavaScript, the goal is always to create an order that preserves the meaning and operational relationships between components. The focus order doesn't have to perfectly match the visual layout, but it must not feel random or contradict the page's hierarchy.

WHEN TO USE IT: A logical focus order is a baseline requirement for accessible web content (WCAG 2.4.3 Level A). It is always required. It's especially critical for forms, application-like interfaces, and any page where the sequence of operations matters. The order should reinforce the user's mental model of the task they are trying to complete.

WHEN NOT TO USE IT: There is no situation where an illogical focus order is acceptable. However, you should avoid modifying the natural DOM order unless absolutely necessary. Relying on tabindex with positive integers is an anti-pattern that creates brittle and hard-to-maintain focus management. It is almost always better to structure your HTML logically in the first place.

ONE CANONICAL EXAMPLE: Imagine a two-column registration form. A logical focus order would be to tab through all the fields in the left column from top to bottom, and then move to the top of the right column and tab through its fields. An illogical order, and a failure of this success criterion, would be jumping from the first field in the left column to the third field in the right, then back to the second in the left. This breaks the flow and makes the form difficult to understand and complete.