Tab Order

Tab order refers to the sequence in which focusable elements on a web page receive keyboard focus as a user navigates using the Tab key. When a user presses Tab, the browser moves focus from the currently focused element to the next focusable element in the tab order. Pressing Shift+Tab moves focus in the reverse direction. By default, the tab order follows the order of elements in the HTML source code (the DOM order). The first focusable element in the HTML receives focus first, followed by the second, and so on. This default behavior is usually correct when the HTML source order matches the visual layout—content that appears first visually should appear first in the source. Focusable elements include links (`<a href>`), buttons (`<button>`), form inputs (`<input>`, `<select>`, `<textarea>`), and any element with a `tabindex="0"` attribute. Non-interactive elements like paragraphs, headings, and divs are not in the tab order by default, as they do not require keyboard interaction. Tab order is a critical component of keyboard accessibility. A logical, predictable tab order enables keyboard users to navigate efficiently and understand the page structure. An illogical tab order—where focus jumps unpredictably between distant parts of the page—creates confusion and makes the page difficult or impossible to use without a mouse.

Tab order matters because it directly affects the usability of a website for anyone who navigates using a keyboard. This includes people with motor disabilities who cannot use a mouse, screen reader users, power users who prefer keyboard navigation, and people using assistive technologies like switch devices or voice control. WCAG 2.0 Success Criterion 2.4.3 (Focus Order, Level A) states: "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." This means that the tab order must make logical sense—it should not confuse the user or prevent them from completing tasks. A common problem arises when CSS is used to visually reorder elements without changing the HTML source order. For example, a developer might use CSS Flexbox or Grid to move a sidebar to the right side of the page while the sidebar's HTML appears before the main content in the source. Visually, the main content appears first, but when tabbing, focus moves through the sidebar first. This disconnect between visual order and tab order creates a confusing experience for keyboard users. Another common issue is the misuse of the `tabindex` attribute. Setting `tabindex` to positive values (like 1, 2, 3) forces elements to receive focus before all elements with `tabindex="0"` or no tabindex. This creates an unpredictable tab order that is nearly impossible to maintain as the page evolves.

### Default Tab Order The default tab order is determined by DOM position—the order in which focusable elements appear in the HTML source. This is almost always the correct approach. If your HTML source order matches your visual layout, the tab order will naturally be correct. ```html <!-- Tab order: 1, 2, 3, 4 --> <button>First</button> <!-- Tab stop 1 --> <a href="/about">About</a> <!-- Tab stop 2 --> <input type="text" /> <!-- Tab stop 3 --> <button>Submit</button> <!-- Tab stop 4 --> ``` ### The tabindex Attribute The `tabindex` attribute modifies the default tab order: - **`tabindex="0"`**: Adds an otherwise non-focusable element (like a `<div>`) to the natural tab order at its DOM position. Useful for custom interactive widgets. - **`tabindex="-1"`**: Removes an element from the tab order but allows it to receive focus programmatically via JavaScript. Useful for focus management in modals and dynamic content. - **`tabindex="1"` or higher**: Forces the element to receive focus before all `tabindex="0"` elements. This is almost always a mistake and creates maintenance headaches. Avoid it. ### CSS Layout and Tab Order Modern CSS layout techniques can create disconnects between visual order and tab order: - **Flexbox `order` property**: Visually reorders elements without changing DOM order. Tab order follows DOM, not visual order. - **CSS Grid**: Can place elements in any grid cell regardless of source order. - **`position: absolute/fixed`**: Visually moves elements without affecting DOM position. The solution is to ensure the HTML source order matches the intended reading and interaction order. Use CSS for visual presentation, but structure the HTML so that the DOM order is logical. ### Focus Management in Dynamic Content Single-page applications and dynamic interfaces require active focus management: - **Modal dialogs**: When a modal opens, focus should move to the modal and be trapped within it until the modal is closed. - **Dynamically loaded content**: When new content appears (like search results or form sections), focus should move to the new content or an appropriate notification. - **Deleted content**: When an element is removed (like deleting a list item), focus should move to a logical adjacent element. ### Roving tabindex For composite widgets like tab lists, toolbars, and menu bars, a technique called "roving tabindex" is used. Only one element in the group has `tabindex="0"` at a time; all others have `tabindex="-1"`. Arrow keys move focus within the group and update the tabindex values. This allows users to Tab into the widget, use arrow keys within it, and Tab out to the next widget.

**Example 1: Logical Form Tab Order** A registration form has fields arranged in two columns: first name and last name on the first row, email and phone on the second. The HTML places the fields in reading order (first name, last name, email, phone) so that Tab moves left to right, top to bottom. This matches user expectations and the visual layout. **Example 2: CSS Reorder Problem** A developer uses CSS Flexbox with `order: -1` to visually move a "Featured" sidebar to the left of the main content, but the sidebar's HTML appears after the main content in the source. When a keyboard user tabs through the page, they navigate the main content first, then the sidebar—the opposite of what they see visually. The fix is to restructure the HTML so the sidebar appears before the main content in the source. **Example 3: Modal Focus Trap** A shopping cart page has a "Delete item" button that opens a confirmation modal. When the modal opens, focus moves to the "Cancel" button inside the modal. Pressing Tab cycles between "Cancel" and "Confirm Delete"—focus does not escape the modal. Pressing Escape or "Cancel" closes the modal and returns focus to the "Delete item" button that triggered it. **Example 4: Tab Panel Widget** A settings page uses a tab interface with three panels: Profile, Security, and Notifications. The tab list uses roving tabindex: only the active tab has `tabindex="0"`. Users press Tab to reach the tab list, use arrow keys to switch between tabs, and press Tab again to move into the tab panel content. This pattern reduces the number of tab stops while maintaining full keyboard access.