Altwise

Promo codes, sale prices and Black Friday banners: accessible discounts for small business sites

How to make Black Friday and holiday sale features accessible: still, dismissible announcement bars, crossed-out prices that make sense to screen readers, discount codes in real text, labelled promo code fields that announce results, and free-shipping bars in words.

Black Friday, Small Business Saturday and Cyber Monday bring the busiest sale pages of the year for many small shops, cafes, salons and service businesses. The same pieces show up on almost every one: a scrolling announcement bar, "SALE" badges, crossed-out prices, a discount code to copy, a promo code box at checkout and a "you're $12 away from free shipping" bar. Each one is easy to get wrong for people who use a keyboard, a screen reader, a phone with large text or who are sensitive to motion. This guide covers how to make your sale and discount features work for everyone.

1. Announcement bars: readable, still and dismissible

A bar at the top saying "Free shipping this weekend" is fine. A bar that scrolls sideways or rotates messages every few seconds is harder to read and can't be paused. Moving or auto-updating content that lasts more than five seconds needs a way to pause, stop or hide it (WCAG 2.2.2). The text needs enough contrast against the bar colour (WCAG 1.4.3), and a close button should have a name such as "Close announcement" (WCAG 4.1.2). See announcement bars and notice banners and animation, background video and motion.

2. Sale prices that make sense when read aloud

Crossed-out prices are a visual cue. Most screen readers don't announce strikethrough formatting, so "$60 $45" can be heard as "60 dollars 45 dollars", which is confusing. Add words that screen readers read (WCAG 1.3.1), and don't rely on red text alone to mark the sale price (WCAG 1.4.1).

<p class="price">
  <span class="visually-hidden">Original price:</span>
  <s>$60.00</s>
  <span class="visually-hidden">Sale price:</span>
  <strong>$45.00</strong>
</p>

(The prices above are example data.) A "25% off" or "SALE" badge should be real text, or an image with alt text, not a graphic with no description. See colour-only meaning, sale prices and stock status.

3. Discount codes people can actually get

Codes printed inside a banner image, like "Use BLACKFRIDAY25" on a photo, are invisible to screen readers and blurry when zoomed. Put the code in real text (WCAG 1.4.5). A "Copy code" button is helpful if it has a clear name and announces that it worked, for example a status message saying "Code copied" (WCAG 4.1.3). See flyers, promo graphics and images of text.

4. The promo code box at checkout

The code field needs a real label, not only placeholder text like "Gift card or discount code" (WCAG 3.3.2). If it is hidden behind a "Have a code?" link, that link should be a real button that works with the keyboard and says whether the field is shown (WCAG 2.1.1). After someone presses "Apply", announce what happened: the discount and the new total on success, or a written reason on failure, such as "This code has expired" (WCAG 4.1.3, WCAG 3.3.1). A red border alone, or a total that changes silently, leaves screen reader users guessing.

<label for="promo">Discount code</label>
<input id="promo" name="promo" autocomplete="off">
<button type="button">Apply</button>
<p id="promo-status" role="status"></p>
<!-- after Apply: "Code applied: 20% off. New total $36.00." -->

(Example data.) See accessible checkout and accessible form error messages.

5. Free-shipping progress bars and cart messages

A coloured bar that fills up as people add items should also say it in text, such as "You're $12.00 away from free shipping". If the message updates as the cart changes, put it in a status area so the change is announced without stealing focus (WCAG 4.1.3). The same goes for "Added to cart" messages and gift-with-purchase notices.

6. Deal timers and pop-ups

"Deal ends in 02:14:33" timers and "Get 15% off" pop-ups are covered in detail in our holiday countdown timers and pop-ups guide. The short version: don't announce a ticking timer every second, don't let a timer take away something a person is in the middle of without warning, and make pop-ups close with Escape and return focus.

7. Sale collections and filters

A "Shop the sale" page often adds badges, filters and quick-view buttons to every product card. Keep product names as the link text, make sure "Sale" filters and sort menus work with the keyboard, and keep the grid usable when zoomed on a phone (WCAG 1.4.10). See product grids, load more and quick view.

8. Service businesses and gift card deals

Not every Black Friday deal is a product. Salons, gyms, restaurants and studios often sell "Buy a $100 gift card, get $20 free" offers or discounted packages. The deal terms (dates, limits, what's excluded) should be real text near the offer, not small grey print or text inside a graphic (WCAG 1.4.3). See gift card pages.

Common mistakes

A 5-minute check you can do today

  1. Look at your announcement bar for ten seconds. Does it move, and can you stop or close it?
  2. Turn on VoiceOver or TalkBack on a sale product. Can you tell the original price from the sale price by listening?
  3. Find your discount code. Can you select it as text, or is it part of a picture?
  4. At checkout, use only the Tab key to open the code box, type a wrong code and press Apply. Is the error written in words next to the field?
  5. Apply a working code with a screen reader on. Do you hear the new total?

What a scan can and can't check here

Automated scans find only part of the barriers on the pages they visit. Our scan can flag low-contrast banner and price text, buttons and form fields with no name or label, images with no alt text and blocked zoom on your sale pages. It can't tell whether crossed-out prices make sense when read aloud, apply a promo code and listen for the result, judge a moving bar over time, or tell whether your site meets any law. Our Fix-Pack checks up to 10 pages, which can include your sale and cart pages, and gives copy-paste fixes for your platform.

Setting up holiday sales for client stores? The agency 5-pack gives you five white-label reports ($499, use within 12 months).

This is general technical guidance, not legal advice, and it doesn't certify compliance with the ADA or any law, or protect against claims. Altwise isn't affiliated with any store platform, discount app or payment provider.

Want the fixes written for you?

Start with a free homepage snapshot. The $149 Fix-Pack scans up to 10 pages and gives copy-paste fixes for your platform within 48 hours, with a 14-day refund promise. See a sample report first.

This is general technical guidance, not legal advice, and it does not certify compliance with the ADA or any law.

Putting together a holiday gift guide? See holiday gift guide pages, gift boxes and bundles.

Adding heart icons or a wishlist? See wishlist, favorite and save-for-later buttons.

Related guides

All guides

This guide is general technical information, not legal advice. Following it does not certify ADA or any legal compliance. Automated checks find only part of accessibility barriers.

Check your own site, then decide

  1. Free homepage snapshot. Your top 3 issues in about a minute. No signup, no card.
  2. $149 Fix-Pack, if you want the full list. Up to 10 pages scanned, issues ranked by impact, copy-paste fixes for your platform, delivered within 48 hours, plus one re-scan after you apply them.

Get my free snapshot Order the Fix-Pack – $149

14-day refund promise. See a sample report first. A technical report, not legal advice; automated checks find only part of accessibility barriers.