Focus Order — Logical Focus Order in Complex Layouts

In this tutorial, you will learn about Focus Order. We cover key concepts, practical examples, and best practices to help you master this topic.

Focus order should follow the visual reading order, using DOM order or tabindex to ensure keyboard users navigate in a logical sequence that matches the visual presentation.

In this tutorial, you'll learn about Keyboard Navigation focus order.

What You'll Learn

By the end of this lesson, you'll understand how to establish logical focus order, how CSS Grid and Flexbox can affect focus order, and how to test focus order.

Why It Matters

When focus order does not match the visual layout, keyboard users navigate in confusing sequences that break the mental model of the page.

Real-World Use

DodaTech tests focus order on every page layout, especially CSS Grid layouts where visual order can differ from DOM order.

Focus Order Flow

flowchart LR
  A[Focus Order] --> B[DOM order by default]
  A --> C[CSS can reorder visually]
  B --> D[Tab follows DOM order]
  C --> E[Visual order differs]
  E --> F[Tab order does not match]
  F --> G[Confusing for keyboard users]

The Focus Order Problem

<!-- Visual order: A, B, C  -->
<!-- DOM order: A, C, B  -->
<!-- Tab order follows DOM: A, C, B  -->

<div class="card-grid" style="display: grid; grid-template-columns: 1fr 1fr;">
  <div tabindex="0" id="card-a">Card A (first in DOM)</div>
  <div tabindex="0" id="card-c">Card C (last in DOM, middle visually)</div>
  <div tabindex="0" id="card-b">Card B (middle in DOM, last visually)</div>
</div>

Fixing Focus Order

Always match DOM order to the visual layout order:

<!-- Fixed: DOM order matches visual order -->
<div class="card-grid">
  <div id="card-a">Card A</div>
  <div id="card-b">Card B</div>
  <div id="card-c">Card C</div>
</div>

CSS and Focus Order

CSS properties like order, float, and position: absolute can change visual order without changing DOM order:

/* CSS reorders: visual [C, A, B], DOM [A, B, C] */
.item-a { order: 2; }
.item-b { order: 3; }
.item-c { order: 1; }

Test focus order whenever you use CSS reordering.

Testing Focus Order

// Check focus order
document.addEventListener('focusin', (event) => {
  console.log('Focused:', event.target.textContent.trim());
});

Press Tab through the page and verify the visual focus order matches the expected reading order.

Common Mistakes

• Using CSS order or float that differs from DOM order: Focus order does not follow CSS visual order.
• Using positive tabindex: Creates a focus order that differs from both DOM and visual order.
• Not testing focus order on responsive layouts: Mobile layouts may have different visual orders.
• Assuming Tab order is natural: Always verify with keyboard testing.
• Hiding and showing elements changes DOM order: Dynamically shown elements may appear in unexpected positions.

Practice and Challenge

1. What does Tab order follow by default? DOM order.

2. What CSS properties can make visual order differ from focus order? order, float, position, and CSS Grid placement.

3. How do you fix focus order when using CSS Grid? Match DOM order to the visual layout order.

4. How do you test focus order? Press Tab through the page and verify the sequence matches the visual layout.

5. Challenge: Create a CSS Grid layout where DOM order differs from visual order. Fix the focus order.

FAQ

Mini Project

Create a CSS Grid dashboard layout where cards reorder on mobile. Ensure the focus order is logical in both desktop and mobile layouts.

What's Next

Continue to Keyboard Events to learn about JavaScript keyboard event handling.