Promo Code Fields in the Cart: Small Box, Big Accessibility Failures
2026-10-15
The promo code field is thirty seconds of the checkout journey and generates a wildly disproportionate share of support tickets and abandoned carts. Some of that is pricing psychology. A stubborn share is simpler: the field is hard to find, hard to operate with a keyboard or screen reader, and silent about whether anything it did worked.
Because the field looks trivial, it rarely gets an accessibility pass of its own. It inherits whatever the cart drawer does, which usually means a collapsed toggle, a placeholder doing the work of a label, and feedback that only exists as a brief color change on screen.
The toggle that hides the field from the people who need it
Collapsing the promo field behind a Have a code link saves vertical space and costs real orders. Keyboard users tab past a toggle that does not announce it expands anything. Screen reader users hear a link with no indication a form hides behind it. Shoppers on phones, where codes from email and social posts are most often redeemed, abandon the hunt and sometimes the cart.
If space forces a toggle, make it a proper button with an expanded state that assistive technology announces, and move focus into the field when it opens. Better yet, test the drawer with the field simply open. On most carts the saved space is one line, and the found codes and finished checkouts pay for it immediately.
Labels, instructions, and the paste problem
A placeholder that says Discount code is not a label. It vanishes when typing starts, it is often too light to read, and screen readers may skip it entirely, leaving an unnamed edit field in the middle of the cart. A visible label, or at minimum a persistent accessible name, plus one line of instruction about where codes come from, removes the guesswork.
Paste deserves a thought of its own. Codes arrive by email and text, so most shoppers paste them, and pasted codes carry trailing spaces and smart characters that strict validation rejects as invalid. Trimming whitespace and accepting the code in any case costs a line of code and rescues a steady stream of false invalid errors that shoppers experience as the store cheating them.
Success and failure must both speak
The defining failure of promo fields is silence. A code is applied and the total changes on screen, but nothing announces it, so a screen reader user has no idea it worked. A code is rejected and a red message flashes, positioned far from the field, announced nowhere, so the same user hears nothing at all and assumes the form is broken.
Both outcomes belong in a polite live region tied to the field: code applied, ten percent off, new subtotal stated, or code not recognized, with a hint about checking the characters. Keep the message next to the field in reading order as well as on screen. Feedback that can be seen but not heard, or heard but not found again, is only half delivered.
Applied codes must stay visible and removable
Once a code is applied, the cart should show its name, what it did, and a remove control with an accessible name, in the totals area where its effect appears. Codes that apply invisibly, or that silently drop off when an item is removed or a quantity changes, teach shoppers that the store's pricing cannot be trusted, a lesson they remember longer than the discount.
When a code stops applying because the cart changed, say so at the moment it happens and say why: the code needs a minimum spend, or it excluded the item just removed. A shopper told the rule can fix their cart. A shopper whose discount quietly evaporates just feels the price went up, and prices that move without explanation are a classic last step abandonment trigger.
Related reading
These earlier guides go deeper on connected questions: Accessible Cart Quantity Controls: Making Plus, Minus, and Remove Work for Everyone, Focus Order in the Cart Drawer: A Practical Check for Keyboard Shoppers, and Skip Links at Checkout: The Two Lines of Code That Save Keyboard Users.
Frequently asked questions
Why do shoppers say a valid promo code does not work?
Often the code worked or failed silently. The field gave no announcement either way, or a pasted code carried a trailing space that validation rejected. Trimming pasted input, accepting any case, and announcing the result through a live region fixes most of these reports without changing any pricing rules.
Should the promo field be hidden behind a toggle in the cart?
Prefer it visible. A collapsed toggle is easy for keyboard and screen reader users to miss, and the space saved is usually a single line. If a toggle is unavoidable, use a real button that announces its expanded state and move focus into the field when it opens.
What should happen when a promo code is rejected?
The shopper should be told immediately, next to the field and through a screen reader announcement, that the code was not recognized, with a practical hint. A silent failure or a message flashed far from the field leaves shoppers thinking the form is broken and often ends the checkout.
Why show the applied code in the totals?
Because the discount's effect lives there. Showing the code name, its saving, and a named remove control where the totals are lets every shopper verify the price and undo the code. Codes that vanish silently when the cart changes are a common and avoidable source of distrust.