Focus Order: The Keyboard's Path Through Your UI

WHY IT EXISTS Not everyone can or wants to use a mouse. Users with motor disabilities, power users, and people with broken trackpads rely on keyboard navigation. Without a predictable path, a website becomes a confusing maze. Focus order exists to ensure keyboard navigation is logical, efficient, and preserves the meaning of the content.

THE MENTAL MODEL Focus order is the path a user takes through your UI's interactive elements (links, buttons, inputs) by pressing the Tab key. It should follow a logical sequence that preserves the meaning of the content. Imagine reading a book; you expect to go from page 1 to 2, not 1 to 15. A good focus order provides that same predictable experience for navigating a screen.

HOW IT WORKS By default, the focus order follows the Document Object Model (DOM) order—the sequence in which elements appear in your HTML code. This natural order is the most robust and maintainable. You can modify this sequence using the tabindex attribute. A tabindex="0" includes an element in the natural tab order if it isn't interactive by default. A tabindex="-1" makes an element focusable via script but removes it from the natural tab order. Positive tabindex values (e.g., 1, 2, 3) create a separate, rigid tabbing sequence and are an anti-pattern that should be avoided.

WHEN TO USE IT Always consider focus order in any UI with interactive elements. It is a fundamental requirement for accessibility (WCAG Success Criterion 2.4.3). It is especially critical for forms, where users need to move from one field to the next logically, and for complex components like modals, where you must trap focus within the modal until it is dismissed.

WHEN NOT TO USE IT You should never create a focus order that is completely random or contradicts the primary workflow of the page. While the focus order doesn't have to strictly match the visual layout (e.g., in a multi-column design), it must still be logical and preserve meaning. The biggest footgun is using CSS to create a visual layout that's different from the HTML source order, causing focus to jump around the page illogically.

ONE CANONICAL EXAMPLE A login form has a "Username" field, a "Password" field, and a "Sign In" button. The HTML source code should list them in that order: <input name="username">, <input name="password">, <button>Sign In</button>. When a user presses Tab, focus moves from Username, to Password, to the Sign In button. If a developer used CSS to visually place the button before the password field but didn't change the HTML, tabbing would confusingly jump from Username to the button, then back to the Password field, breaking the logical flow.