Price

A price display presents monetary values as real text with programmatically associated currency information, supporting standard prices, ranges, free items, and explicit currency codes so all users can perceive pricing accurately.

Demo

Review the price variants shown below — a standard price, a price range, a free item, and an explicit currency code example. With a screen reader active, navigate through each price and listen to how the value and currency are announced. Notice how each variant is expressed as real, selectable text rather than an image or decorative element.

What to Observe

• Price values are rendered as real text, not images or SVG, so they can be read by screen readers and resized by browser text settings.
• The currency symbol or code is included within the accessible text so users are not left to guess whether "$" means US dollars, Canadian dollars, or another currency.
• Price ranges use a text structure that reads naturally in sequence (e.g., "From $20 to $40") rather than relying on visual spacing alone to imply the range.
• Free items are expressed as the word "Free" or a zero-value price with a currency, not as an empty element, ensuring the concept is communicated to all users.
• Decorative currency symbols or ornamental styling are separated from the semantic price value so they do not interrupt the spoken output.

Anatomy

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

1. Price container: The wrapper element that holds the currency and value together as a unit, providing a consistent structure for all price variants.
2. Currency indicator: The symbol (e.g., $) or code (e.g., USD) that identifies the monetary unit; included within accessible text for all variants.
3. Price value: The numeric amount, rendered as plain text so it is accessible to screen readers, search engines, and browser zoom tools.
4. Range separator: The element or text that connects the lower and upper bounds of a price range (e.g., "to" or "–"), made explicit for screen reader users.
5. Free label: A textual expression of zero cost used in place of a $0.00 display, providing a clearer and more natural communication of the price.

Accessibility Behavior

• The price is always rendered as selectable, real text — never as an image, canvas element, or purely visual decoration — so it can be read by any assistive technology.
• The currency context is programmatically associated with the price value so screen reader users hear "fifty dollars" rather than "dollar sign fifty".
• Price ranges expose both endpoints in a readable sequence, ensuring the relationship between low and high values is unambiguous when read linearly.
• A price of zero is communicated as "Free" or as an explicit zero value rather than leaving the field empty, which would be meaningless to a screen reader.
• The component respects user text-size preferences and browser zoom without truncating or obscuring the price value.
• Color is not the only means of distinguishing price states — the text content itself carries the meaning regardless of styling.

Common Mistakes

• Rendering the price as an image or SVG text, making it impossible for screen readers or browser text-zoom tools to access the value.
• Using only the currency symbol without surrounding context, so a screen reader announces "dollar sign" instead of "US dollars" or reads nothing at all.
• Expressing a price range with a visual dash between two numbers without any text connector, so users hear two unrelated numbers with no explanation of their relationship.
• Leaving the price element empty or showing a placeholder character for free items, resulting in an empty or meaningless announcement.
• Styling the currency symbol and value in separate elements without a shared accessible label, causing the two pieces to be announced separately or out of order.

Why This Matters

Price is one of the most decision-critical pieces of information on any product page. A screen reader user who hears an ambiguous currency symbol, two disconnected numbers, or silence where a price should be cannot make an informed purchasing decision. Users who rely on browser text zoom must be able to read prices that scale with their settings. When price information is inaccessible, users with disabilities are effectively denied the ability to comparison shop — a fundamental part of the online retail experience.

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