Success Criterion 1.3.2
Conformance level A

Prices or Labels Positioned Visually Near the Wrong Product in Code

1.3.2 — Meaningful Sequence

Scenario

Setting

A photo-sharing app's upload screen

What’s wrong

Absolutely positioned prices/labels visually adjacent to products but located elsewhere in page code (DOM).

Example

<div class="upload-grid">
  <img src="photo1.jpg" class="thumb">
  <img src="photo2.jpg" class="thumb">
  <img src="photo3.jpg" class="thumb">
</div>
<div class="price-tag" style="position:absolute; top:20px; left:20px;">$5 print</div>
<div class="price-tag" style="position:absolute; top:20px; left:220px;">$8 print</div>
<div class="price-tag" style="position:absolute; top:20px; left:420px;">$12 print</div>

Why it matters

A screen reader user hears all three photos, then all three prices afterward, with no way to know which price belongs to which photo.

How to test

Disable CSS around prices/labels near products: if they're absolutely positioned, check whether their DOM position matches their visual adjacency to the product.

How to fix

Nest each price with its photo in the markup instead of positioning it separately using coordinates.

<div class="upload-grid">
  <figure>
    <img src="photo1.jpg" alt="">
    <figcaption>$5 print</figcaption>
  </figure>
  <figure>
    <img src="photo2.jpg" alt="">
    <figcaption>$8 print</figcaption>
  </figure>
</div>

Outcome

Every photo is now announced together with its own print price.

Who is affected

Screen reader users and switch-access users navigating item by item lose the visual price-to-photo association completely.

Learn more

Understanding Understanding document (opens in a new tab)