Showing and vocalizing prices

Introduction

Price display can sometimes be problematic for visually impaired people who use a screen reader. This is especially true when you want a particular layout or display promotions (strikethrough price).

Examples with vocalisation problems

Example 1

Using a screen reader, the following example is vocalized as three distinct elements:

We do not know if the price is 120 € or 90 €, while the real price is 120.90 €.

from 120.90 €/month

Sample code

from
<span class="price">
    120<sup>.90€</sup><sub>/month</sub>
</span>
    

Example 2

The following example is vocalized:

The user is not informed that the price 129.90 euros is crossed out.

Orange phones

From 1€* 129.90 €
*see conditions


Sample code
 
<div class="example2">
<img src="./images/phone.png" alt="Orange phones">
<p>
    <strong>From </strong><span class="price">1€*</span>
    <span class="line-through">129.90€</span><br>
    *see conditions
</p >
</div>
    

Solution to correct vocalization

To fix these problems the easiest way is to ignore the price displayed on the screen and add accessible hiding text containing the price to be vocalized.

To hide an element from speech synthesis, just use the aria-hidden attribute. To add text in accessible hiding (text that is vocalized but not displayed), you only need to use an accessible CSS class (for example, the class sr-only if you use the framework boosted).

starting from 120.90 € per month

Vocalized element "from 120 euros 90 per month"


            <p class="example" aria-hidden="true">
            From
            <span class="price">
                120<sup>.90€</sup><sub>/mois</sub>
            </span>
            <p>
            <span class="sr-only">from 120.90€ per month</span>
        
Orange phones From 1 € instead of 129.90 € see conditions

Élément vocalisé :


<div class="example2">
<img src="./images/phone.png" alt="Orange phones">
<p aria-hidden="true">
<strong>From </strong><span class="price">1€*</span>
<span class="line-through">129.90€</span><br>
*see conditions
</p>
<span class="sr-only">From 1 € instead of 129.90 € see conditions</span>
</div>