For customers, for each item, 3 prices are displayed in the shopping cart, if promo was applied: Example: Jeans $99 $49 $29 Quantity 3 Total: $87.
$49 is a current price, but with applied promo it became $29. $99 is crossed and in gray, it's the old price before it became $49. For most of customers, it's colored, bolded and sized the way there are no questions for most of customers.
If we do nothing from the accessibility point of view, then the screen reader will read all 3 prices for one item, and it will be confusing for customers.
How to properly deal with such situations for the customers who use screen readers? Should 3 prices be pronounced (with additional words "old price" for $99, or $99 should be simply muted somehow), and what is the official recommendation in this case (if exists)? How to modify this code to make it perfectly accessible (with an official source, if possible)?
<span class="old-price">$99</span>
<span class="regular-price">$49</span>
<span class="promo-applied-price">$29</span>
Semantically, using the <s> element indicates strikethrough so that should be the appropriate element for the old price. However, there aren't any screen readers that announce anything extra when it sees strikethrough, at least by default. You can change some screen reader settings to announce formatting changes so the user could fiddle with their settings and probably hear the strikethrough formatting, but then you'd be relying on the user have the right screen reader settings.
It'd be better to have visually hidden text that users won't see but the screen reader can still announce. This is done with CSS and a common class name to use is "sr-only" or "visibly-hidden". You can see an example of "sr-only" here - What is sr-only in Bootstrap 3?.
(Note: you don't have to use bootstrap. You can create your own CSS class and call it "sr-only" [or call it whatever you want] and copy the CSS from the stackoverflow reference.)
So your code would look like this:
<span class="old-price">
<span class="sr-only">old price </span>
$99
</span>
<span class="regular-price">
<span class="sr-only">current price </span>
$49
</span>
<span class="promo-applied-price">
<span class="sr-only">discounted price with promo </span>
$29
</span>
Note a couple things:
to the end of the "sr-only" <span> because the screen reader will concatenate the spans together and without the extra space, it would announce "old price$99". The dollar sign will break up the announcement of the sentence so it'd probably be ok but it's better to force a space before the price, "old price $99", and it's better for Braille users.