Meaningful Sequence

In brief

Screen readers, keyboard navigation and reader modes follow the order of the code, not the order the page appears on screen. If CSS moves things around, the code order can differ from what a sighted user sees, and the content can stop making sense.

This criterion requires that when the order of content affects its meaning, a correct reading order can be determined programmatically. The order in the code must match the meaningful order, so a heading comes before its text, a question before its answer and a step before the next step.

What does it cover?

• Reading order: The sequence in the DOM, in the PDF tags or in the accessibility tree reads in the order that preserves meaning.
• CSS reordering: Properties such as order, flex-direction: row-reverse, grid placement and absolute positioning can change the visual order. They must not change the meaning of the content for the reading order.
• Layout: Multi-column text, sidebars, cards and floating elements read in a logical sequence.
• Dynamic content: Content that is added after the page loads, such as an error message or an inserted panel, is placed next to the content it belongs to.
• Out of scope: Where focus moves and the order of focusable controls is covered by 2.4.3 (Focus Order). Instructions that depend on position are covered by 1.3.3.

Who does it affect?

Screen reader users hear content in code order, so a wrong order scrambles the meaning. People who use keyboards, switch devices or voice control, and people who use reader modes or styles of their own, also get the code order. Clear order helps people with cognitive differences and search engines too.

In the EAA and EN 301 549

The European Accessibility Act (Directive (EU) 2019/882) applies to in-scope products and services placed on the market after 28 June 2025. Recital 47 names four principles for websites and mobile applications: perceivable, operable, understandable and robust. A reading order that keeps the meaning is part of "perceivable" and "understandable".

The technical counterpart is the standard EN 301 549, which incorporates WCAG 1.3.2 by reference and turns it into separate clauses for each kind of ICT.

Clause numbers follow the "9. + WCAG number" pattern of EN 301 549. In V3.2.1 the software clause is divided into further subclauses for open and closed functionality. Check the exact numbers in the standard when you cite them.

Standard version: EN 301 549 V4.1.1 (September 2026) is based on WCAG 2.2 and is the first version prepared specifically for the EAA. It has not yet been cited in the Official Journal of the European Union, so for now it is best treated as a voluntary technical route to the EAA's requirements. Once cited, it will give a presumption of conformity. The text of criterion 1.3.2 is the same in WCAG 2.1 and 2.2.

A note on EAA scope: Article 2(4) of the Directive excludes certain content from the requirements, for example office file formats published before 28 June 2025 and archives that are not updated after that date. Content you publish or change after that date is not covered by these exclusions.

Directive (EU) 2019/882, EUR-Lex, opens in a new tab

Code examples for the web

1. CSS that changes the order

A visual order that differs from the code order can scramble what a screen reader says. Put the content in the right order in the code, and do not rely on CSS to fix it.

<div class="card" style="display:flex; flex-direction:column">
  <p>Save 20% until Friday.</p>
  <h2 style="order:-1">Spring sale</h2>
</div>

<div class="card">
  <h2>Spring sale</h2>
  <p>Save 20% until Friday.</p>
</div>

2. Layout tables

Reading across table cells mixes columns. Use CSS layout, so each block reads on its own.

<table>
  <tr>
    <td>Chapter 1 begins here and goes on…</td>
    <td>Related links…</td>
  </tr>
  <tr>
    <td>…and it ends here.</td>
    <td>More links…</td>
  </tr>
</table>

<div class="layout">
  <article>Chapter 1 begins here and goes on… and it ends here.</article>
  <aside>Related links… More links…</aside>
</div>

.layout { display: grid; grid-template-columns: 3fr 1fr; gap: 24px; }

3. Absolute positioning for layout

Absolute positioning takes content out of the flow. Keep the DOM in the reading order and use grid or flex for placement.

<div style="position:absolute; top:200px">Step 2: Confirm</div>
<div style="position:absolute; top:100px">Step 1: Enter details</div>

<ol>
  <li>Step 1: Enter details</li>
  <li>Step 2: Confirm</li>
</ol>

4. Content added after the page loads

Insert new content next to the thing it belongs to, not at the end of the page.

// The error is appended at the end of the body
document.body.appendChild(errorMessage);

// The error is inserted right after the field
field.insertAdjacentElement("afterend", errorMessage);

5. Do not use positive tabindex to repair the order

A positive tabindex creates a second order that is hard to keep right. Fix the order of the elements instead.

<a href="/a" tabindex="3">A</a>
<a href="/b" tabindex="1">B</a>
<a href="/c" tabindex="2">C</a>

<a href="/b">B</a>
<a href="/c">C</a>
<a href="/a">A</a>

Code examples for mobile

The same rule applies in native mobile apps. Screen readers read the elements in the order the platform gives them. Check that this order matches the meaning, and set the order explicitly when it does not.

iOS (SwiftUI)

import SwiftUI

struct OrderSummary: View {
    var body: some View {
        // The total is placed visually at the bottom, but we want
        // it to be read after the title and the item list.
        VStack(alignment: .leading, spacing: 12) {
            Text("Total: €42")
                .accessibilitySortPriority(1)   // read last

            Text("Items")
                .accessibilitySortPriority(3)   // read first

            Text("2 × Notebook")
                .accessibilitySortPriority(2)
        }
        .accessibilityElement(children: .contain)
    }
}

Android (Jetpack Compose)

import androidx.compose.foundation.layout.Column
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.semantics.isTraversalGroup
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.semantics.traversalIndex

@Composable
fun OrderSummary() {
    // Reading order by traversalIndex: lower values come first
    Column(modifier = Modifier.semantics { isTraversalGroup = true }) {
        Text(
            text = "Total: €42",
            modifier = Modifier.semantics { traversalIndex = 2f }
        )
        Text(
            text = "Items",
            modifier = Modifier.semantics { traversalIndex = 0f }
        )
        Text(
            text = "2 × Notebook",
            modifier = Modifier.semantics { traversalIndex = 1f }
        )
    }
}

How to test

• Read the page without styles: Disable CSS or open a reader mode. Does the text still read in a sensible order?
• Listen with a screen reader: Read the page from top to bottom with NVDA, VoiceOver or TalkBack. Does each heading come before its text, each question before its answer and each step in order?
• Compare the visual and code order: Look for order, row-reverse, absolute positioning and grid placement. If they change the order, check that the meaning survives.
• Tab through the page: Does the focus move in an order that matches the content? (The details are covered by 2.4.3.)
• Check dynamic content: Trigger errors, dialogs and inserted panels. Is the new content placed next to the content it belongs to?
• Check mobile: Swipe through each screen with the screen reader. Does the order match the visual layout and the meaning?
• Use a checker as a start: Automated tools cannot judge whether an order makes sense. Only a person can decide that.

Common mistakes

• Fixing the visual order with CSS only: The code order is what assistive technology reads.
• Putting the heading after its content in the code: The heading is read after the text it introduces.
• Using tables for page layout: Reading across the cells mixes the columns.
• Absolute positioning for the whole layout: The code order no longer matches what the page shows.
• Using a positive tabindex: It creates a second order and breaks easily.
• Appending dynamic content to the end of the page: It is read far away from where it belongs.
• Letting the order change between screen sizes: The reading order can differ between the desktop and mobile layout.
• Forgetting mobile: Overlapping or stacked elements in an app can be read in the wrong order.

Sources

• Understanding SC 1.3.2: Meaningful Sequence (W3C), opens in a new tab
• G57: Ordering the content in a meaningful sequence (W3C), opens in a new tab
• Directive (EU) 2019/882, European Accessibility Act (EUR-Lex), opens in a new tab
• EN 301 549 V4.1.1 (ETSI), opens in a new tab
• The European accessibility standard EN 301 549 has been updated (AccessibleEU), opens in a new tab

Standard version: EN 301 549 V4.1.1 (2026-09), WCAG 2.2. This page is for informational purposes only and is not legal advice. For binding requirements, refer to the official texts of the European Accessibility Act (Directive (EU) 2019/882) and EN 301 549.