Accessible Gift Card and Store Credit Flows on Shopify Stores

Gift card buyers and recipients hit some of the roughest edges in a store: code entry, balance checks, and credit at checkout. How to make those flows work for everyone.

Gift cards look simple, which is why their accessibility problems survive so long. The purchase is a product page with a denomination picker. The redemption is a code field at checkout. The balance check, if a store offers one, is often a small page nobody has tested since it was installed. Each step is small, and each one fails in its own way for keyboard and screen reader shoppers.

The stakes are higher than the page size suggests. A gift card recipient is often a new customer the store did nothing to acquire, trying to spend money that has already been paid. A code field they cannot use, or a balance page that announces nothing, burns that goodwill in one visit.

Buying the card: pickers and personalization fields

Denomination pickers are frequently built as styled buttons or, worse, as clickable text with no real control underneath. Every amount needs to be a genuine, labeled option that can be chosen by keyboard, with the selected amount announced and reflected in the price. Custom amount fields need a label that stays visible, not placeholder text that vanishes.

Recipient name, email, and message fields follow the card into the same trap as other forms: labels that disappear, error messages that are color only, and a delivery date picker that cannot be operated without a mouse. Test the whole purchase with the keyboard alone, including the errors you get from a deliberately bad email address.

Redeeming at checkout and checking a balance

The code field at checkout needs a real label, an apply action that can be reached and named, and feedback that is announced: applied, invalid, or already used, in words. A spinner followed by silence leaves a screen reader shopper guessing whether they have their discount or not. The same applies when a code is removed.

Balance check pages are often third party and lightly branded, which is no excuse for skipping them. The card number and PIN fields, the submit action, and the balance result all need to be operable and announced. If the provider page cannot do that, link shoppers to a human route that can, and say so plainly on the page.

Store credit deserves the same care

Credit issued for a return lands in an account page or a checkout notice, and shoppers frequently cannot tell how much they have or whether it applied. Show the credit balance as text in the account, state at checkout whether credit was used and how much remains, and make sure none of that is conveyed only by a colored tag or an icon.

Expiry and terms for credit and cards should be plain text a screen reader can read, on the page where the decision happens, not only in a linked policy. A recipient who cannot find the terms cannot really use the gift.

Put gift flows on the holiday readiness list

Gift card volume spikes exactly when stores are busiest and least able to fix things. Add card purchase, balance check, redemption, and credit display to the pre holiday accessibility pass, and test them again after any app change touching checkout or accounts. These are short flows. Testing them takes an hour and protects the highest intent visits of the year.

Frequently asked questions

What is the most common gift card accessibility failure?

Unlabeled or non keyboard operable denomination pickers on the purchase page, followed closely by checkout code feedback that is never announced to screen readers. Both are quick to find with a keyboard only test and a screen reader pass at checkout.

Does the balance check page really need testing if a provider runs it?

Yes. Shoppers experience it as part of your store, and its fields and results have the same failure patterns as any form. If the provider page has barriers you cannot change, document them, press the provider, and offer a staffed alternative route in the meantime.

How should checkout confirm a gift card was applied?

In text that a screen reader announces: that the card was applied, the amount deducted, and the remaining balance to pay. Visual styling alone, such as the code appearing in a list, is not enough for shoppers who cannot see the change.

When should gift flows be retested?

Before the holiday season, after any checkout or accounts app change, and whenever the gift card provider updates its pages. Put the four flows, purchase, balance, redemption, and credit display, on the standing readiness checklist.