Making Sale and Clearance Pages Accessible Without Hiding the Discount

Sale pages pile on banners, timers, and dense grids that break accessibility first. How to keep the urgency visible and the page usable for everyone.

Sale and clearance pages are where accessible design goes to die. They are built fast, often by duplicating a landing page template, layering on banners, countdown timers, strikethrough pricing, badge graphics, and a dense grid of discounted products. Each layer adds a barrier: prices conveyed by color alone, timer text that screen readers announce badly or not at all, image only badges that say Sale with no text alternative, and filters that cannot be operated by keyboard. The irony is sharp. A sale exists to convert as many shoppers as possible, and these pages quietly exclude the shoppers who need clear structure most.

Prices and discounts must exist as real text

The most common sale page failure is a discount that is visual only. A red price next to a crossed out price means nothing if the text itself does not say which is the sale price, what the original price was, and what the saving is. Screen readers read the numbers in order, and if the order and labels are unclear, the shopper hears two prices and no explanation. Write it plainly: Sale price $48, original price $80, save 40 percent. That text can be visually styled however you like, as long as the information is in the words, not only in the color and the line through them.

Badges need the same treatment. A starburst graphic that says 40 percent off must have a text alternative or a matching text label beside the product name. If the badge is decorative because the discount is already written out in the price area, mark it decorative and move on. What matters is that no information lives only inside an image.

Timers, banners, and movement

Countdown timers create two problems. They move, which can distract and, for some shoppers, cause real discomfort, and they often update in ways that interrupt screen reader users if they are marked as live regions. A timer should be readable as plain text at any moment, should not announce itself every second, and should respect reduced motion settings. The deadline also belongs in ordinary text somewhere stable on the page, such as Sale ends Sunday at midnight, so the information survives even if the timer script fails.

Stacked promotional banners are the other usual suspect. Each banner adds headings, close buttons, and links to the top of the page, in that order, for keyboard users. Give every dismiss button a clear accessible name that says which banner it closes, keep the tab order sensible, and do not let an auto rotating banner steal focus or change content while someone is trying to read it.

Dense grids and filters under sale pressure

Clearance grids are long, repetitive, and filter dependent, which is exactly why their structure matters. Product cards need consistent headings, accessible names for quick view and add buttons that say which product they act on, and a sold out state written in text rather than shown only by a grayed out image. Filters and sort controls must be real form controls with labels, operable by keyboard, with the number of results announced or at least readable after filtering.

Test the page the way a shopper uses it during a sale: filter to a size, sort by discount, open a product, come back, and add to cart, all by keyboard. That ten minute pass finds most sale page barriers, because they live in the interactive layers that visual review waves through.

Build the sale template once, accessibly

Most stores run sales all year, so fixing one campaign page at a time is waste. Fix the sale template itself: the price block, the badge, the timer, the banner stack, and the grid card. Then every future sale inherits an accessible base, and the pre launch check shrinks to content, checking that badge text matches the real discount and that deadline text is present. Urgency and accessibility are not in conflict. A sale a shopper cannot read, navigate, or act on is not urgent. It is just closed.

Frequently asked questions

How should a sale price be written for screen readers?

As labeled text that states the sale price, the original price, and the saving, in a logical reading order. Color and strikethrough can support the message visually, but they cannot be the only place the discount information lives.

Do countdown timers break accessibility rules?

Not by themselves, but they often cause problems. A timer should be available as stable plain text, should not announce updates every second to screen readers, and should respect reduced motion preferences.

What is the fastest test for a sale page?

A keyboard only pass that filters, sorts, opens a product, and adds it to the cart, plus a check that prices, badges, and sold out states are all available as text. That covers the interactive layers where most sale barriers sit.

Should sale badges be images or text?

Text is safer and easier to keep accurate. If a badge is an image, it needs a text alternative or the same discount written out nearby. A purely decorative badge is fine only when the discount is fully stated elsewhere in text.