Hi again 👋

If a customer clicks "Add to basket" on your best-selling product without choosing a size and nothing is added, what happens next? Perhaps the size selector turns red, or an error message appears on the page.

The problem is that neither of these guarantees that your customer knows what went wrong.

Questions to ask yourself:

Is colour the only clue that something went wrong? A customer with colour blindness may miss that change and not realise anything needs their attention. My article on colour and contrast shows you why, with an interactive demo.

Will a screen reader announce it? Someone using a screen reader won't necessarily be told when a new message appears. Without that explanation, they may think your basket button simply doesn't work.

Here are two examples I found in the wild recently:

The visuals alone can't tell us whether either message is announced.

Here's how to get it right

Show a clear message beside the size options, such as the "Please select an available size", in the second example rather than relying on colour alone.

However this still isn't quite enough.

For screen reader users, your developer can use an ARIA live region to announce the message when it appears. ARIA is often overused, but this is a good use of ARIA: making sure customers hear the explanation clearly.

Pass that on to your developer, then ask them to demonstrate the whole buying journey with a screen reader, from the error appearing to the product reaching the basket.

The goal isn't just to announce an error. It's to help your customer carry on buying.

Next week...

I'll share findings from automated scans of 59,400 Shopify and WooCommerce product pages. You'll get them here first.

Talk soon,
Dave

P.S. If you want to see the research first - hit reply and let me know!