Order, flex-direction, and positioning items using grid layout don't ally with a11y

When the visual order and DOM order doesn't match then it's gonna blow up the accessibility and user experience.

But How?

Here is the visual representation of the disconnect that happens between DOM structure and visual representation when we use order property to de-structure the elements.

And here's the visual representation of the disconnect that happens between DOM structure and visual representation when we use flex-direction: row-reverse or flex-direction: column-reverse property to de-structure the elements.

And here's the visual representation of the disconnect that happens between DOM structure and visual representation when we use grid-template-areas to de-structure the elements.

Conclusion

Even though the aria-flowto attribute is available to tweak the navigation mode it has very poor browser support. And Firefox has made an attempt to align the tab order to match with the visual order. But still, the above problems explains why we should not alter the DOM order and accessibility tree.