screen-reading-order

Screen readers and other assistive technologies read page content in a linear order, defined by the order of the elements in the DOM, regardless of where the content appears on screen. When the DOM order does not match the visual order, screen reader users may hear content in an illogical sequence, or in a way that changes its meaning. This often happens when:

• CSS reorders content visually, for example with the flexbox order property, flex-direction: row-reverse or column-reverse, or grid placement.
• Absolute or fixed positioning moves content away from its place in the DOM.
• The DOM itself is poorly structured, so content is written in an order that does not follow its logical flow.

As a rule of thumb, make sure the logical flow of the content matches the DOM order. Layout techniques such as positioning, flexbox, and grid are fine to use, as long as they don't change the order in a way that affects the meaning.

Pass Patterns

DOM order matches the visual order

The product name, price, and button appear in the DOM in the same order they are shown on screen.

<div class="product-card">
    <h3>Wireless headphones</h3>
    <p class="price">$89.99</p>
    <button>Add to cart</button>
</div>

Instructions placed before the form

The instructions come first in the DOM, so screen reader users hear them before they reach the fields.

<p>All fields are required. Passwords must be at least 12 characters long.</p>
<form>
    <label for="new-password">New password</label>
    <input type="password" id="new-password" />
</form>

Fail Patterns

Content reordered with CSS order

The price is shown first on screen, but it comes after the button in the DOM, so a screen reader reads the button before the price it relates to.

<div class="product-card" style="display: flex; flex-direction: column;">
    <h3>Wireless headphones</h3>
    <button>Add to cart</button>
    <p class="price" style="order: -1;">$89.99</p>
</div>

Content moved with absolute positioning

The warning appears visually above the form, but it is at the end of the DOM, so screen reader users hear it only after they have filled in the fields.

<form style="position: relative; padding-top: 3rem;">
    <label for="new-password">New password</label>
    <input type="password" id="new-password" />
    <p style="position: absolute; top: 0;">Passwords must be at least 12 characters long.</p>
</form>

Poorly structured DOM

The layout places each label next to its value using CSS grid, but the DOM lists all the labels first and then all the values, so a screen reader reads them separately.

<div style="display: grid; grid-template-columns: auto auto; grid-auto-flow: column; grid-template-rows: repeat(2, auto);">
    <span>Name</span>
    <span>Email</span>
    <span>Jane Doe</span>
    <span>jane@example.com</span>
</div>

WCAG techniques

Sufficient techniques

• G57: Ordering the content in a meaningful sequence
• C27: Making the DOM order match the visual order

Failure techniques

• F1: Failure of Success Criterion 1.3.2 due to changing the meaning of content by positioning information with CSS

Try It Yourself

Using a screen reader

1. Load the page and open a screen reader.
2. Use the screen reader's read-all command, or move through the content line by line with the arrow keys.
3. Compare the order you hear with the order of the content on screen.

Expected results: The content is read in a logical order that preserves its meaning.

Actual results: Content is read out of order, for example a price after an unrelated button, or instructions after the form they describe.

Inspecting the browser dev-tools

1. In Chrome's dev tools, open the Accessibility panel and turn on Show source order.
2. Select the container of the content you want to check, and compare the numbered source order with the visual layout.
3. Alternatively, turn off the page's CSS and check whether the content still reads in a logical order.

Expected results: The source order matches the visual order wherever the order affects the meaning.

Actual results: The source order numbers jump around the layout, or the content no longer makes sense without CSS.

FAQ

Standards and Regulations

Personas impacted by this issue

• Screen Reader
• Braille

Related Issues

• tab-order
• heading-order