How CSS reading-flow Fixes Flexbox Navigation

The proposed CSS reading-flow property addresses a long-standing accessibility problem in web design: the disconnect between visual layout and keyboard focus order. In modern layouts using Flexbox, CSS properties like order or flex-direction: row-reverse visually rearrange elements without changing the underlying Document Object Model (DOM) source order. This article explains how the reading-flow property reconciles visual rendering with sequential keyboard navigation, restoring intuitive tab order for accessible web applications.

The Problem: Visual vs. DOM Order Mismatch

When navigating a webpage using the Tab key or a screen reader, browsers traverse interactive elements according to their position in the DOM source code. However, Flexbox allows developers to drastically alter the visual arrangement of these elements without touching the HTML:

  • The order property: Can move an element from the beginning of a container to the end visually.
  • flex-direction: row-reverse or column-reverse: Inverts the visual display of all items inside the flex container.

Because the keyboard focus follows the DOM order rather than the visual order, a user pressing Tab experiences erratic jumps across the screen. For example, in a row of buttons reversed using flex-direction: row-reverse, pressing Tab moves the focus from right to left instead of left to right. This visual-logical disconnect violates standard accessibility guidelines (such as WCAG 2.4.3 Focus Order) and causes confusion for sighted keyboard users.

What is the reading-flow Property?

The reading-flow property is a specification proposal in CSS Display Module Level 4. It allows developers to instruct the browser's reading and focus navigation engines to follow the layout-rendered order rather than the raw source order.

By applying reading-flow to a flex or grid container, elements inside that container are navigated sequentially based on how they appear visually on the screen.

How reading-flow Works in Flexbox

When applied to a flex container, reading-flow can take specific keyword values tailored to flex formatting contexts:

  • normal (default): Keeps the traditional behavior where focus navigation follows the DOM source tree.
  • flex-visual: Navigates items according to visual reading flow—from the inline-start to inline-end, and block-start to block-end, taking visual position into account regardless of flex direction.
  • flex-flow: Navigates items following the flex container's flex-flow direction, honoring both flex-direction (including reverse values) and individual order properties.

Practical Example

Consider a toolbar where items are visually reversed:

<nav class="toolbar">
  <button>Home</button>
  <button>Profile</button>
  <button>Settings</button>
</nav>
.toolbar {
  display: flex;
  flex-direction: row-reverse;
  reading-flow: flex-flow;
}

Without reading-flow: flex-flow, the visual display shows [Settings] [Profile] [Home], but pressing Tab selects Home first (the far right), then jumps backwards.

With reading-flow: flex-flow, the browser recognizes the reverse layout for navigation. Pressing Tab begins at Settings (the leftmost visual item) and moves sequentially to Profile and Home, matching user expectations.

The property works identically when elements are shifted using order:

.item-featured {
  order: -1; /* Visually placed first */
}

.container {
  display: flex;
  reading-flow: flex-flow; /* Ensures focus hits .item-featured first */
}

Benefits for Web Accessibility

The introduction of reading-flow provides key improvements for developers and users:

  • Preserves Semantic HTML: Developers no longer need to write JavaScript hacks or alter DOM nodes dynamically just to make visual layouts accessible to keyboard users.
  • Restores Usability for Assistive Tech: Sighted keyboard users, switch device users, and screen reader users navigating sequentially receive a coherent path through interactive interfaces.
  • Unlocks Full Flexbox Utility: Developers can safely use order and reverse flex flows responsive design breakpoints without degrading keyboard accessibility.