Reviewed October 17, 2026

Accessible discount code and gift card fields on Shopify

The little code box at cart and checkout is where promotions quietly fail for screen reader and keyboard users. Labels, error messages, and applied code announcements that work for everyone.

A small field with outsized friction

Discount and gift card fields look trivial: one input, one apply button. For assistive technology users they concentrate several classic problems into a small space. The input often has only placeholder text instead of a real label, the apply action reloads or shifts the page without explanation, and the success or failure message appears somewhere the screen reader never announces.

The result is shoppers who cannot tell whether their code worked, whether it was rejected, or what the new total is. Some abandon the order over a ten percent code, not because the savings matter most, but because uncertainty at checkout reads as risk.

Labels and instructions that survive contact

Give the input a persistent visible label, discount code or gift card, not just placeholder text that vanishes on typing. If your store accepts both codes and gift cards in one field, the label and any hint text should say so, because guessing wrong produces errors that look like rejection. Keep the apply button text specific, apply code, rather than a bare arrow or icon.

Error text needs to sit next to the field and connect to it programmatically, so a screen reader reads the problem when the field receives focus. This code has expired tells the user what happened; invalid input tells them nothing and blames them into the bargain.

Announcing success like it matters

When a code applies, three things should happen accessibly: a status message announces the code was applied and the amount saved, the field area updates to show the applied code with a remove option, and the order total change is available to the screen reader rather than only flashing visually. A polite live region handles the announcement without yanking focus away from where the shopper is working.

Removal deserves the same care. The remove control needs a label naming the code, remove code SAVE10, and removing it should announce the updated total too. Stacked codes, where the theme allows them, should each be listed and removable individually, not as a mystery bundle.

Testing the field the way it gets used

Run the full sequence with a keyboard and a screen reader: enter a valid code, an expired code, and a gift card with a partial balance. At each step, listen for what is announced and check whether focus stays somewhere sensible. Partial gift card balances are the edge case themes handle worst, often leaving the remaining amount owed unexplained.

Also test on the cart page and at checkout if your theme offers the field in both places, because they are separate implementations with separate bugs. Five minutes per location, once, catches failures that quietly tax every promotion you run.

Frequently asked questions

Why is placeholder text not enough as a label?

Placeholders disappear when typing starts, are often too low in contrast to read, and are not reliably announced by screen readers. A shopper midway through entering a long gift card number should not have to delete it to remember what the field wants. A real label sits above or beside the field permanently.

How should an applied discount be announced to screen readers?

With a polite live region status message stating the code name and what changed, for example SAVE10 applied, 10 percent off, new total. The message should arrive without moving the user's focus, and the applied code should also be visible in the page with a labeled remove button.

Gift card and code in one field or two?

One field is fine if the label says it accepts both and errors distinguish between a bad code and a bad card. Two separate fields are clearer but add checkout bulk. Either can be accessible; ambiguity is the enemy, not the count of fields.

Do these fixes affect conversion for sighted users too?

Yes, usually positively. Clear labels, specific error messages, and obvious confirmation of savings reduce hesitation for everyone, especially on mobile where the field is small and interruptions are common. Accessible checkout design and high converting checkout design overlap heavily.