v137 · dom
Form Layout
A real-world settings form split into two columns: "Account" on the left, "Notifications" on the right. Without reading-flow, Tab jumps left-column → right-column as the DOM is ordered. With reading-flow: flex-visual, Tab follows the visual left-to-right column order per row — the natural reading expectation.
Feature detection: checking…
Click into the form and press Tab to watch the focus trace. Left = DOM order, right = visual order. The form columns are arranged left → right visually but the DOM interleaves them.
Account Settings
reading-flow: off
Account
Notifications
Email alerts
Push notifications
Focus trace:
Tab through the form to see focus order…
Without reading-flow (DOM order)
Tab visits fields in DOM order:
Username → Email → Language → Timezone → Email alerts → Push → Digest → Quiet hours
Problem: all "Account" fields come first, then all "Notification" fields — the user can't work left-to-right across both columns naturally.
Username → Email → Language → Timezone → Email alerts → Push → Digest → Quiet hours
Problem: all "Account" fields come first, then all "Notification" fields — the user can't work left-to-right across both columns naturally.
With reading-flow: flex-visual
Tab follows the visual reading order:
Username → Email alerts → Email → Push → Language → Digest → Timezone → Quiet hours
Fixed: each row pair is visited together, matching how a sighted user reads across the columns.
Username → Email alerts → Email → Push → Language → Digest → Timezone → Quiet hours
Fixed: each row pair is visited together, matching how a sighted user reads across the columns.
/* Two-column form container */
.form-cols {
display: flex;
reading-flow: flex-visual; /* Tab follows visual column order */
}
/* Each column is a flex child */
.form-col {
flex: 1;
}
/* No changes to the fields themselves — reading-flow is inherited */see also
- reading-flow basics
- Flex Layout Fix — flex-direction: row-reverse
- Card Grid Reorder — grid-rows reading order
- ChromeStatus entry