reading-flow / reading-order

Só Chrome 137; Safari e Firefox ainda não (2026-09). Não é Baseline.

Chrome 137Edge 137Safari noFirefox no

Faz o foco do teclado e a ordem do leitor de tela seguirem a ordem visual dos layouts flex e grid (`flex-visual`, `grid-rows`, `grid-order`), corrigindo a lacuna de acessibilidade que `order` e grids densos criam.

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: Os outros navegadores mantêm a ordem do DOM para o foco; evite reordenação visual neles ou mantenha-a mínima.

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

Prompt

Sempre que `order`, `flex-direction: *-reverse` ou posicionamento denso em grid mudar a ordem visual, defina `reading-flow: flex-visual` (flex) ou `grid-rows` / `grid-order` (grid) no container para a ordem de tab bater. Só Chromium em 2026-09; mantenha a ordem do DOM sensata como fallback.