Perceivable · 1.3 Adaptable

Meaningful Sequence WCAG 1.3.2 · Level A

When the order of content affects its meaning, a correct reading order must be programmatically determinable, usually by keeping the source order logical even when CSS places content differently on screen.

Level
A
Since
WCAG 2.0
Principle
Perceivable
Guideline
1.3 Adaptable
Try the live demo All criteria Checklist

Live demo

Compare the order you see and hear

The same task, done two ways: switch between the version that passes and the one that fails, or put them side by side. Everything in the box is live, so try it with a keyboard, a pointer or a screen reader.

Read the steps on screen, then read the screen reader transcript for the same version. In the failing version the two orders do not match.

Live example

Passes

Return an item

Follow these steps in order.

  1. First, print the return label from your order page.
  2. Then, pack the item in its original box.
  3. Next, stick the label on the outside of the parcel.
  4. Finally, drop the parcel at any post office.

What happened

    Why it passes

    The steps are in the code in the same order as on screen, so a screen reader reads them first to last and the instructions make sense.

    Why it fails

    The steps look right, but CSS reorders them on screen. A screen reader follows the code, so the person hears "Next, stick the label on the outside of the parcel" before being told to print it.

    Examples

    Code that fails, and the fix

    Four examples, each one running: the usual ways this criterion fails, and code that passes. Listen to them, measure them, or copy the code.

    01What changes 3 lines

    Fails

    CSS order puts the steps out of sequence

    Live preview

    HTML
    <ol class="steps" style="display: flex">  <li style="order: 3">Pay for your tickets</li>  <li style="order: 1">Choose your seats</li>  <li style="order: 2">Check the booking details</li></ol>

    On screen the steps read Choose, Check, Pay, but screen readers follow the code and announce Pay first (failure F1).

    Passes

    Code order matches the visual order

    Live preview

    HTML
    <ol class="steps" style="display: flex">  <li>Choose your seats</li>  <li>Check the booking details</li>  <li>Pay for your tickets</li></ol>

    The code order is the reading order and flexbox only lays the items out in a row, so everyone meets the steps in the same sequence (technique C27).

    02

    Fails

    Layout table splits sentences across rows

    Live preview

    HTML
    <table role="presentation">  <tr><td>Flights to Lisbon</td><td>Book by Friday</td></tr>  <tr><td>from $89 return.</td><td>for free seat selection.</td></tr></table>

    Each sentence runs down a column, but the table is read row by row, so a screen reader says "Flights to Lisbon Book by Friday from $89 return."

    Passes

    Whole sentences placed side by side

    Live preview

    HTML
    <div class="promo" style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem">  <p>Flights to Lisbon from $89 return.</p>  <p>Book by Friday for free seat selection.</p></div>

    Each sentence stays whole in its own paragraph and the grid only places them in two columns, so the text makes sense in code order.

    Why it matters

    Who it helps

    Screen reader users and people who override page styles get content in code order, so a wrong order can scramble instructions or change their meaning.

    W3C: Understanding 1.3.2

    • Level A

      Level A is the minimum: failing it can shut some people out completely.

    • In WCAG versions

      Part of WCAG 2.0 since December 2008, and of every version after it.

      WCAG 1.0 checkpoints: 5.3

    • Where it is required

      Required where the law names WCAG 2.0 or later at this level: the United States, Canada, the European Union, the United Kingdom, France, Germany, Italy, Spain, the Netherlands, Ireland, Norway, Switzerland, India, Japan, Australia, New Zealand and Israel.

    How to test

    Checking it

    A few concrete steps. Automated tools find some failures; most need a person.

    1. Read the page with a screen reader or with CSS turned off and confirm the content still makes sense in that order.
    2. Check layouts that use CSS positioning, flexbox order or grid placement for content read out of its visual sequence.
    3. Confirm multi-column text and any layout tables read in the intended order.

    Common failures

    Where it breaks

    • CSS positioning or ordering shows steps in one sequence while the code, and so the screen reader, presents another.
    • A layout table splits a sentence across cells, so it no longer makes sense when read row by row.
    • Spaces or tab characters are used to lay out text in columns, so it reads as jumbled lines.

    On the Accessibility Checklist

    Related