WCAG 1.3.2: How to Fix Reading Order and Meaningful Sequence

Last updated: 2026-03-22

Level A Perceivable WCAG 1.3.2

What This Criterion Requires

WCAG 1.3.2 requires that when the order in which content is presented affects its meaning, a correct reading sequence can be programmatically determined. This means the DOM order of content must match the intended visual reading order, because assistive technologies such as screen readers follow the source code order, not the visual layout. CSS techniques like flexbox order, grid placement, absolute positioning, and float can rearrange visual presentation without changing the underlying DOM order, creating a disconnect between what sighted users see and what screen reader users hear. For example, if a sidebar visually appears on the right but appears first in the DOM, a screen reader user encounters the sidebar content before the main content. This criterion does not require that all content have a single reading order -- only that when sequence matters for understanding, the programmatic order matches the meaningful sequence. Content where order is irrelevant, such as a set of navigation links, does not need a specific DOM order.

Why It Matters

Screen readers and other assistive technologies present content to users in the order it appears in the DOM, regardless of how CSS visually rearranges elements on screen. When developers use CSS flexbox order, grid placement, or absolute positioning to change the visual order without adjusting the DOM, screen reader users encounter content in a sequence that may not make logical sense. Imagine reading a recipe where the cooking instructions appear before the ingredient list, or an article where the conclusion is read before the introduction. This kind of disorienting experience is exactly what happens when DOM order and visual order diverge. This issue also affects keyboard navigation, as the Tab key follows DOM order by default, causing focus to jump around the page unpredictably for keyboard users. Maintaining a meaningful sequence in the source code ensures that all users, regardless of how they access the content, receive information in a logical and understandable order.

Common Failures and How to Fix Them

CSS flexbox order property rearranging content

The CSS order property is used to rearrange flex items visually, but the DOM order remains different. Screen readers follow the DOM order, so users hear content in an illogical sequence that does not match the visual layout.

Inaccessible 
<style>
  .container { display: flex; }
  .sidebar { order: 2; }
  .main-content { order: 1; }
</style>
<div class="container">
  <aside class="sidebar">Related links and ads</aside>
  <main class="main-content">Article content here</main>
</div>
<!-- Screen readers read sidebar first, then main content -->
Accessible 
<style>
  .container { display: flex; }
</style>
<div class="container">
  <main class="main-content">Article content here</main>
  <aside class="sidebar">Related links and ads</aside>
</div>
<!-- DOM order matches the intended reading order -->

CSS Grid placing items in a different visual order than DOM

CSS Grid is used to place content areas in visual positions that do not match the DOM order. The heading appears after the body content in the source but is visually positioned above it using grid-row.

Inaccessible 
<style>
  .layout {
    display: grid;
    grid-template-rows: auto auto;
  }
  .body-text { grid-row: 2; }
  .heading { grid-row: 1; }
</style>
<div class="layout">
  <div class="body-text"><p>This article explains...</p></div>
  <div class="heading"><h1>Understanding Accessibility</h1></div>
</div>
Accessible 
<style>
  .layout {
    display: grid;
    grid-template-rows: auto auto;
  }
</style>
<div class="layout">
  <div class="heading"><h1>Understanding Accessibility</h1></div>
  <div class="body-text"><p>This article explains...</p></div>
</div>

How to Test

  1. Disable CSS in the browser (using a Web Developer toolbar or browser settings) and verify that the content still reads in a logical, meaningful order.
  2. Use a screen reader to navigate through the page linearly and compare the reading order to the intended visual reading sequence.
  3. Search the CSS for uses of flexbox order property, grid-row/grid-column placement, and absolute/fixed positioning that could create a mismatch between visual and DOM order.
  4. Tab through the page with a keyboard and verify that the focus order follows a logical sequence that matches the visual layout.

CMS-Specific Guidance

This criterion commonly causes issues on these platforms:

Further Reading

Related WCAG Criteria