• Success Criterion 1.3.2
  • Conformance level A

Print or PDF Export That Produces a Scrambled Reading Order

1.3.2 — Meaningful Sequence

Scenario

Setting

A grocery delivery app's shopping cart

What’s wrong

Newspaper-style print stylesheets/PDF export producing wrong linear order.

Example 

.cart-summary { column-count: 2; column-gap: 2em; }

<div class="cart-summary">
  <p>Organic Bananas</p>
  <p>$3.49</p>
  <p>Whole Milk</p>
  <p>$2.99</p>
</div>

Why it matters

Printing the cart before checkout, a shopper sees "Organic Bananas" fall at the bottom of column one while its $3.49 price jumps to the top of column two, so the exported list reads as a block of names followed by a block of unrelated prices.

How to test

Export the page to PDF or apply a print stylesheet, then read it linearly: check whether the linearized order still makes sense.

How to fix

If an item's name lands as the last line of one column and its price becomes the first line of the next, printing or exporting the cart separates the two entirely, so apply break-inside: avoid to each item block so a name and its price never get split across a column or page break.

.cart-item { break-inside: avoid; }

<div class="cart-item">
  <p>Organic Bananas</p>
  <p>$3.49</p>
</div>

Outcome

Printed or exported before checkout, the cart now lists each item's name immediately followed by its own price.

Who is affected

Screen reader users and low-vision users reading a printed or exported version of their cart lose the pairing between each item and its price.

Learn more

Related scenarios