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:

• "from 120"
• "90 euros"
• "slash month"

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:

• Orange phones
• from 1 euro asterisk 129 euros
• asterisk see condition

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

Sample code

<div class="example2">
<img src="./images/phone.png" alt="Orange phones">
<p>
    <strong>From </strong><span class="price">1€*</span>
    <s>129,90€</s><br>
    *see conditions
</p>
</div>

Solution to correct vocalization

To fix these problems, the simplest solution is to allow ignoring characters that could potentially cause problems for ATs and especially screen readers, for example, in speech reading or Braille.

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 visually-hidden if you use the framework boosted).

From 120,90€ per /month

Vocalized element "from 120 euros 90 per month"

<p class="example">
From 
<span class="price">
120<span class="cents">,90€</span>
<span class="sr-only"> per </span>
<span><span aria-hidden="true">/</span>month</span>
</span>
<p>

Vocalized element:

• Orange phones
• from 1 € instead of 129.90 € see conditions

<div class="example2">
<img src="./images/phone.png" alt="Orange phones">
<p aria-hidden="true">
    <strong>from </strong><span class="price">1€<span aria-hidden="true">*</span></span>
    <span> instead of </span>
    <s>129,90€</s><br>
    <span aria-hidden="true">*</span>see conditions
</p>
</div>

Importance of semantics

The accessible text-based hiding solution work with all the assistive technologies, however it is important to pay particular attention to the HTML tags used.

Adding semantics to the HTML code improves support for assistive technologies now and for the futur. It is possible to display a strikethrough text using a <span> tag and a CSS class, but the use of an appropriate tag <s> or <del> brings meaning to your code. The NVDA screen reader, for example, automatically indicates that text is strikethrough when inserted into a <del>tag. Although support for these tags is not yet complete, it is important to ensure that you choose the appropriate HTML tags based on your needs.