Current Insights on CSS Reading Order

The `reading-flow` and `reading-order` proposed CSS properties aim to define the source order of HTML elements in the DOM tree, essentially guiding accessibility tools in determining element order. These properties help align the focus order of focusable elements with their visual order, as specified in the Web Content Accessibility Guidelines (WCAG 2.2).

To understand better, let’s dive in!

(Ensure you’re using Chrome 137 or higher.)

### `reading-flow`

`reading-flow` specifies the source order of HTML elements in flex, grid, or block layouts, aiding accessibility tools in providing the correct focus order.

The default value is `normal` (`reading-flow: normal`). Other valid values are:

– `flex-visual`
– `flex-flow`
– `grid-rows`
– `grid-columns`
– `grid-order`
– `source-order`

With `flex-visual`, imagine a flex row with five links. If the reading direction is left-to-right, applying `flex-direction: row-reverse` displays the links as 5-4-3-2-1. However, the focus order still starts from 1, which is visually incorrect for left-to-right reading. Applying `reading-flow: flex-visual` aligns the focus order with the visual order, an accessibility requirement:

“`css
div {
display: flex;
flex-direction: row-reverse;
reading-flow: flex-visual;
}
“`

To apply the default flex behavior, use `reading-flow: flex-flow`, similar to `reading-flow: normal`, but the container remains a reading flow container, essential for `reading-order`.

For grid layouts, `reading-flow: grid-rows` establishes a row-by-row focus order:

“`css
div {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 100px;
reading-flow: grid-rows;

a:nth-child(2) {
grid-row: 2 / 4;
grid-column: 3;
}

a:nth-child(5) {
grid-row: 1 / 3;
grid-column: 1 / 3;
}
}
“`

`reading-flow: grid-columns` establishes a column-by-column focus order. `reading-flow: grid-order` provides the default grid behavior, similar to `reading-flow: normal`, with the container remaining a reading flow container for `reading-order`.

`reading-flow: source-order` applies to flex, grid, and block containers, turning them into reading flow containers and enabling `reading-order`. It might make `flex-flow` and `grid-order` redundant.

### `reading-order`

`reading-order` functions similarly to `reading-flow` but targets specific flex or grid items, or elements in a block container. It works like the `order` property and can be compared to `tabindex`.

**Note:** To use `reading-order`, the container must have `reading-flow` set to anything other than `normal`.

Here’s an example demonstrating both `reading-order` and `order`:

“`css
div {
display: flex;
reading-flow: source-order;

a:nth-child(1) {
order: 567;
reading-order: 567;
}

a:nth-child(2) {
order: 456;
reading-order: 456;
}

a:nth-child(3) {
order: 345;
reading-order: 345;
}

a:nth-child(4) {
order: 234;
reading-order: 234;
}

a:nth-child(5) {
order: -123;
reading-order: -123;
}
}
“`

These numbers illustrate that lower numbers are closer to the beginning of the order, and higher numbers are towards the end. The default value is `0`, and elements with the same value are ordered by source order.

Consider this practical example:

“`css
div {
display: flex;
reading-flow: source-order;

a:nth-child(1) {
order: 1;
reading