Following grid and flex layouts with reading-flow
by Rachel Andrew – W3C CSS Working Group
The proposed reading-flow property in CSS Display Level 4 aims to let authors indicate that the tab order through a layout should follow the visual flow of items rather than the DOM order. This demo gives a brief overview of the use cases for this property, and a demonstration of the experimental implementation in Chrome.
Video
Transcript
I'm Rachel Andrew. I work for Google Chrome and I'm also a member of the CSS working group.
in this video, I'm going to show you a new CSS property that has an experimental implementation in Chrome: ‘reading-flow’ The property is best introduced with a short demo of the problem that it's trying to solve.
Imagine that you're creating a layout with CSS grid using auto-placed items.
By default, this will display the items in the order they are in the source and leave gaps when an item needs to move to the next row to fit.
You can see this as I tab around the layout, we're logically following the source.
To get rid of the gaps, you can use the dense packing mode ‘grid-auto-flow: dense’.
This gives me the look that I want. However what the dense packing mode does is, it takes the items out of the source order, in order to put small items into gaps left by the placement of larger ones.
Now, you can see if I tab around the layout how the navigation order jumps about.
This is because the tab order and the order used by technology, such as screen readers, follows the order of items in the DOM, not the visual order.
The same problem can be caused by flex layouts using the order property or row and column reverse, and grid layouts where items are positioned by line or grid-template-areas away from their order in the DOM.
The reading-flow property aims to solve this problem.
In the dense packing example, it's likely that the natural order to read the items is by row, so here, you'd use ‘reading-flow: grid-rows’.
The tab order now follows the rows as created by layout.
You could follow columns, with ‘reading-flow: grid-columns’.
And in this case, the tab order would follow the columns as created by the layout.
You can try this out yourself.
At the time of recording this video, you'll need to start Chrome with a runtime flag of CSSReadingFlow at the command line.
I've created a set of examples at chrome.dev/reading-flow-examples.
Take a look at these examples with Chrome using the feature flag, and compare them to how they work without reading-flow. If you have use cases yourself where this re-ordering is a problem, try using reading-flow and test them with the flag.
Also, check out the draft spec that's part of CSS Display 4.
If you have any feedback, you can raise it as an issue on the CSS working group GitHub repo, or drop me a line. I'm rachelandrew@google.com and I'd really like to hear any feedback that you have on this proposal.
This is a key moment where your feedback can really help us shape this.
Thank you.
