1.3.2 Meaningful Sequence

WCAG 2.2 · 1.3.2 A Perceivable

What it requires

When the order in which content is presented affects its meaning, that correct reading sequence must be programmatically determinable — exposed in the DOM (or accessibility tree) so assistive technology reads it in the same order a sighted user perceives it. The visual layout and the underlying source order must agree wherever order carries meaning.

This matters most when CSS, tables, or positioning create a visual order that differs from the source order. The criterion does not forbid visual rearrangement — it requires that the meaningful sequence still be recoverable by software. Where order does not change meaning, this criterion does not apply.

  • Screen reader users — content is announced in DOM order; a mismatch makes instructions, steps, or sentences arrive scrambled and confusing.
  • Keyboard users — tab order follows source order, so a wrong sequence makes navigation feel random relative to the visual layout.
  • Users of reflow / zoom and reader modes — when styling is stripped or linearised, only the source order remains; if it is wrong, the content becomes illogical.
  • Users of text-to-speech and braille displays who depend entirely on the programmatic sequence.

How to detect it

Ways to test meaningful sequence
Check How Catches
Disable CSS Turn off stylesheets and read top-to-bottom; the source order should still make sense. CSS order, float, or absolute positioning that reorders content visually.
Tab order Tab through the page and confirm focus moves in a logical order matching the visuals. Interactive elements out of sequence, or tabindex misuse.
Screen reader Read with NVDA/VoiceOver; the spoken order should match the intended reading order. Visually reordered columns, sidebars read mid-sentence.
Reflow / 400% zoom Zoom and confirm linearised content stays coherent. Multi-column layouts whose source order is wrong.
Automated tools axe and similar can flag some layout-table and positioning issues. Partial — order-versus-meaning is largely a manual judgement, not fully automatable.

How to fix it

  1. Write the HTML in the logical reading order first, then use CSS for visual placement — not the reverse.
  2. Avoid CSS order, large positive tabindex, or absolute positioning to achieve a sequence that conflicts with the source.
  3. Use data tables for tabular data, never layout tables that scramble linear order.
  4. Verify with CSS disabled and with a screen reader that the sequence still reads correctly.

Order the source meaningfully, then style it — the markup already reads correctly before any CSS:

<article>
  <h2>Reset your password</h2>
  <ol>
    <li>Open the account menu.</li>
    <li>Select "Reset password".</li>
    <li>Follow the emailed link.</li>
  </ol>
</article>

Copy-paste tests

Automated coverage

There is no fully automated axe-core rule that proves meaningful sequence, because correctness depends on the intended reading order. This criterion needs manual review using the console check and steps below.

Run this in the browser console

meaningful-sequence-check.js 
// Read-only: surfaces elements whose visual order may differ from DOM order.
const suspects = [...document.querySelectorAll('*')].filter(el => {
  const s = getComputedStyle(el);
  return s.float !== 'none'
    || s.direction === 'rtl'
    || (s.display.includes('flex') && s.flexDirection.includes('reverse'))
    || (s.display.includes('grid') && (el.style.order || s.order !== '0'))
    || ['absolute', 'fixed'].includes(s.position);
});
console.table(suspects.map(el => ({
  tag: el.tagName.toLowerCase(),
  reason: getComputedStyle(el).cssText.slice(0, 60)
})));
suspects.forEach(el => { el.style.outline = '2px solid magenta'; });
console.log('Now read the page top-to-bottom and compare with DOM order.');

What to check manually: Turn off CSS (or read the raw DOM) and confirm content still reads in a sensible order; tab through the page and verify focus moves in the same order a sighted user reads it. No script can judge whether the resulting sequence preserves meaning.