← Go Back

Tab Order

What is tab order?

Tab order is the sequence in which interactive elements receive keyboard focus when the user presses Tab (and Shift+Tab for reverse). It should follow the logical and visual order of the page so keyboard and screen reader users can navigate predictably. WCAG 2.4.3 (Focus Order) requires that the order preserve meaning and operability.

Use it when: you’re building or auditing any interface. The default order follows the DOM; fix it when layout (e.g. CSS grid, flexbox) or dynamic content would make the default order illogical.

Copy/paste checklist

  • [ ] Default = DOM order – Let focus follow the order of elements in the HTML (top to bottom, left to right in LTR). Avoid tabindex unless you must override.
  • [ ] Match visual order – If the visual order differs from DOM (e.g. responsive reflow), adjust DOM or use a minimal, documented tabindex so focus order still makes sense.
  • [ ] Skip links / landmarks – “Skip to main content” and landmarks help users jump; tab order through the main content should then follow logically.
  • [ ] No positive tabindex – Prefer DOM order; if you must override, use tabindex="0" for focusable custom components, not positive values (e.g. tabindex="1"), which create fragile, hard-to-maintain order.
  • [ ] Test with Tab – Tab through the page and confirm the order matches reading and interaction flow.

Why tab order matters

  • Keyboard users depend on a logical sequence to reach controls and content.
  • Screen reader users often use Tab to discover interactive elements; wrong order is confusing.
  • WCAG 2.4.3 requires that focus order preserve meaning and usability.
  • Predictable order reduces cognitive load and supports usability for everyone.

What good tab order includes

Checklist

  • [ ] Logical – Focus moves in an order that matches how users read and use the page (e.g. header → main → sidebar → footer, or as appropriate).
  • [ ] Consistent with layout – Visual order and focus order align; no jumping across the screen for no reason.
  • [ ] DOM-driven – Structure your HTML so the natural tab order is correct; avoid positive tabindex.
  • [ ] Dynamic content – When content is added (e.g. modal, inline message), focus management moves focus there; tab order within that content is logical.
  • [ ] Tested – You’ve tabbed through the page and confirmed the order makes sense.

Common formats

  • Default (no tabindex): Rely on DOM order. Best option when your layout matches or doesn’t conflict with it.
  • tabindex="0": Add focus to an element that isn’t normally focusable (e.g. custom control). It joins the tab order at its DOM position.
  • Rare override: Only when DOM order can’t match logic (e.g. complex grid); document why and keep overrides minimal.

Examples

Example (the realistic one)

Page: Settings with a sidebar and main content. DOM: Sidebar nav first in HTML, then main content. Visual: Same order (sidebar left, main right). Tab order is sidebar links → main form fields → primary button. No tabindex needed. Problem case: Main content appears first visually (CSS order) but is second in DOM. Fix: Reorder HTML so main content comes after sidebar in the DOM, or provide a “Skip to main content” link and ensure main content tab order is correct. You test by tabbing through and confirming focus never jumps illogically.

Common pitfalls

  • Positive tabindex: tabindex="1", tabindex="2" etc. create order that’s hard to maintain and can conflict with dynamic content. → Do this instead: Use DOM order; use tabindex="0" only to make something focusable.
  • Visual order ≠ tab order: Layout (grid, flex) reorders visually but tab order still follows DOM. → Do this instead: Align DOM with visual order where possible, or add a skip link and document any exception.
  • Never testing: Assuming order is fine. → Do this instead: Tab through key flows and fix any jump or confusion.
  • Removing focusable elements from order: tabindex="-1" on something that should be reachable. → Do this instead: Use -1 only when you move focus programmatically (e.g. focus management); don’t hide important controls from tab order.
  • Tab order vs keyboard navigation: Keyboard navigation is the full set of keyboard behaviour; tab order is the sequence of focus when using Tab.
  • Tab order vs focus management: Focus management controls where focus goes when content changes (e.g. into a modal); tab order is the sequence within the page or component.
  • Tab order vs ARIA: ARIA doesn’t change tab order; structure and tabindex do. ARIA can describe roles and names for the elements in the tab order.

Next step

Tab through one key page or flow and note where focus goes. If the order ever feels wrong (e.g. jumping across the layout), fix the DOM order or add a skip link and document the exception. Read Keyboard navigation for the full checklist.

Related Terms