How Flexbox and Grid Layouts Can Break Accessibility (and How to Fix It)

When designing responsive layouts with CSS Flexbox or Grid, developers often change the visual order of elements using properties like flex-direction: row-reverse or order. However, this can cause an accessibility issue:
The tab navigation and screen readers follow the original DOM order, not the visually reordered layout.

This creates a mismatch between what users see and how they interact with the content using keyboard navigation or assistive technologies.

Issue Example

Suppose you have three items arranged in a row using Flexbox:

Visually, the buttons now appear as:
Three | Two | One

But when you tab through them, the order remains:
One → Two → Three

This mismatch between visual presentation and logical (DOM) order leads to accessibility issues. For keyboard users, the tabbing order doesn’t match what’s seen on screen. For screen reader users, who don’t rely on visual layout, the reading order is dictated by the DOM. This means the content is read as “One, Two, Three,” which no longer aligns with the intended structure or flow of the page.

Solution: Use the reading-flow and reading-order CSS Properties

As of May 2025, Chrome (latest version) introduces two new experimental CSS properties to address this problem:

 reading-flow

Controls how the reading order (used by screen readers and tab navigation) maps to the visual layout.

• Default: normal (DOM order)

• Flex containers:
  Use flex-visual or flex-flow

• Grid containers:
  Use grid-rows, grid-columns, or grid-order

Example:

Now, the tab navigation follows the visual layout order.

 reading-order

Let you manually define the tab or reading order for items inside a container.

To use this:

1. Set the parent container’s reading-flow to source-order
2. Set each item’s reading order to a numeric value

Example:

Browser Support

As of now:

•  Supported: Chrome (Latest, May 2025+)

•  Not yet supported: Firefox, Safari, Edge

We recommend progressive enhancement strategies—use these properties where available and maintain logical DOM order where accessibility is critical.

Final Tips

• Always test layouts with keyboard navigation and screen readers

• For broad accessibility support, try to match the DOM structure with the visual layout whenever possible

• Use the new reading-flow and reading-order properties cautiously, and check for browser compatibility