The reading-flow and reading-order proposed CSS properties are designed to specify the supply order of HTML components within the DOM tree, or in easier phrases, how accessibility instruments deduce the order of components. You’d use them to make the main target order of focusable components match the visible order, as outlined within the Net Content material Accessibility Tips (WCAG 2.2).
To get a greater thought, let’s simply dive in!
(Oh, and just remember to’re utilizing Chrome 137 or larger.)
reading-flow
reading-flow determines the supply order of HTML components in a flex, grid, or block format. Once more, that is principally to assist accessibility instruments present the proper focus order to customers.
The default worth is regular (so, reading-flow: regular). Different legitimate values embody:
flex-visualflex-flowgrid-rowsgrid-columnsgrid-ordersource-order
Let’s begin with the flex-visual worth. Think about a flex row with 5 hyperlinks. Assuming that the studying route is left-to-right (by the best way, you can change the studying route with the route CSS property), that’d look one thing like this:
Now, if we apply flex-direction: row-reverse, the hyperlinks are displayed 5-4-3-2-1. The issue although is that the main target order nonetheless begins from 1 (tab by them!), which is visually incorrect for someone that reads left-to-right.
But when we additionally apply reading-flow: flex-visual, the main target order additionally turns into 5-4-3-2-1, matching the visible order (which is an accessibility requirement!):
<div>
<a>1</a>
<a>2</a>
<a>3</a>
<a>4</a>
<a>5</a>
</div>div {
show: flex;
flex-direction: row-reverse;
reading-flow: flex-visual;
}To use the default flex conduct, reading-flow: flex-flow is what you’re searching for. That is very akin to reading-flow: regular, besides that the container stays a studying circulate container, which is required for reading-order (we’ll dive into this in a bit).
For now, let’s check out the grid-y values. Within the grid under, the grid gadgets are all jumbled up, and so the main target order is in every single place.
We are able to repair this in two methods. A method is that reading-flow: grid-rows will, as you’d count on, set up a row-by-row focus order:
<div>
<a>1</a>
<a>2</a>
<a>3</a>
<a>4</a>
<a>5</a>
<a>6</a>
<a>7</a>
<a>8</a>
<a>9</a>
<a>10</a>
<a>11</a>
<a>12</a>
</div>div {
show: 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;
}
}Or, reading-flow: grid-columns will set up a column-by-column focus order:
reading-flow: grid-order will give us the default grid conduct (i.e., the jumbled up model). That is additionally very akin to reading-flow: regular (besides that, once more, the container stays a studying circulate container, which is required for reading-order).
There’s additionally reading-flow: source-order, which is for flex, grid, and block containers. It principally turns containers into studying circulate containers, enabling us to make use of reading-order. To be frank, until I’m lacking one thing, this seems to make the flex-flow and grid-order values redundant?
reading-order
reading-order kind of does the identical factor as reading-flow. The distinction is that reading-order is for particular flex or grid gadgets, and even components in a easy block container. It really works the identical approach because the order property, though I suppose we might additionally examine it to tabindex.
Observe: To make use of reading-order, the container will need to have the reading-flow property set to something apart from regular.
I’ll reveal each reading-order and order on the similar time. Within the instance under, we now have one other flex container the place every flex merchandise has the order property set to a distinct random quantity, making the order of the flex gadgets random. Now, we’ve already established that we are able to use reading-flow to find out focus order no matter visible order, however within the instance under we’re utilizing reading-order as an alternative (within the precise similar approach as order):
div {
show: flex;
reading-flow: source-order; /* Something however regular */
/* Options on the finish due to the upper values */
a:nth-child(1) {
/* Visible order */
order: 567;
/* Focus order */
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;
}
/* Options firstly due to the decrease values */
a:nth-child(5) {
order: -123;
reading-order: -123;
}
}Sure, these are some reasonably odd numbers. I’ve executed this for example how the numbers don’t characterize the place (e.g., order: 3 or reading-order: 3 doesn’t make it third within the order). As a substitute, components with decrease numbers are extra in the direction of the start of the order and components with larger numbers are extra in the direction of the tip. The default worth is 0. Components with the identical worth will probably be ordered by supply order.
In sensible phrases? Take into account the next instance:
div {
show: flex;
reading-flow: source-order;
a:nth-child(1) {
order: 1;
reading-order: 1;
}
a:nth-child(5) {
order: -1;
reading-order: -1;
}
}Of the 5 flex gadgets, the primary one is the one with order: -1 as a result of it has the bottom order worth. The final one is the one with order: 1 as a result of it has the highest order worth. Those with no declaration default to having order: 0 and are thus ordered in supply order, however in any other case match in-between the order: -1 and order: 1 flex gadgets. And it’s the identical idea for reading-order, which within the instance above mirrors order.
Nonetheless, when reversing the route of flex gadgets, understand that order and reading-order work slightly in another way. For instance, reading-order: -1 would, as anticipated, and pull a flex merchandise to the start of the main target order. In the meantime, order: -1 would pull it to the finish of the visible order as a result of the visible order is reversed (so we’d want to make use of order: 1 as an alternative, even when that doesn’t appear proper!):
div {
show: flex;
flex-direction: row-reverse;
reading-flow: source-order;
a:nth-child(5) {
/* Due to row-reverse, this truly makes it first */
order: 1;
/* Nonetheless, this conduct doesn’t apply to reading-order */
reading-order: -1;
}
}reading-order overrides reading-flow. If we, for instance, apply reading-flow: flex-visual, reading-flow: grid-rows, or reading-flow: grid-columns (principally, any declaration that does in actual fact change the studying circulate), reading-order overrides it. Let’s imagine that reading-order is utilized after reading-flow.
What if I don’t wish to use flexbox or grid format?
Effectively, that clearly guidelines out all the flex-y and grid-y reading-flow values; nevertheless, you possibly can nonetheless set reading-flow: source-order on a block aspect after which manipulate the main target order with reading-order (as we did above).
How does this relate to the tabindex HTML attribute?
They’re not equal. Destructive tabindex values make targets unfocusable and values apart from 0 and -1 aren’t really helpful, whereas a reading-order declaration can use any quantity because it’s solely contextual to the studying circulate container that comprises it.
For the sake of being full although, I did take a look at reading-order and tabindex collectively and reading-order appeared to override tabindex.
Going ahead, I’d solely use tabindex (particularly, tabindex="-1") to stop sure targets from being focusable (the disabled attribute will probably be extra applicable for some targets although), after which reading-order for all the things else.
Closing ideas
Having the ability to outline studying order is beneficial, or not less than it implies that the order property can lastly be used as meant. Up till now (or reasonably when all net browsers help reading-flow and reading-order, as a result of they solely work in Chrome 137+ for the time being), order hasn’t been helpful as a result of we haven’t been capable of make the main target order match the visible order.
