How to express multiple prices for screen readers?

user_834711 0
Viewed 1323

We are working on making our eCommerce site accessible for screen readers and have a conflict about pricing. Our categories and product pages list multiple dollar amounts when a product is discounted:

  1. Original Price (in strikethrough)
  2. Discounted Price (what customer will actually pay)
  3. Savings (orig - discounted)

Is there any standard way to communicate all of this information for visually impaired users? We don't want to omit anything but also want to avoid making the product listing too long to traverse.

Currently, VoiceOver reads our pricing as "price, $9.99" [TAB] "sale, $7.99" [TAB] "savings, $2"

We are considering relabeling this all to a single statement so that the user doesn't have to tab through each price. "was $9.99, now on sale for $7.99, save $2"

Would the above work, or is there a more standardized way to communicate this?

wai-aria accessibility html
3 Answers

As far as I know, there is no real standard telling precisely how you should present the pricing information. It's up to you to find the best formulation for your particular case. As long as everything is clearly stated in text, it should be fine.

The thing you must absolutely avoid is giving (implicitly) an information only by its visual formatting. For example, making a price striketrough without explicitly saying somewhere that this is the original price and that there is currently a discount creates an accessibility problem for screen reader users and those who may not see well the striketrough.

So basicly you are on the right track by indicating everything textually.

Now, personnally by experience as a screen reader user myself, starting from your example, I would say:

  • Give first the discounted price before the original price, because what I'm going to pay is the information I'm looking for in priority.
  • Be smart and give the complete information in a single concise sentance. Example: "$7.99 instead of $9.99, saving $2".
  • Don't give the saving first, as it can be easily perceved as an excessive marketing manipulation. Example: "Save 20%! $10 instead of $12" vs. "$10 instead of $12, save 20%!"
user_19712160

@QuentinC has some good advice on the order of information (most important first - the price you're going to pay) but one thing that bothers me in the OP is why the user is going to tab through all the prices. Are the prices interactive elements?

Or perhaps this is just a terminology issue. I think by tab, you really mean swipe right to move the VoiceOver focus.

One thing to consider if you decide to make it one big sentence, it makes it a little harder to parse all that information. A VoiceOver user can change their rotor to "words" and then swipe up/down to navigate a word at a time in order to hear the info, but it might not be the best user experience to force them to do so. But the fact that you're providing all this information is really the important part, so kudos to you.

Also, VoiceOver stops at element boundaries when you're swiping right so if you have something like:

<div>
  <span>hello</span>
  <s>there</s>
  <span>world</span>
</div>

You're going to hear "hello" swipe right "there" swipe right "world".

If you just want to hear "hello there world" with one swipe, then you'll need the undocumented (and thus not officially supported) "text" role.

<div role="text">
  <span>hello</span>
  <s>there</s>
  <span>world</span>
</div>

As a side note, even though <s> and <del> are semantic elements, their meaning is not conveyed to screen readers. One way to handle that is documented in a "Short note on making your mark (more accessible)".

user_767140

Would the above work, or is there a more standardized way to communicate this?

You should avoid to disturb the attention by introducing too many informations to the screenreader.

I am not saying this is a standard solution, but a solution you have to consider is just to ignore the old price using aria-hidden: $7.99 <div aria-hidden="true">($9.99)</div>

This way a screenreader user will only ear the new price, and really gain in accessibility. As the text is strike-through, I won't think that WCAG would require a speech alternative here.

user_45401410
Related