Back-in-Stock and Out-of-Stock Alerts: The Accessibility Details Most Stores Miss

Every online store has to tell shoppers two small but important things: “this is sold out” and “it’s back.” Those messages seem trivial. They are usually a grey “Out of stock” label, a greyed-out button, and a little “Notify me when available” form. But for a shopper using a screen reader, keyboard, or high-contrast settings, these tiny pieces of interface are exactly where stores quietly lose sales — and quietly create legal risk.

Here is the problem in one sentence: if the “out of stock” state is only shown with color, and the “notify me” form is not properly labeled, a large group of your customers cannot tell what is happening or ask to be told when it changes. They add the item to their cart and get a confusing error. Or they fill in the form and never hear whether it worked. Or they simply move on to a competitor whose store speaks to them clearly.

You do not need to be a developer to understand or fix most of this. This guide walks through what goes wrong, why it matters legally and commercially, and what to check on your own store today.

Why this small feature matters more than it looks

Stock-status messaging touches almost every part of accessibility at once:

  • Communicating state without relying on color — a sighted shopper sees the greyed-out button and understands. A colorblind shopper or a screen reader user may not.
  • Announcing changes — when you click “Notify me” and a confirmation appears, that confirmation has to be announced, not just shown. Screen readers do not automatically read text that quietly appears on the page.
  • Forms — the “notify me” email field is a form, and forms are the single most common source of accessibility complaints and lawsuits.
  • Keyboard operation — everything from the “notify me” trigger to the submit button has to work without a mouse.

Under the Web Content Accessibility Guidelines (WCAG) 2.2 Level AA — the standard that courts in the United States point to for the Americans with Disabilities Act, and that the European Accessibility Act (EAA) effectively requires for e-commerce sites in the EU — several rules apply directly here. Success Criterion 1.4.1 (Use of Color) says you cannot convey information with color alone. 4.1.3 (Status Messages) says important updates must be announced to assistive technology. 3.3.2 (Labels or Instructions) says every form field needs a clear, programmatic label. None of these are obscure. They are the exact places stock alerts go wrong.

And this is not a fringe audience. A meaningful share of your shoppers use some form of assistive technology or accessibility setting — screen readers, screen magnifiers, keyboard-only navigation, or high-contrast and colorblind modes. When your “back in stock” flow excludes them, you are turning away ready-to-buy customers who have literally raised their hand to be notified.

Problem 1: “Out of stock” shown only with color or a faded button

The most common failure is the simplest. A product that has sold out gets a greyed-out “Add to cart” button and maybe the button text stays the same. Visually, the low contrast signals “you can’t click this.” But a screen reader announces the button by its accessible name and state — and if that name is still “Add to cart” and the button is not marked as disabled, the shopper is told they can add the item. They try. They get a jarring error, or nothing happens.

How to check it yourself: Turn on your device’s built-in screen reader — VoiceOver on Mac and iPhone, or Narrator on Windows — and navigate to a sold-out product. Listen to what the button announces. Does it say something like “Add to cart, dimmed” or “Sold out, unavailable”? Or does it still cheerfully say “Add to cart, button” as if nothing is wrong?

What good looks like: The unavailable state should be communicated in text and in the button’s programmatic state, not just its color. Instead of a faded “Add to cart,” show a clearly worded “Sold out” or “Out of stock” label as real text, and mark the button as disabled or replace it with the “Notify me” action. The words carry the meaning, so it survives regardless of how the shopper perceives color.

This is also a contrast issue. Greyed-out “out of stock” text is frequently so faint it fails WCAG’s 4.5:1 contrast minimum (Success Criterion 1.4.3). Ironically, the very styling meant to say “this is inactive” can make the message unreadable for shoppers with low vision. If you want to signal inactivity, do it with words and a clear icon plus text — not just a pale grey.

Problem 2: The “Notify me” form has no real label

When an item is out of stock, most stores swap in a small form: an email field and a “Notify me when available” button. Because it is small and often appears inline, it is one of the most frequently unlabeled forms on the entire site.

A common pattern uses placeholder text (“Enter your email”) as the only label. Placeholders are not labels. They disappear the moment someone starts typing, they often fail contrast requirements, and many screen readers do not reliably announce them as the field’s purpose. A shopper tabbing to the field may hear only “edit text, blank” with no idea what to enter.

How to check it yourself: Using your keyboard alone, press Tab until focus lands on the email field. With the screen reader on, does it clearly announce something like “Email address, edit text”? If it just says “edit text” with no label, the form fails.

What good looks like: Every field needs a real, programmatic label associated with it. On most store platforms and page builders, this means using the label field the form tool provides rather than repurposing the placeholder. A visible label above the field is best — it helps everyone, not only screen reader users, and it does not vanish when typing begins. If your design truly cannot show a visible label, the field still needs a hidden-but-programmatic label so assistive technology can announce it. If you use a form or email-capture app, check its settings for a “label” or “accessible name” option before you assume it is fine.

For a deeper walkthrough of getting form labels, errors, and instructions right, our accessible forms guide covers the full checklist.

Problem 3: The confirmation message is never announced

This is the subtle one, and it is the reason so many “notify me” flows technically “work” but still exclude people.

You fill in your email, click the button, and a friendly message appears: “Thanks! We’ll email you when this is back.” A sighted shopper sees it and relaxes. But a screen reader does not automatically read text that quietly appears on the page after an action. Unless that confirmation is built as a proper status message (an ARIA live region, in technical terms), the screen reader stays silent. The shopper has no idea whether their request went through. Did it submit? Did it fail? They are left guessing, and many will assume it broke.

The same applies to error messages. If someone enters an invalid email and the form shows “Please enter a valid email address” in red text below the field, that message must be announced and must not rely on red color alone to signal the problem. Otherwise a colorblind or screen reader shopper never learns why the form did not submit.

How to check it yourself: With the screen reader running, complete the “notify me” form and submit it. Close your eyes or look away. Did the screen reader say the confirmation out loud? Then try submitting a bad email (like “test@”) and listen again. Did it announce the error? If either update was silent, that is a WCAG 4.1.3 (Status Messages) failure.

What good looks like: Confirmation and error messages should be announced automatically the moment they appear, without the shopper having to hunt for them. Good form apps and themes handle this correctly out of the box; many do not. If yours is silent, that is the single most valuable thing to fix, because it is invisible in a normal visual test and yet it breaks the entire feature for assistive technology users. Our guide to accessible toast and notification messages explains this “announced, not just shown” idea in more depth and applies to any success or error banner on your store.

Problem 4: Keyboard users get stuck or lost

Some stores hide the “notify me” form behind a button or reveal it in a small pop-up. That is fine — as long as it works with a keyboard.

Two things commonly break. First, the trigger that opens the form has to be reachable and operable with the Tab and Enter keys, not only a mouse click. Second, if the form opens in a modal or slide-out, keyboard focus needs to move into it so the shopper can actually type, and when they close it, focus should return sensibly to where they were. When this is done poorly, keyboard users either cannot open the form at all, or they open it and focus stays stranded behind it, leaving them unable to reach the field.

How to check it yourself: Put your mouse aside. Use only Tab, Shift+Tab, and Enter. Can you reach the “notify me” trigger, open it, move to the email field, type, and submit — all from the keyboard? Can you tell where you are the whole time, with a visible outline showing which element is focused? If focus disappears or you get trapped, that is a problem.

What good looks like: Everything is reachable and operable by keyboard, focus is always visible, and opening or closing the form moves focus in a logical way. If your notify-me form lives in a pop-up, our accessible modals and pop-ups guide covers focus handling in detail.

Problem 5: Stock status inside product variants

If you sell products with variants — sizes, colors, styles — stock status gets trickier. A shirt might be in stock in medium but sold out in large. When a shopper selects “large,” the availability changes, and often the “add to cart” button and price update too.

For a sighted shopper this is obvious: the swatch greys out, the button changes. For a screen reader user, if that change is not announced, they select “large,” hear nothing, and do not realize the option they just chose is unavailable. This combines the color problem, the status-message problem, and variant handling all at once, and it is where more complex stores tend to fail.

How to check it yourself: With the screen reader on, select different variants of a product where some are sold out. Does the store announce when a chosen option is unavailable? Or does it silently update the button while telling the shopper nothing?

What good looks like: When selecting a variant changes availability, that change should be announced, and the unavailable state should be clear in text, not just a faded swatch. Our guide to accessible product variant swatches walks through getting this right without a developer rebuilding your theme.

A five-minute self-check you can run right now

You do not need special tools. Every recent Mac, Windows, iPhone, and Android device has a built-in screen reader. Here is a quick pass:

  1. Find a sold-out product. Turn on your screen reader and navigate to the button. Does it clearly say the item is unavailable, in words — not just visually greyed out?
  2. Tab to the “notify me” email field. Does it announce a real label, or just “edit text, blank”?
  3. Submit the form and look away. Was the confirmation spoken aloud?
  4. Submit a bad email. Was the error announced, and is it shown with more than just red color?
  5. Put the mouse down. Can you do the whole flow with only the keyboard, with a visible focus outline the entire time?

If any step fails, you have found a real gap that is costing you both customers and compliance. Most of these are fixable within your store platform’s settings or your form app’s options — no theme rebuild required.

Why this is worth your time

Out-of-stock and back-in-stock messaging is not a corner case. It is a moment when a customer is telling you they want to buy from you — they just need you to remember them when the item returns. If your store cannot capture that intent from every shopper, you lose revenue you had already earned, and you do it silently, with no error in your analytics to point at.

It is also low-hanging compliance fruit. The failures here map directly onto well-known WCAG 2.2 AA criteria that come up repeatedly in ADA demand letters and EAA complaints: color-only information, unlabeled form fields, and unannounced status messages. Fixing them measurably lowers your legal exposure while making your store work better for everyone — including sighted shoppers who benefit from clearer labels and messages.

For the bigger picture on getting your whole purchase flow right, see our accessible e-commerce checkout guide, which covers the path from product page to confirmation.

We’re building a simple accessibility checker for non-developers — no DevTools, no jargon. Join our waitlist to get early access.