CSS `reading-flow`

Description

The reading-flow CSS property is a feature designed to address the long-standing problem of the disconnect between the visual presentation of content and the logical order in which it is navigated by assistive technologies and keyboard users. With modern layout methods like Flexbox and Grid, it's easy to create visually appealing layouts where the source order of elements in the DOM does not match their visual order. This discrepancy can lead to a confusing and inaccessible user experience, where keyboard navigation jumps around the page illogically.

The reading-flow property, in conjunction with reading-order, allows developers to control the navigation and reading order of elements within a flex, grid, or block container, ensuring that it follows the visual flow. This is crucial for accessibility, as it provides a more intuitive and predictable experience for users of screen readers and other assistive technologies. Achieving interoperability for reading-flow is important for creating a consistent and accessible web for all users, regardless of how they navigate the web.

(Copied from last year's proposal.)

Specification

https://www.w3.org/TR/css-display-4/#propdef-reading-flow

web-feature

https://web-platform-dx.github.io/web-features-explorer/features/reading-flow

Test Links

https://wpt.fyi/results/css/css-display/reading-flow/tentative

Additional Signals

• https://github.com/mozilla/standards-positions/issues/1056
• https://github.com/WebKit/standards-positions/issues/378
• https://github.com/web-platform-dx/developer-signals/issues/290

Start with the CSS Display 4 reading-flow specification and review the linked web-feature entry. Run or inspect the WPT results at css/css-display/reading-flow/tentative, then determine the interoperability coverage needed; done means the feature has an agreed test scope and corresponding cross-browser results.