Level A

Screen readers, braille displays, and reflow at 1.4.10 all walk the DOM in source order -- any CSS that rearranges visual position without restructuring the markup creates a sequence mismatch.

1.3.2 Meaningful Sequence

In Plain Language

When the order of content carries meaning, 1.3.2 Meaningful Sequence requires that the reading order be programmatically determinable -- in practice, that the DOM source order matches the visual reading order[1]. Assistive technologies linearise the document by walking the DOM, not by reading pixel positions, so any visual rearrangement that does not also restructure the markup produces a sequence mismatch.

CSS hooks that move boxes without touching DOM order include position: absolute, flexbox order and flex-direction: row-reverse, CSS Grid grid-column/grid-row placement, grid-template-areas, and negative margins. Each of these changes what a sighted user sees without changing what a screen reader, refreshable braille display, or 1.4.10 reflow at 320 CSS pixels traverses.

Why It Matters

  • Screen readers, screen magnifiers tracking focus, and refreshable braille displays all walk the accessibility tree in DOM source order. When CSS reorders the visual layout, the spoken or brailled sequence diverges from the visual one and the meaning the author encoded in the visual order is lost[1].
  • Tab order follows DOM order by default. A "Next" button placed visually after "Previous" via flex-direction: row-reverse reaches the keyboard in the opposite order from the one the eye expects, so keyboard users activate the wrong control.
  • 1.4.10 Reflow linearises multi-column layouts at 320 CSS pixels by collapsing the grid, which exposes the DOM order to every sighted user on a narrow viewport. A sidebar placed visually after main content via grid-column: 2 but written first in the DOM will appear above the article on mobile.
  • Reader-mode extractors, "send to Kindle" tools, and translation pipelines all consume the linearised DOM. Visual-only ordering breaks every downstream consumer at the same time.

Examples

Do: DOM order matches visual order
Step 1: Preheat oven to 350°F
Step 2: Mix dry ingredients
Step 3: Add wet ingredients

✔ DOM order matches visual order -- screen readers read steps 1, 2, 3

<!-- DOM order matches visual order -->
<div class="steps">
  <div class="step">Step 1: Preheat oven</div>
  <div class="step">Step 2: Mix dry ingredients</div>
  <div class="step">Step 3: Add wet ingredients</div>
</div>
Don't: CSS order breaks reading sequence
Step 3: Add wet ingredients
Step 1: Preheat oven to 350°F
Step 2: Mix dry ingredients

✘ DOM says 3, 1, 2 but CSS reorders visually to 1, 2, 3 -- screen readers read the wrong sequence

<!-- DOM order does NOT match visual order -->
<style>
  .step:nth-child(1) { order: 3; }
  .step:nth-child(2) { order: 1; }
  .step:nth-child(3) { order: 2; }
</style>
<div class="steps">
  <div class="step">Step 3: Add wet ingredients</div>
  <div class="step">Step 1: Preheat oven</div>
  <div class="step">Step 2: Mix dry ingredients</div>
</div>
Do: Grid layout with matching DOM order
Navigation
Home | About | Contact
Main Content
Article text goes here.

✔ Sidebar and main content are in logical DOM order matching the grid layout

Don't: Grid placement overrides DOM order
Main Content
Article text goes here.
Navigation
Home | About | Contact

✘ Main content is first in DOM but visually placed second -- screen readers read content before navigation

How to Fix It

  1. Author the DOM in reading order first, then style. Write the HTML in the order a user should consume it. Treat CSS as a layer that places already-ordered content, not as a tool to recover an order the markup is missing.
  2. Drop the flex/grid order property on meaningful content. The order property changes only visual placement; the accessibility tree still reflects source order. If a layout requires a different visual sequence, move the elements in the markup.
  3. Watch flex-direction: row-reverse and column-reverse. These flip visual order without flipping DOM order, so Tab order, screen-reader sequence, and visual sequence all disagree at once.
  4. Audit grid placements that pull elements out of source order. grid-column, grid-row, and grid-template-areas can place a sidebar visually before a main region that is written after it in the DOM. Either restructure the markup or accept that the spoken order will be the source order.
  5. Avoid position: absolute as a layout primitive for content. Absolutely positioned blocks render wherever the coordinates put them but read in DOM order. Reserve absolute positioning for decoration and overlays, not for primary reading flow.
  6. Test by stripping CSS. Disable author styles in DevTools (Firefox: View > Page Style > No Style; Chrome via the Rendering panel or a user stylesheet). If the unstyled document still reads in a logical order, the DOM is sound. If it does not, the markup needs to be reordered, not the CSS[1].
  7. Confirm in the accessibility tree. Open the browser's accessibility inspector and read the tree top to bottom. That sequence is what assistive technology will announce.

References

  1. [1] W3C (2023). Understanding Success Criterion 1.3.2: Meaningful Sequence. W3C, Accessed 2026-04-07. https://www.w3.org/WAI/WCAG22/Understanding/meaningful-sequence.html ↩ ↩ ↩