Tests d'accessibilité : surfaces, volumes, prix et chiffres romains

Fabrice 11 mn Webmastering

Tests d'accessibilité : surfaces, volumes, prix et chiffres romains

Comment réagissent les lecteurs d'écran face à plusieurs cas particuliers d'écriture ? Résultats de quelques tests effectués avec l'affichage de surfaces et volumes, de prix, de prix en promotions ainsi que de l'utilisation de différentes variations de chiffres romains.

Tests effectués avec les combinaisons suivantes : VoiceOver 9 + Safari, NVDA 2018.4 + Firefox, TalkBack 7.2 + Chrome - ces trois lecteurs d'écran sont gratuits !

On constate, avec ces tests, que VoiceOver est, sans doute, le lecteur d'écran le plus avancé, le plus efficace pour retranscrire correctement des éléments parfois plus complexes qu'il n'y paraît.

Surfaces et volumes

J'ai acheté 13m3 de bois pour chauffer 60m2

  • VoiceOver : J'ai acheté 13 mètres trois de bois pour chauffer 60 mètres deux
  • NVDA : J'ai acheté 13 mètres trois de bois pour chauffer 60 mètres deux
  • TalkBack : J'ai acheté 13 mètres cubes de bois pour chauffer 60 mètres carrés

J'ai acheté 13m3 de bois pour chauffer 60m2

  • VoiceOver : J'ai acheté 13 mètres trois de bois pour chauffer 60 mètres deux
  • NVDA : J'ai acheté 13 mètres trois de bois pour chauffer 60 mètres deux
  • TalkBack : J'ai acheté 13 mètres cubes de bois pour chauffer 60 mètres carrés

J'ai acheté 13 m3 de bois pour chauffer 60 m2

  • VoiceOver : J'ai acheté 13 mètres cubiques de bois pour chauffer 60 mètres carrés
  • NVDA : J'ai acheté 13 mètres trois de bois pour chauffer 60 mètres deux
  • TalkBack : J'ai acheté 13 mètres cubes de bois pour chauffer 60 mètres carrés

J'ai acheté 13 m3 de bois pour chauffer 60 m2

  • VoiceOver : J'ai acheté 13 mètres cubiques de bois pour chauffer 60 mètres carrés
  • NVDA : J'ai acheté 13 mètres trois de bois pour chauffer 60 mètres deux
  • TalkBack : J'ai acheté 13 mètres cubes de bois pour chauffer 60 mètres carrés

Avec abbr : J'ai acheté 13 m3 de bois pour chauffer 60 m2

  • VoiceOver : J'ai acheté 13 mètres cubiques de bois pour chauffer 60 mètres carrés
  • NVDA : J'ai acheté 13 m trois de bois pour chauffer 60 m deux
  • TalkBack : J'ai acheté 13 mètres trois de bois pour chauffer 60 mètres deux

Conclusions

On remarque ici l'importance de l'espace avec VoiceOver (les règles typographiques pour les unités de mesure sont : un espace avant et un espace après sauf si elle est suivie d'un point ou d'une virgule). NVDA ne gère pas du tout l'exposant !
Sémantiquement, c'est la dernière version qui est correcte (avec indication de l'abréviation et exposant), mais seul VoiceOver la retranscrit correctement.

Affichage des prix

120,90€

  • VoiceOver : 120 euros 90 centimes
  • NVDA : 120 euros 90
  • TalkBack : 120 euros et 90 centimes

Avec sup : 120,90

  • VoiceOver : 120 euros 90 centimes
  • NVDA : 120 euros 90
  • TalkBack : 120 euros et 90 centimes

Affichage des prix en promotions

Avec del : 120,90 € 150,90 €

  • VoiceOver : 120 euros 90 centimes 150 euros 90 centimes
  • NVDA : 120 euros 90 effacé 150 euros 90
  • TalkBack : 120 euros et 90 centimes 150 euros et 90 centimes, suppression

Avec aria-label sur balise del : 120,90 € 150,90 €

  • VoiceOver : 120 euros 90 centimes au lieu de, groupe, 150 euros 90 centimes
  • NVDA : 120 euros 90 au lieu de effacé 150 euros 90
  • TalkBack : 120 euros et 90 centimes au lieu de, suppression

Avec aria-label sur balise p englobante :

120,90 € 150,90 €

  • VoiceOver : 120 euros 90 centimes au lieu de 150 euros 90 centimes groupe
  • NVDA : 120 euros 90 effacé 150 euros 90
  • TalkBack : 120 euros et 90 centimes 150 euros et 90 centimes, suppression

Avec aria-label sur balise p et aria-hidden sur balise span :

<p aria-label="120,90 € au lieu de 150,90 €"><span aria-hidden="true">120,90 € <del>150,90 €</del></span></p>

  • VoiceOver : 120 euros 90 centimes au lieu de 150 euros 90 centimes groupe
  • NVDA : ne lit rien en lecture continue
  • TalkBack : 120 euros et 90 centimes au lieu de 150 euros et 90 centimes

Avec aria-hidden et CSS de masquage (visually-hidden avec KNACSS ou sr-only avec Bootstrap) :

<p aria-hidden="true">120,90 € <del>150,90 €</del></p>
<p class="visually-hidden">120,90 € au lieu de 150,90 €</p>

120,90 € au lieu de 150,90 €

  • VoiceOver : 120 euros 90 centimes au lieu de 150 euros 90 centimes
  • NVDA : 120 euros 90 au lieu de 150 euros 90
  • TalkBack : 120 euros et 90 centimes au lieu de 150 euros et 90 centimes

Conclusions

Les prix en promotions sont relativement difficile à retranscrire sans user d'artifices. Seul l'utilisation des CSS de masquage est réellement efficace pour une prise en compte la plus large possible.

Chiffres romains

XVIème siècle

  • VoiceOver : seizième siècle
  • NVDA : quinze ime siècle
  • TalkBack : seizième siècle

XVIème siècle

  • VoiceOver : seizième siècle
  • NVDA : quinze ime siècle
  • TalkBack : seize e accent grave me siècle

XVIe siècle

  • VoiceOver : seizième siècle
  • NVDA : quinze ie siècle
  • TalkBack : seizième siècle

XVIe siècle

  • VoiceOver : seizième siècle
  • NVDA : quinze ie siècle
  • TalkBack : seize e siècle

Louis XVI / Clovis III / Philippe II / François Ier / Louis VII / Charles IV / Louis IX

  • VoiceOver : Louis seize / Clovis i i i / Philippe deux / François premier / Louis sept / Charles quatre / Louis neuf
  • NVDA : Louis seize / Clovis trois / Philippe deux / François premier / Louis sept / Charles quatre / Louis neuf
  • TalkBack : Louis seize / Clovis trois / Philippe deux / François i majuscule er / Louis sept / Charles quatre / Louis i x

DCLXVI

  • VoiceOver : D C L X V I (épelé)
  • NVDA : decluxvie
  • TalkBack : D C L X V I (épelé)

Avec abbr : DCLXVI

  • VoiceOver : D C L X V I (épelé) ou D C L X V I 666 (avec la lecture mot par mot)
  • NVDA : decluxvie
  • TalkBack : 666

Avec aria-label sur balise span : DCLXVI

  • VoiceOver : 666 en chiffres romains, groupe
  • NVDA : decluxvie
  • TalkBack : 666 en chiffres romains

Conclusions

Avec les chiffres romains, seul VoiceOver s'en sort bien, NVDA est très largement dépassé.
Pour l'affichage des siècles, il est préférable d'utiliser une version en toutes lettres lorsque cela est possible (par exemple : seizième siècle). Les chiffres romains devront être doublés par une version en chiffres classiques (par exemple : DCLXVI (666)) pour que la personne puisse avoir accès à l'information.