Home / Blog / Are your Shopify discount codes accessible?

Are your Shopify discount codes accessible?

Published 2026-09-23

An accessible discount code field has a real label, announces success and failure to assistive technology, shows applied savings in text rather than color alone, and never silently drops the code when the cart updates.

The field nobody labels

The discount code input is often a bare text box with placeholder text doing the work of a label. Placeholder text disappears the moment someone starts typing, and it is not exposed as a programmatic label to screen readers in many themes. A shopper using assistive technology lands on an unlabeled field with no context for what goes in it. The fix is basic: a visible label like "Discount code" associated with the input, and a placeholder that supplements it rather than replacing it. This is a five-minute change that affects nearly every order.

Silent errors cost the sale

Type an expired code and many themes show a small red message that screen readers never announce, or worse, they show nothing at all. The shopper keeps typing codes, each failing silently, and concludes the store does not honor promotions. Per WCAG 2.2, errors need to be identified in text and described, not conveyed by color alone. Route the error through an aria-live region, tie the message to the input with aria-describedby, and move focus to the error summary when the apply fails. Describe what went wrong in plain language: "This code expired on September 1" beats "Invalid code" for every shopper, not just those using assistive technology.

Applied savings must survive the page

The second failure mode is sneakier. A code applies, the shopper sees the discounted total, and then an AJAX cart update re-renders the summary and the discount quietly vanishes. Sighted shoppers often catch this because they watch the numbers. Shoppers relying on announced totals may complete the purchase at full price without realizing the code was dropped. Every cart re-render should preserve the applied code and announce the updated total including the discount line. Test this by applying a code and then changing quantities, removing items, and navigating away and back. The discount should persist through all of it.

Keyboard users get trapped in code entry

Some themes implement the discount field as a collapsible disclosure that opens on click and cannot be reached or closed with a keyboard. Others trap focus inside the code entry widget. Either pattern means a keyboard-only shopper cannot apply a code at all, which is functionally the same as denying them the promotion. The disclosure button needs to be a real button, operable with Enter and Space, and focus must move into the revealed field when it opens. Test the whole flow with the mouse unplugged: open the code field, enter a code, apply it, and confirm the savings appear in the order summary.

Why this matters more than it looks

Discount codes cluster around the moments that decide revenue: promotions, abandoned-cart recovery emails, influencer campaigns. The shoppers arriving with a code are your most motivated buyers, and an inaccessible code field puts friction exactly where intent is highest. ADA demand letters have cited the purchase path repeatedly, and unlabeled form controls on checkout-adjacent pages are among the most common specific allegations. Auditing the discount flow is cheap. Defending a demand letter about it is not.

Find out where your store stands

Get a free accessibility audit