Sequential Focus Navigation

Keyboard focus should move through interactive elements in a logical sequence that matches the intended reading and interaction order. A correct focus order helps keyboard and assistive-technology users understand and operate a page efficiently.

Sequential focus navigation is the order in which focus moves between keyboard-focusable elements, typically when a user presses `Tab`. The order should generally follow the page's meaningful visual and interaction sequence, such as navigation, main content, controls, and forms.

In normal HTML, browsers derive focus order largely from the document structure. Elements such as links, buttons, form controls, and elements with appropriate focusability participate naturally. Keeping the DOM order aligned with the visual order is therefore one of the simplest ways to produce accessible keyboard navigation.

The `tabindex` attribute can change how elements participate in sequential focus. `tabindex="0"` makes an otherwise non-sequentially-focusable element participate according to its position in the DOM, while positive `tabindex` values impose a custom order. Positive values are usually discouraged because they make focus behavior harder to maintain and can create an order that differs from the document structure.

CSS visual reordering, such as flexbox or grid `order`, does not necessarily change the underlying DOM sequence. If the visual presentation and DOM order disagree, keyboard users may encounter controls in an unexpected sequence. The robust solution is usually to arrange the DOM in the intended logical order rather than trying to repair it with `tabindex`.

Focus order is especially important for forms, menus, dialogs, and interactive layouts. Developers should test the page using only the keyboard and verify that focus is visible, predictable, and does not skip important controls or move into an illogical part of the interface.

Key points

• Keep DOM order aligned with the intended visual and interaction order.
• Use native interactive HTML elements whenever possible.
• Use `tabindex="0"` to add custom controls to normal sequential focus when necessary.
• Avoid positive `tabindex` values for routine focus management.
• Test the complete interface with `Tab` and `Shift+Tab` to verify logical focus movement.

Interview questions

What is sequential focus navigation?

Sequential focus navigation is the order in which keyboard focus moves through focusable elements, commonly when the user presses `Tab`. A good order follows the logical reading and interaction sequence of the page. This lets keyboard users understand where they are and what they can operate next. In most cases, maintaining a sensible DOM order provides the correct focus sequence.

How would you fix an incorrect tab order?

First, I would inspect the DOM and determine whether its order matches the intended interaction order. I would normally fix the DOM structure rather than adding positive `tabindex` values. I would also check whether CSS flexbox or grid is visually reordering elements. Finally, I would retest the interface with `Tab` and `Shift+Tab` to confirm that focus now follows the expected sequence.

What is the difference between `tabindex="0"` and `tabindex="-1"`?

`tabindex="0"` makes an element participate in normal sequential keyboard focus. `tabindex="-1"` removes the element from sequential `Tab` navigation while still allowing focus to be assigned programmatically with methods such as `element.focus()`. This distinction is useful for focus management in components such as dialogs and menus. Neither value creates a custom positive ordering.

Why can CSS `order` create an accessibility problem?

CSS `order` can change the visual arrangement without changing the underlying DOM sequence. Sequential keyboard navigation generally follows the document's focus order rather than simply following the pixels on screen. That can cause a keyboard user to encounter controls in an order that differs from what a sighted user sees. A better approach is usually to make the DOM reflect the intended logical sequence and use CSS for presentation.

Why should developers avoid positive `tabindex` values?

Positive `tabindex` values impose an explicit focus priority that can override the natural document sequence. As an application changes, developers must keep those numbers synchronized across potentially many elements. This can produce surprising navigation and maintenance problems. Using a logical DOM order and `tabindex="0"` or `-1` for specific focus-management needs is generally more robust.