The reading-flow and reading-order proposed CSS properties aim to specify the source order of HTML elements within the DOM tree, essentially dictating how accessibility tools perceive the sequence of elements. These properties are particularly useful for aligning the focus order of focusable elements with their visual arrangement, as required by the Web Content Accessibility Guidelines (WCAG 2.2).

Before we delve deeper, ensure you're using Chrome 137 or later.

reading-flow

Reading-flow controls the source order of HTML elements within flex, grid, or block layouts. Its primary purpose is to assist accessibility tools in delivering the correct focus order to users.

By default, its value is normal (hence, reading-flow: normal). Other valid values include:

• flex-visual
• flex-flow
• grid-rows
• grid-columns
• grid-order
• source-order

Let's begin with the flex-visual value. Imagine a flex row containing five links. Assuming a left-to-right reading direction (which can be altered using the direction CSS property), it would appear as follows:

Now, if we apply flex-direction: row-reverse, the links are displayed 5-4-3-2-1. The issue arises as the focus order still begins from 1 (tabbing through them!), which is visually incorrect for left-to-right readers.

However, applying reading-flow: flex-visual ensures the focus order also becomes 5-4-3-2-1, aligning with the visual order (an accessibility necessity!):

<a>1</a>
<a>2</a>
<a>3</a>
<a>4</a>
<a>5</a>

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

To revert to the default flex behavior, use reading-flow: flex-flow. This is similar to reading-flow: normal, except the container remains a reading flow container, essential for reading-order (we'll explore this shortly).

For now, let's examine the grid-specific values. In the grid below, the grid items are scrambled, leading to a disordered focus sequence.

This can be corrected in two ways. One method is setting reading-flow: grid-rows, which establishes a row-by-row focus order:

<a>1</a>
<a>2</a>
<a>3</a>
<a>4</a>
<a>5</a>
6
7
8
9
10
11
12

div {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 100px;
  reading-flow: grid-rows;
<p>a:nth-child(2) {
grid-row: 2 / 4;
grid-column: 3;
}</p><p>a:nth-child(5) {
grid-row: 1 / 3;
grid-column: 1 / 3;
}
}</p>

Alternatively, reading-flow: grid-columns establishes a column-by-column focus order.

Reading-flow: grid-order provides the default grid behavior (the scrambled version). This is akin to reading-flow: normal, except the container remains a reading flow container, necessary for reading-order (we'll cover this next).

There's also reading-flow: source-order, applicable to flex, grid, and block containers. It transforms containers into reading flow containers, enabling the use of reading-order. Frankly, unless I'm overlooking something, this seems to render the flex-flow and grid-order values redundant.

reading-order

Reading-order functions similarly to reading-flow but focuses on specific flex or grid items, or elements in a simple block container. It operates like the order property, though we might liken it to tabindex.

Note: To employ reading-order, the container must have reading-flow set to any value other than normal.

I'll demonstrate both reading-order and order simultaneously. Below is a flex container where each flex item has the order property assigned a random number, resulting in a randomized order. While we've seen that reading-flow can dictate focus order irrespective of visual order, here we're utilizing reading-order (functioning identically to order):

div {
display: flex;
reading-flow: source-order; /<em> Any value but normal </em>/<p>/<em> Features at the end due to higher values </em>/
a:nth-child(1) {
/<em> Visual order </em>/
order: 567;
/<em> Focus order </em>/
reading-order: 567;
}</p><p>a:nth-child(2) {
order: 456;
reading-order: 456;
}</p><p>a:nth-child(3) {
order: 345;
reading-order: 345;
}</p><p>a:nth-child(4) {
order: 234;
reading-order: 234;
}</p><p>/<em> Features at the beginning due to lower values </em>/
a:nth-child(5) {
order: -123;
reading-order: -123;
}
}</p>

These are somewhat peculiar numbers. I've chosen them to highlight that these numbers don't signify positions (e.g., order: 3 or reading-order: 3 doesn't imply third in the order). Lower numbers place elements closer to the start of the order, while higher numbers push them toward the end. The default value is 0. Items with identical values are arranged by source order.

In practical terms, consider this example:

div {
display: flex;
reading-flow: source-order;<p>a:nth-child(1) {
order: 1;
reading-order: 1;
}</p><p>a:nth-child(5) {
order: -1;
reading-order: -1;
}
}</p>

Among the five flex items, the first one is the one with order: -1 due to its lowest order value. The last one is the one with order: 1 because it has the highest order value. Those without declarations default to order: 0 and are positioned according to source order, fitting between the order: -1 and order: 1 flex items. The same principle applies to reading-order, mirroring order in the above example.

However, when reversing the direction of flex items, remember that order and reading-order behave differently. For instance, reading-order: -1 pulls a flex item to the beginning of the focus order as expected. Conversely, order: -1 moves it to the end of the visual order because the visual order is reversed (thus, we'd need order: 1 instead, even though that seems counterintuitive):

div {
display: flex;
flex-direction: row-reverse;
reading-flow: source-order;<p>a:nth-child(5) {
/<em> Due to row-reverse, this places it first </em>/
order: 1;
/<em> But this behavior doesn't apply to reading-order </em>/
reading-order: -1;
}
}</p>

Reading-order supersedes reading-flow. If, for example, we apply reading-flow: flex-visual, reading-flow: grid-rows, or reading-flow: grid-columns (any declaration altering the reading flow), reading-order overrides it. We could say that reading-order is applied post reading-flow.

What if I don't use flexbox or grid layout?

Clearly, this excludes all flex-y and grid-y reading-flow values; however, you can still set reading-flow: source-order on a block element and adjust the focus order with reading-order (as demonstrated earlier).

How does this relate to the tabindex HTML attribute?

They're not equivalent. Negative tabindex values make targets unfocusable, and values other than 0 and -1 aren't recommended, whereas a reading-order declaration can use any number since it's contextually tied to the reading flow container.

For completeness, I tested reading-order alongside tabindex, and reading-order appeared to override tabindex.

Moving forward, I'd only use tabindex (specifically, tabindex="-1") to prevent certain targets from being focusable (the disabled attribute is more suitable for some targets), and then utilize reading-order for everything else.

Final Thoughts

Defining reading order proves beneficial, or at least it means the order property can finally serve its intended purpose. Until all web browsers support reading-flow and reading-order (currently functional only in Chrome 137 ), order hasn't been practical because we couldn't align focus order with visual order.

The above is the detailed content of What We Know (So Far) About CSS Reading Order. For more information, please follow other related articles on the PHP Chinese website!