reading-flow
ExperimentalA 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.
Usage example
.grid-reordered {
display: grid;
/* Ensures screen readers read the items in the order they appear on screen */
reading-flow: grid-order;
}Initial value
normal
Inherited
No
Applies to
blockContainersFlexContainersGridContainers
Animation type
notAnimatable
Values
normalsource-orderflex-visualflex-flowgrid-rowsgrid-columnsgrid-order reading-flow Browser Support
Limited availability 67% global usage
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Not ready for production without a fallback.
137+
137+