v137 · dom

CSS reading-flow, reading-order properties

The reading-flow CSS property controls the order in which elements in a flex, grid or block layout are exposed to accessibility tools and focused via TAB keyboard focus navigation.

concepts

  1. reading-flow

    reading-flow and reading-order let CSS reorder how AT and tab navigation traverse a grid/flex/masonry layout, decoupling DOM order from visual order without ARIA.

  2. Flex Layout Fix

    The canonical a11y bug: flex-direction: row-reverse jumbles keyboard tab order. reading-flow: flex-visual snaps focus back to visual order without rearranging the DOM.

  3. Tab Walker

  4. Card Grid Reorder

    Nine cards placed at explicit grid positions that mismatch their DOM order. Toggle reading-flow: grid-rows on/off and Tab through — without it focus follows DOM order, with it focus follows the visual grid row-by-row. A live focus trace shows the sequence.

    Walk a real toolbar with Tab while switching layout, reading-flow, and per-button reading-order. Live trace shows every focus stop and DOM vs resolved walk side-by-side.

  5. Form Layout

    A real two-column settings form (Account + Notifications) where DOM order traverses column-by-column. reading-flow: flex-visual fixes Tab to follow the row-by-row visual reading expectation with a live focus trace showing the difference.

  6. Masonry Flow

    A Pinterest-style masonry grid where cards are arranged in columns. reading-flow: flex-visual makes Tab traverse left-to-right across rows instead of down each column. Three modes: DOM order, flex-visual, and per-card reading-order priority overrides.

why it shipped

We want to allow the content displayed on a screen to be navigated visually and not always follow the DOM order.

references