CSS Grid Lanes, a new layout technique shipping in browsers, inherently breaks the tab/reading order because the browser places items based on column height rather than DOM order. This mismatch causes WCAG 2.4.3 failures for keyboard and screen reader users. The `flow-tolerance` property can mitigate the issue by defining a threshold for treating columns as equal height, but often requires very high values and isn't a complete fix. The upcoming `reading-flow` CSS property could solve this properly, but it's only implemented in Chromium and doesn't yet work with Grid Lanes. Safari has shipped Grid Lanes without Reading Flow support, leaving developers with inadequate tools. Recommendations include always testing with keyboard/screen reader, increasing `flow-tolerance`, and falling back to regular CSS Grid when needed.
Table of contents
Intro to Grid lanesPlacement toleranceDemosReading flowThe title of this postBonus: Another solutionConclusion22.8K Impressions1 Comment