reading-flow | CSS CSS Properties

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.

Quick example

.grid-reordered {
  display: grid;
  /* Ensures screen readers read the items in the order they appear on screen */
  reading-flow: grid-order;
}

Quick facts

Initial value

normal

Inherited

Applies to

block, flex, and grid containers

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.

View on caniuse.com → View on MDN → View on webstatus.dev → Learn more about Baseline →

137+