Gift Card and Promo Code Fields: Small Boxes, Big Accessibility Problems
Gift card and promo fields cause outsized checkout friction when labels are missing, errors are vague, and balances cannot be checked accessibly. A practical fix list.
The gift card field is one of the smallest boxes in checkout and one of the most frustrating. The label is often just placeholder text that vanishes when you type, the apply button sits far from the field, and a rejected code produces a message like invalid entry with no hint about what went wrong.
For shoppers using assistive technology the problems multiply. The balance check may live in a separate widget, the success message may never be announced, and the total may update silently so the shopper cannot tell whether the card worked at all.
Label the field and keep the label visible
Every gift card and promo field needs a permanent visible label, not placeholder text doing double duty. Placeholder text disappears, has weak contrast in many themes, and leaves a shopper with memory difficulties guessing what the empty box was for once they start typing.
Put the apply action right next to the field as a clearly named button. Apply gift card beats a lone arrow icon every time, because the name tells screen reader users and voice control users exactly what will happen when they use it.
Say what happened, in text, every time
When a code works, say so in text that assistive technology announces: the code name, the amount applied, and the new total. When it fails, say why in plain terms. Expired, already used, and does not apply to these items are three different problems with three different next steps.
Never rely on color alone to signal success or failure. A green total and a red shake animation mean nothing to a shopper who cannot see them. Text is the record everyone can use, and it doubles as support documentation when a customer writes in.
Make balance checking part of the same flow
Shoppers often arrive with a card and no idea of its balance. A balance checker that opens an inaccessible popup or demands a PIN typed into unlabeled boxes will stall the purchase before it starts. Put the checker on the gift card page itself, label every field, and handle errors the same patient way as checkout.
If the balance covers only part of the order, explain split payment in one short sentence before the shopper reaches the payment step. Surprises at the final step are where carts get abandoned.
Test with real codes, including bad ones
Most teams test the happy path with a valid code and stop. Test an expired card, a card from another region, a code with spaces pasted from an email, and a code typed with a screen reader running. Trim pasted spaces automatically and accept the code in the format customers actually receive it.
Repeat the test after any checkout or wallet update. These fields are frequently touched by payment and marketing tools, and small markup changes can remove a label without anyone spotting it in a visual review.
Related reading
If this topic is useful, these earlier guides go deeper on connected questions: Accessible Product Videos: Captions and Transcripts, Accessible Loyalty Dashboards: Points, Tiers, and Rewards, and Accessible Wishlist and Saved Items Pages.
Frequently asked questions
Why does placeholder text fail as a label?
Placeholder text disappears when typing starts, often has low contrast, and is not reliably announced by screen readers. A shopper is left with an unlabeled box and no memory aid. A permanent visible label above or beside the field solves all three problems at once.
What should an error message for a bad code say?
It should name the likely reason in plain language and say what to do next. For example, that a code expired on a given date, or that it only applies to full price items. Vague messages like invalid code force shoppers to guess or contact support.
Should applying a code be announced to screen readers?
Yes. Use a polite live region so the shopper hears that the code was applied, the amount saved, and the updated total. Without that announcement the total changes silently and the shopper has no confirmation the step worked.
Can a gift card field work well on mobile too?
It can, if the tap target is large, the keyboard type suits the code format, and the apply button stays visible while typing. Test on a small phone with zoom enabled, since many shoppers combine mobile with accessibility settings.