• Success Criterion 1.3.2
  • Conformance level A

Multi-Column Article Whose Code Order Interleaves the Columns

1.3.2 — Meaningful Sequence

Scenario

Setting

A budget airline's flight search results

What’s wrong

float-based multi-column article where page code (DOM) reading order interleaves columns nonsensically.

Example 

<div class="flight-card outbound" style="float:left; width:48%;">Flight A1 - 8:00 AM - $120</div>
<div class="flight-card return" style="float:right; width:48%;">Flight B1 - 6:00 PM - $135</div>
<div class="flight-card outbound" style="float:left; width:48%;">Flight A2 - 11:00 AM - $110</div>
<div class="flight-card return" style="float:right; width:48%;">Flight B2 - 9:00 PM - $140</div>

Why it matters

A screen reader user hears an outbound flight, then a return flight, then another outbound flight, and cannot tell where one list ends and the other begins.

How to test

Disable CSS on a multi-column article laid out with float: check whether the reading order interleaves the columns into a nonsensical sequence.

How to fix

Group each column's items together in the markup, and use CSS grid or flexbox instead of float for the layout.

<div class="column outbound">
  <div class="flight-card">Flight A1 - 8:00 AM - $120</div>
  <div class="flight-card">Flight A2 - 11:00 AM - $110</div>
</div>
<div class="column return">
  <div class="flight-card">Flight B1 - 6:00 PM - $135</div>
  <div class="flight-card">Flight B2 - 9:00 PM - $140</div>
</div>

Outcome

Outbound and return flights are now announced as two distinct groups, matching the visual columns.

Who is affected

Screen reader users and other non-visual users lose the visual grouping into separate outbound and return columns entirely.

Learn more

Related scenarios