demo · v137

reading-flow

DOM order is 1 2 3 4 5 6. Visual order is what reading-flow and reading-order declare. Pick a mode, focus cell 1, then press Tab repeatedly — focus follows the reading flow, not the source.

probing CSS.supports("reading-flow: grid-rows")…

1 2 3 4 5 6

Screen reader / narration order: 1 → 2 → 3 → 4 → 5 → 6

Click cell 1 to focus, then press Tab. Visits below.

[no focus moves yet]

absolute positioning

These links are absolutely positioned, so their visual placement is detached from source order. The container uses reading-flow: grid-order and each card declares its narration slot.

Screen reader / narration order: Support → Overview → Settings → Confirm

DOM 1 · reading-order 2Overview DOM 2 · reading-order 1Support DOM 3 · reading-order 4Confirm DOM 4 · reading-order 3Settings

[no absolute-position focus moves yet]

the code

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  reading-flow: grid-rows;  /* or grid-columns */
}
/* Or per-item: */
.grid > :nth-child(1) { reading-order: 6; }
.grid > :nth-child(6) { reading-order: 1; }

absolute positioning

the code

see also