Grid Lanes is a new CSS layout feature that shares properties with regular CSS Grid, making progressive enhancement straightforward by repeating the display property. However, the author warns that Grid Lanes can break keyboard focus order and are inaccessible without Reading Flow support. The recommended strategy is to use @supports to enable Grid Lanes only when both grid-lanes and reading-flow are supported, preventing inaccessible layouts in browsers like Safari that support Grid Lanes but not Reading Flow. As a fallback, flow-tolerance: infinite can help, but manual keyboard testing is still required. The author expresses growing skepticism about Grid Lanes overall, noting the complexity of managing DOM order, visual order, and focus order simultaneously.
Table of contents
Is it a big deal?An accessible progressive enhancement strategyThe deal breakerConclusion45.6K Impressions1 Comment