# reading-flow / reading-order

Status: Chrome 137 only; Safari and Firefox not yet (2026-09). Not Baseline.  
Source: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/reading-flow  
Page: https://designforai.dev/css/reading-flow

Makes keyboard focus and screen-reader order follow the visual order of flex and grid layouts (`flex-visual`, `grid-rows`, `grid-order`), fixing the accessibility gap that `order` and dense grids create.

## HTML

```html
<div class="fx-053"><a href="#">First in DOM, shown last</a><a href="#">Second</a><a href="#">Third</a></div>
```

## CSS

```css
.fx-053 {
  display: flex;
  gap: 8px;
  reading-flow: flex-visual;
  font-family: system-ui
}
.fx-053 a:first-child {
  order: 3
}
.fx-053 a {
  padding: 8px 12px;
  background: #f3f4f6;
  border-radius: 6px;
  color: #111;
  text-decoration: none
}
.fx-053 :is(a,button,input,select,textarea):focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
```

Fallback: Other browsers keep DOM order for focus; avoid visual reordering there or keep it minor.

## Prompt

Whenever `order`, `flex-direction: *-reverse` or dense grid placement changes visual order, set `reading-flow: flex-visual` (flex) or `grid-rows` / `grid-order` (grid) on the container so tab order matches. Chromium-only as of 2026-09; keep DOM order sensible as the fallback.