• Success Criterion 1.3.1
  • Conformance level A

Out-of-Stock Status Shown Only Visually, Never Announced

1.3.1 — Info and Relationships

Scenario

Setting

A coworking-space booking app

What’s wrong

Availability states shown only visually — an option greyed out or struck through as 'out of stock', or stock info like '4 left' — are never announced, so screen reader users pick unavailable options or miss urgency.

Example 

<div class="desk-option unavailable">
  <span class="desk-name">Hot desk</span>
  <span class="strikethrough">4 left</span>
</div>

Why it matters

A screen reader user hears "Hot desk, 4 left" with no mention that it's sold out. They may try to book it and hit an error.

How to test

Focus an option marked 'out of stock' or showing '4 left' visually: a screen reader should announce that state too — if it's conveyed by styling alone (greyed out, strikethrough), it fails.

How to fix

When color or strikethrough carries meaning, add hidden text that says the same thing out loud.

<div class="desk-option unavailable">
  <span class="desk-name">Hot desk</span>
  <span class="visually-hidden">Sold out.</span>
  <span aria-hidden="true" class="strikethrough">4 left</span>
</div>

Outcome

A visitor hears Hot desk, sold out and moves straight to a desk they can actually book.

Who is affected

Screen reader users browsing desk availability can't tell greyed-out, struck-through options from bookable ones.

Learn more

Related scenarios