Affichage et vocalisation des prix

Préambule

L'affichage des prix peut parfois poser des problèmes aux personnes malvoyantes qui utilisent un lecteur d'écran. C'est d'autant plus vrai lorsqu'on souhaite une mise en pages particulière ou afficher des promotions (prix barré).

Exemples présentant des problèmes de vocalisation

Exemple 1

A l'aide d'un lecteur d'écran, l'exemple suivant est vocalisé comme trois éléments distincts :

On ne sait pas si le prix est de 120€ ou 90€, alors que le vrai prix est 120,90€.

à partir de 120,90€/mois

Code de l'exemple

à partir de
<span class="price">
    120<sup>,90€</sup><sub>/mois</sub>
</span>

Exemple 2

L'exemple suivant est vocalisé :

L'utilisateur n'est pas informé que le prix 129,90 euros est barré.

téléphones Orange

à partir de 1€* 129,90€
*voir conditions


Code de l'exemple

<div class="example2">
<img src="./images/phone.png" alt="téléphones Orange">
<p>
    <strong>à partir de </strong><span class="price">1€*</span>
    <span class="line-through">129,90€</span><br>
    *voir conditions
</p>
</div>

Solution pour corriger la vocalisation

Pour corriger ces problèmes le plus simple est de faire ignorer le prix affiché à l'écran et ajouter un texte en masquage accessible contenant le prix à vocaliser.

Pour masquer un élément à la synthèse vocale, il suffit d'utiliser l'attribut aria-hidden. Pour ajouter un texte en masquage accessible (texte vocalisé mais non affiché), il suffit d'utiliser une classe CSS de masquage accessible (par exemple la classe sr-only si vous utiliser le framework boosted).

à partir de 120,90€ par mois

Elément vocalisé "à partir de 120 euros 90 par mois"


<p class="example" aria-hidden="true">
à partir de
<span class="price">
120<sup>,90€</sup><sub>/mois</sub>
</span>
<p>
<span class="sr-only">à partir de 120,90€ par mois</span>
téléphones Orange à partir de 1€ au lieu de 129,90€ voir conditions

Élément vocalisé :


<div class="example2">
<img src="./images/phone.png" alt="téléphones Orange">
<p aria-hidden="true">
    <strong>à partir de </strong><span class="price">1€*</span>
    <span class="line-through">129,90€</span><br>
    *voir conditions
</p>
<span class="sr-only">à partir de 1€ au lieu de 129,90€ voir conditions</span>
</div>