Promo code errors in the cart: announce the failure, keep the code, say what was wrong
Most cart templates show a promo error by inserting a line of red text near the field and letting it sit, or worse, fade. A sighted shopper scanning the page finds it. A screen reader user hears nothing, because content inserted into a page is only announced if it sits in a live region or receives focus. The shopper tabs on, reaches checkout, and discovers the discount missing at the total, if they discover it at all.
The standard pattern is an assertive or polite live region tied to the error container, with the message moved into it at the moment of failure, and the field marked invalid in code so its state is programmatically available, not just coloured red. Colour alone never carries an error accessibly, which WCAG states outright in its use of colour criterion.
The silent red flash
Clearing the field on failure punishes careful shoppers. Codes are long, mixed case strings often copied from an email; forcing a retype invites a second error and hides the first one, which may have been a single wrong character the shopper could have spotted. Leave the code in place, select it or leave the cursor after it, and let the shopper edit.
Reason specificity is the other half. Expired on October 31 carries an action: stop trying. Below the minimum spend of a stated amount carries a different one: add an item or accept the loss. Not valid for sale items explains a full cart that still fails. Stores often know exactly which rule fired and choose to display none of it, which reads as indifference at the exact moment the shopper is doing arithmetic.
Keep the code, name the reason
The mirror fault gets less attention: a code that works updates the total silently. A screen reader user who cannot see the price drop has no confirmation the code applied and may re-enter it or abandon to check. Announce the applied discount and the new total in the same live region used for errors, and the whole exchange becomes legible without sight.
Success needs announcing too
Keep reading: Accessible Quantity Steppers in the Cart: The Buttons Nobody Labels, Accessible Gift Card Messages in the Cart: Balances People Can Actually Hear.
Frequently asked questions
What is a live region and why does the promo error need one?
A live region is a part of the page marked so assistive technology announces changes to it automatically. Without one, an inserted error message is silent to a screen reader. With one, the rejection, and the reason for it, is spoken as soon as it appears.
Is red text around the field enough to show an error?
No. WCAG's use of colour criterion says colour cannot be the only means of conveying information. The error needs text that states the problem, a programmatic invalid state on the field, and an announcement. Red styling can stay, as decoration on top of those.
Should the cart keep a failed promo code in the field?
Yes. Keeping it lets the shopper spot a typo, compare it against the email or advert they copied it from, and correct one character instead of retyping a long string. Clearing the field hides the evidence and adds work at the worst moment.
Why state the specific reason a code failed?
Because the reasons demand different actions. An expired code should stop the shopper trying. A minimum spend shortfall invites adding an item. An exclusion for sale items explains itself. A generic invalid message gives the shopper no next step and reads as a system shrug.