• Success Criterion 1.1.1
  • Conformance level A

Complex Infographic With No Long-Form Text Description

1.1.1 — Non-text Content

Scenario

Setting

An online clothing store's product listing page

What’s wrong

Complex images (charts, diagrams, infographics) with only a short alt and no long description mechanism anywhere.

Example 

<div class="product-tile">
  <img src="denim-jacket.jpg" alt="Classic Denim Jacket">
  <button aria-haspopup="dialog">Size guide</button>
</div>
<!-- clicking "Size guide" opens a modal containing this image -->
<img src="size-guide-infographic.png" alt="Size guide">
<!-- the infographic actually contains a full measurement chart with 6 size ranges -->

Why it matters

A shopper comparing jackets in the grid opens the size guide from a product tile and still can't get the actual measurements from "size guide" alone, so they either guess or abandon the purchase.

How to test

Look for a 'read more', linked detail page, or expandable description near complex images (charts, infographics, diagrams): if only a one-line alt exists, it fails.

How to fix

Make the full content available as real text or a table alongside a short label. A short alt is fine as a label, but complex information needs a real text equivalent nearby.

<img src="size-guide-infographic.png" alt="Size guide summary" aria-describedby="size-guide-full">
<div id="size-guide-full">
  <table><!-- real, accessible measurement table --></table>
</div>

Outcome

A shopper opens the size guide modal from the product tile, reads the full measurement table with a screen reader, and picks the correct size on the first order.

Who is affected

Blind and low-vision shoppers browsing the listing grid need the full measurement data, not just a label, to choose a size with confidence.

Learn more

Related scenarios