reading-flow and reading-order

Before using these, consider the rules around ordering documents: [[20221221034242-DOM-order-vs-visual-order]]

These two properties are similar to order, but also affect the focus order. Both of these are a much better solution than using tabindex which is calculated at a page level, and has a myriad of other [[a11y]] issues.

reading-flow

The reading-flow CSS property controls the order that elements in a flex, grid, or block layout are exposed to accessibility tools and how they get focused using linear sequential navigation methods.

It takes one keyword value, with a default of normal, which keeps the behavior of ordering elements in DOM order. To use it inside a flex container, set its value to either flex-visual or flex-flow. To use it inside a grid container, set its value to either grid-rows, grid-columns, or grid-order.

reading-order

The reading-order CSS property lets you manually override the order of items within a reading flow container. To use this property inside a grid, flex, or block container, set the reading-flow value on the container to source-order and set the individual item's reading-order to an integer value.

https://developer.chrome.com/blog/reading-flow

[[css]]