Sale Price

A sale price display communicates the was/now price relationship using semantic HTML so screen readers perceive the full context — including which price has been replaced — without relying on visual strikethrough alone.

Demo

Review the sale price examples below. With a screen reader, navigate to each price pair and listen to how the original and sale prices are announced. Notice that the original price is not simply read as a number — its semantic role as a removed or outdated value is communicated through the element used to mark it up.

What to Observe

• The original price uses a semantic deleted-text element, which some screen readers announce as "deleted" or "strikethrough", conveying that this is the old, no-longer-valid price.
• The sale price uses a complementary inserted-text element or is otherwise distinguished so its role as the current price is clear programmatically.
• Neither price relies on color alone (e.g., red for sale price) to communicate its role — the text and markup carry the meaning independently of styling.
• Both prices are rendered as real text, allowing them to be read by screen readers and resized with browser zoom without loss of information.
• Visible labels such as "Was:" and "Now:" may supplement the semantic markup to reinforce the relationship in plain language for all users.

Anatomy

[Anatomy image placeholder — will be added when assets are available]

1. Price container: The wrapper that holds the original and sale price together, establishing them as a related unit.
2. Original price: The previous, higher price marked up with the deleted text element to indicate it is no longer current; may also carry a "Was:" prefix label.
3. Sale price: The current discounted price, marked up with the inserted text element or otherwise distinguished as the active price; may carry a "Now:" prefix label.
4. Currency indicator: The symbol or code identifying the monetary unit, included within the accessible text of each price value.
5. Discount badge (optional): A label such as "Save 30%" that supplements the price pair with a plain-language savings summary.

Accessibility Behavior

• The original price uses the deleted text element so that screen readers that support this element can communicate its "removed" or "outdated" semantic meaning.
• The sale price uses the inserted text element or is clearly labeled as the current price through visible text or an accessible name, not color alone.
• Both prices are real text, not images, so they scale with browser text settings and are readable by any assistive technology.
• Color is not the sole differentiator between the original and sale price — structural markup, labels, or accessible names provide the distinction independently.
• If a discount percentage or savings amount is shown, it is also expressed as text so screen reader users receive the full promotional context.
• The price pair maintains a logical reading order: original price first, then sale price, matching the natural "was $X, now $Y" narrative.

Common Mistakes

• Applying a CSS text-decoration strikethrough to the original price instead of using the deleted text element, so screen readers have no semantic cue that the price is outdated.
• Using only red color to signal the sale price and only gray color for the original price, making the distinction invisible to users with color-vision differences.
• Rendering prices as images — such as a promotional banner — making them impossible to read with a screen reader or resize with browser zoom.
• Placing the sale price before the original price in the DOM, creating a confusing reading order where the current price is announced before users know there was a higher original price.
• Omitting currency context from either price value so screen readers announce bare numbers without the unit they represent.

Why This Matters

Sale prices are a primary driver of purchase decisions. When a screen reader user hears two numbers without understanding which is current and which is outdated — or cannot tell that a discount exists at all — they are denied the promotional information that motivates many purchases. Relying on red color and strikethrough styling alone excludes users with color-vision differences and those browsing in high-contrast mode. Semantic sale-price markup ensures that every user, regardless of how they access the page, receives the complete "was/now" context and can make an informed, confident purchase decision.

Accessibility Validation

This component is validated against internal accessibility criteria aligned with WCAG standards, using our internally developed system, Resonance Specs.

To learn more, please contact us.

Code

Reference Implementation

• Back to Home
• GitHub Code