The article discusses the introduction of two new CSS properties, reading-flow and reading-order, available from Chrome 137, aimed at improving accessibility in web layouts. As flex and grid layouts have become more popular, they can create discrepancies between visual order and source order in the DOM, which can hinder navigation for keyboard users. The reading-flow property ensures that accessibility tools recognize the order intended by developers, while reading-order allows for specific item ordering within a layout. Key examples are provided to illustrate these concepts effectively.
Itâs easy to create a situation where the visual order mismatches the source order in the DOM tree, leading to unexpected navigation issues.
The reading-flow property controls the order elements are exposed to accessibility tools while navigating, aiming to resolve mismatches in visual vs source order.
Reading-order allows for manual adjustments to the sequencing of items in a reading flow container, adapting layouts for better accessibility.
Example: In a flex layout, elements can have their visual order reversed yet still maintain a source order for keyboard navigation using the TAB key.
Collection
[
|
...
]