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 :

  • "à partir de 120"
  • "90 euros"
  • "barre oblique mois"

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é :

  • téléphones Orange
  • à partir de 1 euro astérisque 129 euros
  • astérisque voir condition

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>
    <s>129,90€</s><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 visually-hidden si vous utiliser le framework boosted).

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="visually-hidden">à partir de 120,90€ par mois</span>
téléphones Orange

Élément vocalisé :

  • téléphones Orange
  • à partir de 1 euro au lieu de 129 euros 90 voir conditions

<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>
    <s>129,90€</s><br>
    *voir conditions
</p>
<span class="visually-hidden">à partir de 1€ au lieu de 129,90€ voir conditions</span>
</div>

Importance de la sémantique

La solution à base de texte en masquage accessible a le mérite de fonctionner avec l'ensemble des outils d'assistance, cela dit il est important de porter une attention particulière aux balises HTML utilisées.

Ajouter de la sémantique dans le code HTML permet d'améliorer la prise en charge des outils d'assistance. Il est possible d'afficher un texte barré à l'aide d'une balise <span> et d'une classe CSS, cela dit l'utilisation d'une balise appropriée <s> ou <del> apporte du sens à votre code. Le lecteur d'écran NVDA par exemple indique automatiquement que le texte est barré lorsqu'il est inséré dans une balise <del>. Même si le support de ces balises n'est pas encore complet, il est important de veiller à choisir les balises HTML appropriées en fonction de vos besoins.