reading-flow
A powerful new property that fixes a common accessibility issue: when you reorder items visually (using Flexbox or Grid 'order'), screen readers still read them in their original code order. This property tells the browser to follow the visual layout instead.
It is documented as part of the CSS Display specification. This is an experimental technology. The syntax and behavior are still subject to change.
Syntax
/* Usage Example */
.grid-reordered {
display: grid;
/* Ensures screen readers read the items in the order they appear on screen */
reading-flow: grid-order;
}
/* Syntax */
reading-flow: normal;
reading-flow: source-order;
reading-flow: flex-visual;
reading-flow: flex-flow;
reading-flow: grid-rows;
reading-flow: grid-columns;
reading-flow: grid-order;
/* Global values */
reading-flow: inherit;
reading-flow: initial;
reading-flow: revert;
reading-flow: revert-layer;
reading-flow: unset;reading-flow Browser support
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Your first month is free
Managed WordPress hosting for faster sites.