1

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>
Haradzieniec
  • 9,086
  • 31
  • 117
  • 212
  • “perfectly accessible” are you still only applying this to screen readers? To render these prices more accessible you should add visible labels. Already, using only color to distinguish these prices fails users with visual impairments, and users with cognitive impairments might not get the “best practice” of red promo prices or stroke through prices. – Andy Nov 15 '22 at 14:30

1 Answers1

1

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 &nbsp;</span>
  $99
</span>
<span class="regular-price">
  <span class="sr-only">current price &nbsp;</span>
  $49
</span>
<span class="promo-applied-price">
  <span class="sr-only">discounted price with promo &nbsp;</span>
  $29
</span>

Note a couple things:

  • I added a &nbsp; 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.
  • Saying "current price" for the second price isn't quite accurate if the user has a promo code. You'd probably want to indicate that somehow. It should probably say "non-discounted price" or something like that. If you don't have a promo code, then I assume there wouldn't be a third price and thus "current price" would be ok.
slugolicious
  • 15,824
  • 2
  • 29
  • 43
  • thank you. Do you recommend to add tabindex=0 (to make these prices or at least one of them focusable, as far as a lot of text can be on the page, however tabindex=0 won't allow to miss the price information (very important info) with a higher chance on the page during the checkout process. Or, any other option other than tabindex=0? Or, this is fine? Thank you. – Haradzieniec Nov 16 '22 at 06:26
  • I would strongly **discourage** the use of `tabindex` on non-interactive elements. There's no need to TAB to the price if the user can't do anything to it. – slugolicious Nov 17 '22 at 03:13