Skip to main content
Perceivable WCAG 1.3.2

1.3.2 Meaningful Sequence

When the sequence in which content is presented affects its meaning, a correct reading sequence can be programmatically determined.

Level A Serious WCAG 2.0 (new) WCAG 2.1 WCAG 2.2

What this rule means

Success Criterion 1.3.2 requires that the DOM order of content matches the intended reading sequence. When CSS is used to rearrange elements visually — through flexbox order, CSS Grid placement, absolute positioning, or floats — the underlying source order must still make sense when read linearly. Assistive technologies follow the DOM, not the visual layout.

This criterion does not prohibit visual reordering. It requires that when reading order matters to comprehension, the programmatic order preserves that meaning. A two-column layout where left and right columns are independent may reorder freely, but a step-by-step tutorial where steps appear visually in sequence must maintain that sequence in the DOM.

Why it matters

Screen readers process content in DOM order. If a page visually shows Step 1, Step 2, Step 3 but the DOM has them as Step 2, Step 3, Step 1 due to CSS reordering, a screen reader user will receive instructions out of order. This creates confusion and can make content completely unusable.

Keyboard navigation also follows DOM order by default. When visual order and DOM order diverge, Tab key navigation becomes erratic — the focus jumps unpredictably across the page, disorienting keyboard users. This affects people with motor disabilities, low vision users who rely on both visual and keyboard cues, and power users who navigate with the keyboard.

Related axe-core rules

There are no automated axe-core rules for this criterion because reading order requires human judgment. Automated tools cannot determine whether the visual sequence is meaningful. Manual testing with assistive technologies is essential for verifying compliance.

How to test

  1. Disable all CSS and verify that the page content reads in a logical, meaningful order.
  2. Use a screen reader to navigate through the page linearly and confirm the reading sequence matches the intended order.
  3. Check any use of CSS flexbox order, CSS Grid placement, float, or absolute/fixed positioning to verify that visual reordering does not break meaning.
  4. Tab through the page with a keyboard and verify that focus order follows the expected visual sequence.
  5. Inspect responsive layouts at different breakpoints — content that reflows may change reading order in ways that break meaning.

How to fix

Ensure the HTML source order matches the intended reading sequence. Use CSS for visual presentation without relying on properties that reorder the DOM:

<!-- Correct: source order matches visual order -->
<article>
  <h2>Step 1: Install dependencies</h2>
  <p>Run npm install to set up the project.</p>
  <h2>Step 2: Configure the environment</h2>
  <p>Create a .env file with your settings.</p>
  <h2>Step 3: Start the server</h2>
  <p>Run npm start to launch the app.</p>
</article>

Avoid using CSS order or grid placement to rearrange content that has a meaningful sequence:

/* Avoid this when reading order matters */
.step-1 { order: 3; }  /* Visually last but first in DOM */
.step-2 { order: 1; }  /* Visually first but second in DOM */
.step-3 { order: 2; }

/* Instead, fix the HTML source order */

When using CSS Grid, be cautious with explicit placement that reorders content:

/* Safe: items flow naturally in grid */
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

/* Risky: explicit placement may break reading order */
.sidebar { grid-row: 1 / 3; grid-column: 2; }
.main    { grid-column: 1; }

Common mistakes

  • Using flexbox order property to rearrange a sequence of numbered steps or instructions.
  • Placing a "Read more" link in the DOM before the content it refers to, then visually repositioning it below with CSS.
  • Using CSS Grid to swap the visual position of a question and its answer, confusing screen reader users.
  • Floating content so that visually related items appear together but are separated in the DOM.
  • Relying on tabindex with positive values to "fix" focus order rather than correcting the source order.
  • Responsive designs where content reflows into a single column in a sequence that makes no logical sense.

Resources