Maintain logical and semantic focus order across the page

WCAG 2.4.3
Focus Order

Content available in English only.

Accessibility isn’t just about avoiding violations — it’s about ensuring that everyone can use your product with confidence. This guide explains each rule’s intent, highlights common issues, and shows how to fix them according to WCAG and the European Accessibility Act (EAA).

These guidelines do not replace the official WCAG standards. They’re concise, developer-focused notes to help you identify and fix issues effectively.

Focus must follow a logical, top-to-bottom, left-to-right order that matches the visual layout.

Why this matters and how to fix it

Why this matters

Keyboard users move through interactive elements using the Tab key. If the visual layout does not match the focus order (e.g., due to CSS reordering, flex direction changes, or absolute positioning), users may become disoriented or unable to reach critical controls. Screen reader users rely on this order to understand structure.

How to fix this issue

Ensure focusable elements appear in the DOM in the same order they appear visually. Avoid using CSS to rearrange interactive elements (e.g., flex-direction: row-reverse, absolute positioning, or order properties). If UI must visually differ from DOM order, adjust the markup to match the intended reading sequence.

Automated detection · Manual review recommended

Developer guidance

This issue commonly appears in dashboards, card layouts, nav bars, and complex grid UIs where design choices reorder elements visually. When in doubt, check focus with the Tab key. If the focus jumps around the screen instead of following the reading flow (top → bottom, left → right), the DOM order and visual order are out of sync.

Code examples

Incorrect Implementation

<div style="display:flex; flex-direction:row-reverse;">
  <button>Previous</button>
  <button>Next</button>
</div>
<!-- Visual order: Previous | Next
     Focus order: Next → Previous (wrong) -->

Correct Implementation

<div style="display:flex;">
  <button>Previous</button>
  <button>Next</button>
</div>
<!-- Visual order matches focus order -->

Real-World Examples

Before

<header>
  <nav>
    <a href="#billing">Billing</a>
    <a href="#settings">Settings</a>
  </nav>
</header>
<main>
  <h1>Dashboard</h1>
</main>
<footer style="position:fixed; top:0;">Footer content</footer>
<!-- Visually, footer appears at top, but DOM places it last → focus jumps unexpectedly -->

After

<header>
  <nav>
    <a href="#billing">Billing</a>
    <a href="#settings">Settings</a>
  </nav>
</header>
<main>
  <h1>Dashboard</h1>
</main>
<footer>Footer content</footer>
<!-- Visual order and focus order now aligned -->

CSS Example (Guidance)

/* Avoid using order to rearrange interactive elements */
.bad-layout button { order: 2; }
.bad-layout a { order: 1; }
/* Instead, structure DOM to match visual layout and only style spacing/appearance */

Manual testing

  1. 1. Turn off your mouse. Navigate using only the Tab and Shift+Tab keys.
  2. 2. Observe the order in which focus moves through interactive elements.
  3. • Expected: Focus moves from top-to-bottom and left-to-right, matching visual layout.
  4. • Failure: Focus jumps to unrelated sections or appears to teleport across the screen.
  5. 3. Turn on a screen reader and use Tab or VO + Arrow navigation.
  6. • Confirm the spoken order matches how the page is visually organized.
  7. 4. Inspect layout styles for flex `order`, CSS grid reordering, or absolute positioning that changes visual reading order.
  8. 5. If present, refactor DOM structure so the semantic order matches the visual order.
eu icon getwcag

Trusted by organizations across Europe working toward WCAG and EAA conformance