The reading-flow<\/code> and reading-order<\/code> proposed CSS properties are designed to specify the source order of HTML elements in the DOM tree, or in simpler terms, how accessibility tools deduce the order of elements. You\u2019d use them to make the focus order of focusable elements match the visual order, as outlined in the Web Content Accessibility Guidelines<\/a> (WCAG 2.2).<\/p>\n\n\n\n

To get a better idea, let\u2019s just dive in!<\/p>\n\n\n\n\n\n\n\n

(Oh, and make sure that you\u2019re using Chrome 137 or higher.)<\/p>\n\n\n

reading-flow<\/code><\/h3>\n\n\n

reading-flow<\/code> determines the source order of HTML elements in a flex, grid, or block layout. Again, this is basically to help accessibility tools provide the correct focus order to users.<\/p>\n\n\n\n

The default value is normal<\/code> (so, reading-flow: normal<\/code>). Other valid values include:<\/p>\n\n\n\n

\n
• flex-visual<\/code><\/li>\n\n\n\n
• flex-flow<\/code><\/li>\n\n\n\n
• grid-rows<\/code><\/li>\n\n\n\n
• grid-columns<\/code><\/li>\n\n\n\n
• grid-order<\/code><\/li>\n\n\n\n
• source-order<\/code><\/li>\n<\/ul>\n\n\n\n

  Let\u2019s start with the flex-visual<\/code> value. Imagine a flex row with five links. Assuming that the reading direction is left-to-right (by the way, you can<\/em> change the reading direction with the direction<\/a><\/code> CSS property), that\u2019d look something like this:<\/p>\n\n\n\n