The Accessibility Problem with Modern Layouts
When CSS layouts first emerged, developers had limited options. Elements displayed in the order they appeared in the HTML source, making the relationship between source code and visual presentation straightforward. Flexbox and Grid changed everything by allowing developers to completely rearrange elements visually without changing their underlying order in the document.
The Web Content Accessibility Guidelines (WCAG) address this directly. Technique C27 states that the objective is to ensure the order of content in the source code is the same as the visual presentation of the content. When source order and visual order diverge, several problems emerge for users navigating with keyboards or assistive technologies.
Screen readers follow the DOM order when reading content. If a sidebar appears visually before main content but comes after in the HTML, screen reader users encounter the main content first, even though visually oriented users see the sidebar first.
Keyboard navigation compounds this issue. The Tab key moves focus through interactive elements following DOM order, not visual position. Properly structured layouts that account for reading order ensure all users can navigate your site effectively.
Our web development services prioritize accessibility from the ground up, ensuring your websites work for everyone.
Why Reading Order Matters
1.3.2
WCAG Success Criterion for Meaningful Sequence
DOM
Default focus order for screen readers
Visual
What users expect from layouts
Understanding the CSS Reading-Flow Property
The reading-flow property provides container-level control over how accessibility tools and keyboard navigation determine element order. It belongs to the CSS Display Module Level 4 specification and is designed specifically to address the visual-to-source-order disconnect that modern layouts can create.
When applied to a flex container, grid container, or block container, reading-flow establishes a "reading flow container" that changes how child elements are exposed to assistive technologies and focus navigation.
Reading-Flow Values for Flexbox
| Value | Description |
|---|---|
normal | Maintains DOM order (default) |
flex-visual | Focus follows visual order accounting for flex-direction |
flex-flow | Focus follows flex flow algorithm |
Reading-Flow Values for Grid
| Value | Description |
|---|---|
grid-rows | Row-by-row focus order |
grid-columns | Column-by-column focus order |
grid-order | Focus follows DOM order as modified by grid positioning |
For complex CSS layouts, understanding these values helps ensure keyboard users experience your site as intended.
1.container {2 display: flex;3 flex-direction: row-reverse;4 reading-flow: flex-visual;5 /* Focus order now matches visual order */6}7 8/* Without reading-flow: focus is One, Two, Three */9/* With reading-flow: focus is Three, Two, One */Understanding the CSS Reading-Order Property
While reading-flow handles container-level ordering, the reading-order property provides fine-grained control at the item level. It allows developers to override the reading order for specific elements within a reading flow container.
To use reading-order, first establish a reading flow container by setting reading-flow to a value other than normal on the parent. Then apply reading-order with an integer value to individual children.
Reading-Order vs Order Property
The reading-order property differs fundamentally from the existing CSS order property:
order: Controls visual placement in flex and grid containersreading-order: Controls accessibility and focus order
They can be used independently or together, providing flexibility for different optimization goals.
For advanced CSS techniques, combining these properties creates powerful accessible layouts.
1.container {2 display: flex;3 reading-flow: source-order;4}5 6.item-1 { reading-order: 3; }7.item-2 { reading-order: 1; }8.item-3 { reading-order: 2; }9 10/* Focus order: item-2, item-3, item-1 */11/* (ascending reading-order values) */Practical Grid Implementation
Grid layouts often create significant visual-to-source-order mismatches. Items placed at specific grid positions may appear far from their DOM position.
Consider a grid where some items span multiple rows or columns. Without reading-flow, focus follows source order through all items, jumping across the grid unpredictably.
Grid Reading-Flow Values
grid-rows: Focus follows visual row-by-row scanning, matching how most users visually scan grid layoutsgrid-columns: Focus follows column-by-column reading, suitable for layouts designed for vertical scanning
For full-width layout patterns, understanding how focus moves through your grid is essential for creating intuitive user experiences.
Frequently Asked Questions
Container-Level Control
Use reading-flow on flex and grid containers to align focus with visual order
Item-Level Override
Use reading-order for fine-grained control over individual element focus sequence
Progressive Enhancement
Properties work in supporting browsers; others fall back to DOM order
WCAG Compliance
These properties help satisfy WCAG Success Criterion 1.3.2 for meaningful sequence
Sources
- CSS-Tricks: What We Know (So Far) About CSS Reading Order - Comprehensive coverage of
reading-flowandreading-orderproperties with practical code examples - Chrome for Developers: Use CSS reading-flow for logical sequential focus navigation - Official Chrome documentation explaining the design rationale and implementation details
- W3C: Technique C27 - Making the DOM order match the visual order - WCAG 2.0 compliance requirement for matching DOM and visual order
- Adrian Roselli: HTML Source Order vs CSS Display Order - Accessibility expert's deep dive into WCAG violation risks
- WebAIM: Flexbox and the Screen Reader Experience - Screen reader behavior with CSS order property