WCAG 2.2 Demo Suite

1.3.2 Level A Guideline 1.3 Adaptable Added in WCAG 2.0 Not detectable automatically

Meaningful Sequence

When the order in which content is presented affects its meaning, a correct reading sequence can be determined programmatically. The DOM order must match the logical reading order.

Who this affects

Screen reader users and users of any linearised view receive content in DOM order, not visual order. CSS that reorders columns visually leaves them reading in the original, now-nonsensical order.

The failure and the fix

Each example below is a self-contained page, loaded in a frame so its markup cannot affect this page. Open either one on its own to test it with a keyboard or screen reader.

Fails 1.3.2

Open the failing example in a new tab

fail.html — the problem

<h1>How to reserve a book</h1>

<!-- The visual order reads 1, 2, 3. The DOM order is 3, 2, 1, so a screen
     reader reads the instructions backwards and the tab order runs backwards
     too. Anyone following along by ear is told to collect the book before
     they have been told to reserve it. -->
<div class="steps">
  <p class="s1"><strong>Step 3.</strong> Collect it from the front desk within seven days.</p>
  <p class="s2"><strong>Step 2.</strong> We email you when it is ready.</p>
  <p class="s3"><strong>Step 1.</strong> Search the catalogue and choose Reserve.</p>
</div>

<!-- Same problem with grid placement: the article body appears on the right
     visually but comes second in the DOM, so the sidebar is read first. Here
     the sidebar is minor content being forced ahead of the main article. -->
<div class="two-col">
  <div class="body">
    <h2>About the scheme</h2>
    <p>Reservations are free for members.</p>
  </div>
  <div class="sidebar">
    <h2>Advert</h2>
    <p>Buy a tote bag.</p>
  </div>
</div>

Meets 1.3.2

Open the passing example in a new tab

pass.html — the fix

<h1>How to reserve a book</h1>

<!-- FIX 1: the DOM order is the correct reading order, so no CSS reordering is
     needed. An ordered list also communicates the sequence programmatically -
     a screen reader announces "list, 3 items, item 1 of 3". -->
<ol>
  <li>Search the catalogue and choose Reserve.</li>
  <li>We email you when it is ready.</li>
  <li>Collect it from the front desk within seven days.</li>
</ol>

<!-- FIX 2: the main article comes first in the DOM, which is also the order it
     should be read in. The layout puts it on the left with grid columns, with
     no reordering - so visual order and DOM order agree at every width.

     CSS order and grid placement are safe for PRESENTATION that does not carry
     meaning. They break 1.3.2 the moment the sequence itself is information. -->
<div class="two-col">
  <div class="body">
    <h2>About the scheme</h2>
    <p>Reservations are free for members.</p>
  </div>
  <aside class="sidebar">
    <h2>Advert</h2>
    <p>Buy a tote bag.</p>
  </aside>
</div>

How to test it

Disable CSS and read top to bottom — the sequence must still make sense. Watch for flexbox order, grid placement, and absolute positioning that move content visually without moving it in the DOM.

  • Automated

    Detecting whether a reading order is meaningful requires understanding the content.

    No axe rule maps to this criterion. It has to be checked by a person.

  • Keyboard

    Unplug the mouse. Move through the page with Tab, Shift+Tab, Enter, Space and the arrow keys. See the keyboard testing script.

  • Screen reader

    Listen to both examples with NVDA, JAWS, VoiceOver or TalkBack and compare what is announced. See the screen reader cheat sheets.

  • Visual

    Zoom to 200% and 400%, narrow the viewport to 320 px, and apply the text-spacing overrides. See the visual testing procedures.

In the specification