Ensuring negative numbers are available for everyone

Cet article a été rédigé conjointement par Michael Fairchild et Jeremy Katherman.

Ce petit signe « moins » devant un chiffre est très important. Il peut faire la différence entre avoir de l'argent sur votre compte bancaire et devoir payer des frais de découvert. Il peut faire la différence entre un versement et un retrait.

Les nombres négatifs peuvent être représentés de plusieurs façons, notamment :

Texte en rouge : 100 $
Parenthèses utilisées pour le chiffre : ($100)
Un signe moins devant le chiffre : -100 $

Ces modèles peuvent poser divers défis en matière d'accessibilité. Pour aborder ces défis et les moyens d'y remédier, concentrons-nous sur quelques profils types.

Chaque persona comprendra des critères d'acceptation décrivant les attentes et la manière de les tester.

Résumé

Même si la couleur peut mettre visuellement en évidence le caractère négatif d'un nombre, il faut recourir à une autre méthode pour signaler qu'il s'agit d'un nombre négatif. L'utilisation de parenthèses ou l'ajout d'un signe moins sont des solutions courantes.
Pour le signe moins: le caractère « moins » (`−`) offre la prise en charge la plus fiable sur la plupart des lecteurs d'écran et dans la plupart des formats.
Le caractère « tiret-moins » présent sur les claviers (`-`) bénéficie également d'une bonne prise en charge, mais comporte quelques pièges. Si vous utilisez ce caractère, ne mettez pas d'espace entre celui-ci et la valeur.
Concernant les parenthèses: il est préférable de veiller à ce que les utilisateurs soient informés que les nombres négatifs seront placés entre parenthèses, en particulier s'ils sont utilisés dans un contexte non comptable où la présence de parenthèses peut paraître inattendue.

Personnage n° 1 : une personne malvoyante et daltonienne.

Certaines personnes malvoyantes ou daltoniennes peuvent conclure à tort qu'un nombre est positif si le texte en rouge est le seul indicateur de sa valeur négative. Bien que la couleur puisse mettre visuellement en évidence le caractère négatif d'un nombre, une autre méthode est nécessaire pour signaler cette valeur négative. L'utilisation de parenthèses ou l'ajout d'un signe moins constituent des solutions courantes.

Critères d'acceptation

Scénario : un utilisateur malvoyant et daltonien peut déterminer si un nombre est négatif
Étant donné que je teste l'expérience des personnes malvoyantes et daltoniennes
Lorsque la page contient un nombre négatif
Et que je consulte la page à travers un filtre en niveaux de gris
Je peux alors déterminer que le nombre est négatif

Exemples

Mauvais exemple : 100 $
Bon exemple : (100 $)

Persona 2 : un utilisateur aveugle d'un lecteur d'écran.

La manière dont le nombre négatif est codé revêt également une grande importance. S'il est mal codé, certains utilisateurs aveugles de lecteurs d'écran risquent de ne pas se rendre compte que le nombre est négatif. Il existe plusieurs techniques pour y parvenir, avec des niveaux de prise en charge variables par les lecteurs d'écran.

Critères d'acceptation

Scénario : un utilisateur non voyant utilisant un lecteur d'écran est informé qu'un nombre est négatif.

Étant donné que je teste l'expérience utilisateur des personnes non voyantes utilisant un lecteur d'écran
et que la page contient un nombre négatif
, lorsque je me rends sur la page où se trouve ce nombre négatif
, j'entends alors que le nombre est négatif (généralement annoncé par « moins »).

Utilisation du signe moins

Il existe plusieurs caractères permettant de représenter le signe moins. En voici quelques exemples :

Le caractère « tiret-moins » d’Unicode (`&#45`). C’est le caractère le plus couramment utilisé, car on le trouve sur la plupart des claviers. Remarque : le caractère « tiret-moins » est techniquement différent du caractère « tiret » dans Unicode. Ce dernier n’apparaît pas sur la plupart des claviers et n’est pas couramment utilisé.
Le signe moins (`−`). Ce caractère n'apparaît pas sur la plupart des claviers et doit donc être codé. En HTML, on utilise généralement l'entité HTML`−` pour le coder.
D'autres caractères de trait d'union, tels que les tirets « em » et « en ». Ceux-ci ont des styles et des significations différents de ceux du trait d'union « - » et du signe moins, mais sont parfois utilisés dans les créations graphiques pour leur aspect esthétique.

Il existe également plusieurs formats permettant d'indiquer une valeur négative en dollars. En voici quelques exemples :

-100 $ (sans espace entre le signe moins et le signe dollar).
– 100 $ (un espace entre le signe moins et le signe dollar).
$-100 (le signe du dollar précède le signe moins).

Recommandation

Le signe moins (`−`) offre la prise en charge la plus fiable avec la plupart des lecteurs d'écran et des formats. Le trait d'union-moins (`&#45`) bénéficie également d'une assez bonne prise en charge, mais présente quelques pièges, notamment avec certains formats. Si vous utilisez le trait d'union-moins, n'insérez pas d'espace entre le caractère et la valeur.

Utilisation des parenthèses

Il est courant, notamment en comptabilité, d’indiquer un nombre négatif en plaçant le montant entre parenthèses : ($100). Des tests ont montré que la plupart des lecteurs d’écran ignorent les parenthèses avec les paramètres par défaut et les commandes de navigation habituelles, ce qui signifie que si l’utilisateur ne cherche pas explicitement les parenthèses, il risque de ne pas se rendre compte que le nombre est négatif.

Recommandation

Il est préférable de veiller à ce que les utilisateurs soient informés que les nombres négatifs seront indiqués entre parenthèses, en particulier s'ils sont utilisés dans un contexte non comptable où la présence de parenthèses peut surprendre. Cette mention incitera les utilisateurs à rechercher explicitement les parenthèses lorsqu'ils parcourent le contenu. Il peut également être judicieux d'envisager d'utiliser un signe moins à la place des parenthèses.

Tests et résultats

Les tests réalisés pour cet article de blog sont assez exhaustifs et couvrent huit combinaisons différentes de lecteurs d'écran et de navigateurs. Ce niveau de test peut parfois s'avérer utile pour mettre en évidence des lacunes en matière de prise en charge et des pièges, mais il nécessite beaucoup de temps, d'efforts et d'expertise, et il n'est pas toujours raisonnable de le mettre en œuvre. De même, il ne sera pas toujours possible d'atteindre une prise en charge à 100 %.

Les tests montrent que :

Le signe moins (`−`) est très bien pris en charge par la plupart des lecteurs d'écran et présente moins de problèmes spécifiques que le trait d'union-moins.
- Narrator ne prend pas en charge ce caractère. Cependant, les utilisateurs de Windows ont généralement recours à d'autres lecteurs d'écran; cela ne devrait donc pas poser de problème majeur, sauf si vos utilisateurs sont contraints d'utiliser exclusivement Narrator (par exemple, en raison de restrictions d'entreprise).
Le caractère « tiret » (`-`) est bien pris en charge dans tous les formats testés. Cela constituera sans doute un bon point de départ, et c'est probablement aussi la solution la plus simple à mettre en œuvre.
- Le caractère « tiret » présente certains pièges qui empêchent certains lecteurs d'écran d'annoncer la valeur lors de la lecture en mode navigation (ou équivalent). Par exemple : l'insertion d'un espace entre le tiret et la valeur numérique. Évitez autant que possible d'insérer un espace entre le caractère et la valeur afin d'éviter ce problème.

Les tests ont été réalisés en utilisant les paramètres par défaut de tous les lecteurs d'écran et en recourant à la commande permettant de passer à la ligne suivante (ou équivalent) en mode navigation afin d'accéder au nombre testé. Par exemple, dans JAWS, NVDA et Narrator, la commande « flèche vers le bas » a été utilisée. Dans VoiceOver pour iOS et TalkBack pour Android, le geste « balayage vers la droite » a été utilisé.

Les paramètres du lecteur d'écran et les commandes de navigation permettent de faire annoncer le caractère, même s'il n'est pas annoncé lors de la navigation ligne par ligne ou élément par élément. Cependant, tous les utilisateurs de lecteurs d'écran ne les utilisent pas forcément, surtout s'il n'est pas évident que le nombre qu'ils sont en train de lire puisse être négatif.

Scénario	NVDA/ Chrome	NVDA / Firefox « »	JAWS/ Chrome	JAWS/ Firefox
1 Tiret avant le signe du dollar, sans espace	passer « moins 100 dollars »	passer « moins 100 dollars »	passer « moins 100 dollars »	passer « moins 100 dollars »
2 tirets avant le signe du dollar, avec un espace	Échec« 100 dollars »	Échec« 100 dollars »	Échec« 100 dollars »	Échec« 100 dollars »
3 Tiret court après le signe du dollar, sans espace	Passer « un dollar moins 100 »	Passer « un dollar moins 100 »	Passer « un dollar moins 100 »	Passer « un dollar moins 100 »
4 Caractère « moins » avant le signe du dollar, sans espace	Passer « moins 100 dollars »	Passer « moins 100 dollars »	Passer « moins 100 dollars »	Passer « moins 100 dollars »
5 Caractère « moins » avant le signe dollar, suivi d'un espace	Passer « Moins 100 dollars »	Passer « Moins 100 dollars »	Passer « Moins 100 dollars »	Passer « Moins 100 dollars »
6 : un signe moins après le signe du dollar, sans espace	Passer « un dollar moins 100 »	Passer « un dollar moins 100 »	Passer « un dollar moins 100 »	Passer « un dollar moins 100 »
7 parenthèses	Échec « 100dollars »	Échec « 100dollars »	Transmettre « parenthèse gauche 100 dollars parenthèse droite »	Transmettre « parenthèse gauche 100 dollars parenthèse droite »
8 Astuce avec les parenthèses	Passer « moins 100 dollars »	Passer « moins [élément suivant] 100 dollars »	Passer « moins 100 dollars »	Passer « moins 100 dollars »
9 Texte suivi d'un tiret-moins avant le signe dollar, sans espace	Passer « Solde moins 100 dollars »	Passer « Solde moins 100 dollars »	Enregistrer « Solde : deux points, moins 100 dollars »	Enregistrer « Solde : deux points, moins 100 dollars »
10 caractères suivis d'un signe moins avant le signe dollar, sans espace	Passer « Solde moins 100 dollars »	Passer « Solde moins 100 dollars »	Enregistrer « Solde : deux points, moins 100 dollars »	Enregistrer « Solde : deux points, moins 100 dollars »

Scénario	Narrateur/Edge	VO/macOS/Safari	VO/iOS/Safari	Talkback/Chrome
1 Tiret avant le signe du dollar, sans espace	passer « moins 100 dollars »	Échec « 100dollars »	passer « moins 100 dollars »	passer « moins 100 dollars »
2 tirets avant le signe du dollar, avec un espace	Échec« 100 dollars »	Échec« 100 dollars »	Échec« 100 dollars »	Passer « moins 100 dollars »
3 Tiret court après le signe du dollar, sans espace	Passer « un dollar moins 100 »	Passer « un dollar moins 100 »	Passer « un dollar moins 100 »	Passer « un dollar moins 100 »
4 Caractère « moins » avant le signe du dollar, sans espace	Échec « 100 dollars»	Passer « moins 100 dollars »	Passer « moins 100 dollars »	Passer « moins 100 dollars »
5 Caractère « moins » avant le signe dollar, suivi d'un espace	Échec « 100dollars »	Passer « moins 100 dollars »	Passer « moins 100 dollars »	Passer « moins 100 dollars »
6 : un signe moins après le signe du dollar, sans espace	Échec « 100 dollars»	Passer « un dollar moins 100 »	Passer « un dollar moins 100 »	Passer « un dollar moins 100 »
7 parenthèses	Échec « 100dollars »	Échec « 100dollars »	Échec « 100 dollars» »	Échec « 100 dollars»
8 Astuce avec les parenthèses	Échec «(silence) [élément suivant] 100 dollars »	Passer « moins [élément suivant] 100 dollars »	Passer à « moins [glisser vers la droite] 100 dollars »	Passer à « moins [glisser vers la droite] 100 dollars »
9 Texte suivi d'un tiret-moins avant le signe dollar, sans espace	Saisir « balance dash dollar 100 »	Passer « solde moins 100 dollars »	Passer « solde moins 100 dollars »	Passer « solde moins 100 dollars »
10 caractères suivis d'un signe moins avant le signe dollar, sans espace	Échec « soldede 100 dollars »	Passer « solde moins 100 dollars »	Passer « solde moins 100 dollars »	Passer « solde moins 100 dollars »