reading-flow / reading-order

Solo Chrome 137; Safari y Firefox todavía no (2026-09). No es Baseline.

Chrome 137Edge 137Safari noFirefox no

Hace que el foco de teclado y el orden del lector de pantalla sigan el orden visual de los layouts flex y grid (`flex-visual`, `grid-rows`, `grid-order`), corrigiendo el hueco de accesibilidad que crean `order` y los grids densos.

First in DOM, shown last Second Third

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; }

HTML

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

Fallback: Los demás navegadores mantienen el orden del DOM para el foco; evita ahí el reordenado visual o mantenlo mínimo.

Fuente: developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/reading-flow

Prompt

Siempre que `order`, `flex-direction: *-reverse` o la colocación densa de grid cambien el orden visual, pon `reading-flow: flex-visual` (flex) o `grid-rows` / `grid-order` (grid) en el contenedor para que el orden de tabulación coincida. Solo Chromium a fecha 2026-09; mantén un orden del DOM sensato como respaldo.