# reading-flow / reading-order

Status: Nur Chrome 137; Safari und Firefox noch nicht (2026-09). Nicht Baseline.  
Quelle: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/reading-flow  
Seite: https://designforai.dev/de/css/reading-flow

Lässt Tastaturfokus und Screenreader-Reihenfolge der visuellen Reihenfolge von Flex- und Grid-Layouts folgen (`flex-visual`, `grid-rows`, `grid-order`) und schließt die Barrierefreiheitslücke, die `order` und dichte Grids erzeugen.

## 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: Andere Browser behalten die DOM-Reihenfolge für den Fokus; vermeide dort visuelles Umsortieren oder halte es gering.

## Prompt

Wann immer `order`, `flex-direction: *-reverse` oder dichte Grid-Platzierung die visuelle Reihenfolge ändert, setze `reading-flow: flex-visual` (Flex) oder `grid-rows` / `grid-order` (Grid) auf den Container, damit die Tab-Reihenfolge passt. Chromium-only Stand 2026-09; halte die DOM-Reihenfolge als Fallback sinnvoll.