Repository navigation
CSS reading-flow #1349
Description
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
Activity
github-actions commentedon Sep 3, 2026
This comment was automatically generated based on the information you provided. Please don't edit it.
Below is additional information about the web feature (from the web-features project) which is referenced in your proposal.
If this doesn't accurately correspond to your proposal, please update your initial comment to include
web-features: <feature-id>.To find feature IDs, use the web-features explorer.
Feature reading-flow
reading-flowCSS property sets the order in which flex or grid elements are rendered to speech or reached via focus navigation. Thereading-orderproperty overrides this order.reading-flowCSS property