Faux gras, caractères fantaisistes, abus d’émojis : le détournement des caractères Unicode, fléau pour l’accessibilité du web

Cet article est la transcription textuelle de la vidéo que j’ai enregistrée avec des démonstrations et explications.

Illustration de caractères fantaisistes et abus d’émojis
Illustration de caractères en faux gras, faux italique, fantaisistes au style gothique ou script ainsi que d’abus d’émojis avec 3 émojis touches de clavier pour former le nombre 100, 3 émojis point d’exclamation rouge, 3 émojis de visage festif

Voir la vidéo sur YouTube

Mea culpa : oui, je lis mon texte et ça se voit mais je n’ai pas pour vocation de devenir youtubeuse donc, tout va bien tant que cette vidéo fait son boulot de sensibilisation ! 😁

Note : Le cadrage me met la tête en plein milieu de mon miroir, ce qui me fait une drôle d’auréole ; ce que j’ai remarqué au montage. Tant pis, ça vous fera peut-être rire !


Bonjour ! Ici Julie Moynat, alias La Lutine du Web.

Je n’aurais jamais cru que ça arriverait un jour mais, cette fois-ci, j’ai décidé de passer par le format vidéo. Mais c’est pour une bonne raison : je vais devoir vous présenter quelques démonstrations d’usage de lecteurs d’écran et il fallait que j’introduise ces passages donc ça me paraissait plus facile de faire une vidéo pour la totalité !

Hé oui car je vais vous parler de cette terrible mode du texte en faux gras, en faux italique, avec des caractères fantaisistes au style gothique ou script, etc. : c’est-à-dire ces caractères que beaucoup utilisent sur les réseaux sociaux pour mettre en forme leurs messages alors qu’il n’existe aucune option pour mettre en gras ou en italique nos contenus. Je parlerai aussi de l’abus des émojis. Tous ces caractères dont je vous parle, oui, même les émojis, sont des caractères Unicode. Je cite Wikipédia :

Unicode est un standard informatique qui permet des échanges de textes dans différentes langues, à un niveau mondial.

Unicode, Wikipédia

Ce sujet-là, je l’avais pas mal abordé en 2019 sur Twitter notamment. Ça avait commencé avec un référenceur qui avait publié un article prônant l’usage des caractères en faux gras dans l’élément HTML <title> pour ressortir dans les résultats sur les moteurs de recherche (les personnes initiées appellent ça les « SERP »). Et j’en avais fait une vidéo pour lui faire comprendre le problème. Mais j’ai un petit peu échoué.

Considérant qu’il s’agissait d’un abus comme l’usage du texte blanc sur fond blanc (qui est une vieille mauvaise pratique qui a été sanctionnée par Google), j’ai contacté l’équipe accessibilité de Google. Et j’ai beaucoup échangé avec elle… je croyais que ça n’avait rien donné mais j’ai remarqué en début d’année 2022 que Google a finalement pris en compte mes retours car de nombreux résultats affichent désormais des résultats en transformant le texte en faux gras en texte normal !

Et puis, j’avais aussi abordé ce sujet sur mon blog dans une lettre à la SNCF qui avait lancé un jeu concours faisant écrire des tweets aux gens avec des caractères fantaisistes. La SNCF n’a absolument pas pris en compte le problème et les tweets fantaisistes ont continué même après le jeu.

Ensuite, je me suis dit que j’allais faire un article sur le sujet et j’ai laissé traîner ça pendant des mois puis des années. Mais là, en 2022, je vois de plus en plus de messages sur les réseaux sociaux qui utilisent ces caractères et ça m’agace parce que je veux leur partager une source en français avec démonstration des problèmes posés. Alors je m’y colle !

C’est quoi ces caractères dont tu nous parles ?

Sur les réseaux sociaux, on a une contrainte forte dans la rédaction des messages. Outre le nombre de caractères parfois limité, il n’existe généralement pas d’option permettant de mettre en forme nos messages. Pourtant, on voudrait bien mettre en valeur certains passages de texte en gras, par exemple. Mais c’est impossible !

Alors, il y a quelques années, des personnes ont créé des générateurs de texte en faux gras, faux italique, fausses typographies « sympa ». Ces caractères utilisés sont des symboles mathématiques alphanumériques c’est-à-dire que ce ne sont en aucun cas des caractères alphanumériques standards permettant d’écrire des mots. Ils servent à faire des mathématiques. Le site Unicode Table a d’ailleurs une page qui les référence.

Puisque ce ne sont pas des caractères alphanumériques standards, évidemment, ça n’est pas sans problème de les utiliser pour former des mots.

L’absence de compatibilité avec les lecteurs d’écran

Tout d’abord, cela pose des énormes problèmes de compatibilité avec les lecteurs d’écran. Donc un lecteur d’écran, c’est un logiciel qui permet, notamment aux personnes aveugles (mais pas que), de lire les contenus numériques sur un ordinateur ou un smartphone mais également de naviguer dans un ordinateur. Les lecteurs d’écran offrent un certain nombre de fonctionnalités permettant, par exemple, de voir la structuration des titres dans la page, d’afficher la liste des liens ou des boutons pour y accéder plus rapidement, etc.

Les lecteurs d’écran ont également une fonctionnalité particulière qui s’appelle une « visionneuse de parole ». C’est une petite fenêtre qui affiche en texte ce que lit le lecteur d’écran. C’est particulièrement pratique pour les personnes sourdes ou malentendantes qui testent l’accessibilité numérique. Toutefois, ce n’est pas parfait et on va y revenir.

Test 1 : Démonstrations de détournement de caractères mathématiques avec des lecteurs d’écran

Je vais vous montrer quelques démonstrations d’un texte écrit avec des caractères fantaisistes de différentes sortes lu par 3 lecteurs d’écran principaux sur ordinateur : VoiceOver sur Mac, NVDA sur Windows, JAWS sur Windows. Dans chaque vidéo, le lecteur d’écran lit d’abord la phrase écrite avec des caractères standards puis la même phrase qui mixe des morceaux en caractères standards avec d’autres en caractères fantaisistes.

Pour tout vous dire, la phrase est la suivante :

Quand j’écris du texte avec des caractères fantaisistes, j’écris du texte totalement inaccessible pour les personnes utilisant un lecteur d’écran. Il n’y a rien de cool !

Dans la version fantaisiste, j’ai remplacé des bouts de texte mais pas tous :

  • « du texte avec » est écrit en faux gras sans empattement  ;
  • « fantaisistes » est écrit en script ;
  • « totalement » est écrit en caractères contourés ;
  • « inaccessible » est écrit en caractères gothiques ;
  • « utilisant un lecteur d’écran » est écrit en faux gras avec empattement (sauf le é qui est une lettre normale) ;
  • « Il n’y a rien de cool » est écrit en faux gras italique.

Démo avec VoiceOver

Je vous présente d’abord une démonstration avec VoiceOver dans Safari sur MacOS.

Quand j’écris du texte avec des caractères fantaisistes, j’écris du texte totalement inaccessible pour les personnes utilisant un lecteur d’écran. Il n’y a rien de cool !

Quand j’écris des caractères, j’écris du texte notamment pour les personnes E accent aigu.

VoiceOver

Donc, comme vous pouvez le constater, la voix française que j’utilise dans VoiceOver ne supporte pas du tout les caractères mathématiques, enfin ceux-là en tout cas, et les ignore. Donc, il y a des trous dans le texte et il devient totalement incompréhensible. La partie de la phrase où il y a écrit « un lecteur d’écran » contient une lettre accentuée et celle-ci est une vraie lettre car les caractères accentués n’existent pas dans les caractères mathématiques. Donc c’est pour ça que le « e accent aigu » est restitué tout seul. Donc ça fait « les personnes E accent aigu ». Ça n’a absolument aucun sens !

Il faut savoir que le support des caractères par VoiceOver dépend de la voix utilisée. Donc il y a aucune des voix françaises que j’ai testées qui ne les supportait. En revanche, la voix anglaise américaine les supporte et les restitue comme des caractères mathématiques qu’elle épelle. Donc voici la vidéo en version anglaise :

When I write text with fancy characters, I write text that is totally inaccessible, especially to people using a screen reader. There’s nothing cool about it!

When I write mathematical sans-serif bold small T, mathematical sans-serif bold small E, mathematical sans-serif bold small X, mathematical sans-serif bold small T, mathematical sans-serif bold small W, mathematical sans-serif bold small one, mathematical sans-serif bold small T, mathematical sans-serif bold small H, mathematical bold script small F, mathematical bold script small A, mathematical bold script small N, mathematical bold script small C, mathematical bold script small Y characters, I write text that is mathematical double-struck small T, mathematical double-struck small O, mathematical double-struck small T, mathematical double-struck small A, mathematical double-struck small L, mathematical double-struck small L, mathematical double-struck small Y, mathematical double-struck small one, mathematical double-struck small N, mathematical double-struck small A, mathematical double-struck small C, mathematical double-struck small C, mathematical double-struck small E, mathematical double-struck small S, mathematical double-struck small S, mathematical double-struck small one, mathematical double-struck small B, mathematical double-struck small L, mathematical double-struck small E, especially to people mathematical bold small U, mathematical bold small S, mathematical bold small one, mathematical bold small N, mathematical bold small G, mathematical bold small A, mathematical bold small S, mathematical bold small C, mathematical bold small R, mathematical bold small E, mathematical bold small E, mathematical bold small N, mathematical bold small R, mathematical bold small E, mathematical bold small A, mathematical bold small D, mathematical bold small E, mathematical bold small R. Mathematical sans-serif bold italic capital T, mathematical sans-serif bold italic small H, mathematical sans-serif bold italic small E, mathematical sans-serif bold italic small R, mathematical sans-serif bold italic small E, mathematical sans-serif bold italic small S, mathematical sans-serif bold italic small N, mathematical sans-serif bold italic small O, mathematical sans-serif bold italic small T, mathematical sans-serif bold italic small H, mathematical sans-serif bold italic small one, mathematical sans-serif bold italic small N, mathematical sans-serif bold italic small G, mathematical sans-serif bold italic small C, mathematical sans-serif bold italic small O, mathematical sans-serif bold italic small O, mathematical sans-serif bold italic small L, mathematical sans-serif bold italic small A, mathematical sans-serif bold italic small B, mathematical sans-serif bold italic small O, mathematical sans-serif bold italic small U, mathematical sans-serif bold italic small T, mathematical sans-serif bold italic small one, mathematical sans-serif bold italic small T!

VoiceOver

Alors, c’est très chantant mais totalement incompréhensible et vraiment très long !

Dans ces deux vidéos avec VoiceOver, vous avez pu voir aussi qu’il y avait une petite fenêtre grise qui affichait le texte en cours de lecture par le lecteur d’écran. Dedans, les caractères mathématiques sont affichés tels que dans la page. Ainsi, une personne sourde ne s’appuyant que sur la visionneuse de parole ne saura pas que ce texte n’est pas accessible avec un lecteur d’écran. Donc il faut savoir que si du texte avec des caractères fantaisistes apparaît dans la visionneuse de parole, il s’agit d’un texte qui ne sera pas lu comme des mots.

Démo avec NVDA

Testons maintenant avec NVDA dans Firefox sur Windows.

Quand j’écris du texte avec des caractères fantaisistes, j’écris du texte totalement inaccessible pour les personnes utilisant un lecteur d’écran. Il n’y a rien de cool !

Quand j’écris des caractères, j’écris du texte notamment pour les personnes.

NVDA

Comme avec VoiceOver et la voix française, les caractères mathématiques ne sont pas restitués et ça fait des trous dans la phrase. Vous ne le voyez pas mais la visionneuse de parole affiche également les caractères tels qu’affichés dans la page alors qu’ils ne sont pas prononcés. Je ne vous passe pas la démo de la version anglaise car c’est le même comportement.

Démo avec JAWS

Je vous présente maintenant un dernier test avec JAWS, dans sa dernière version 2022.

Quand j’écris du texte avec des caractères fantaisistes, j’écris du texte totalement inaccessible pour les personnes utilisant un lecteur d’écran. Il n’y a rien de cool !

Quand j’écris minuscule grasse sans empattement D, minuscule grasse sans empattement U, minuscule grasse sans empattement T, minuscule grasse sans empattement E, minuscule grasse sans empattement X, minuscule grasse sans empattement T, minuscule grasse sans empattement E, minuscule grasse sans empattement A, minuscule grasse sans empattement V, minuscule grasse sans empattement E, minuscule grasse sans empattement C des caractères minuscule grasse de ronde F, minuscule grasse de ronde A, minuscule grasse de ronde N, minuscule grasse de ronde T, minuscule grasse de ronde A, minuscule grasse de ronde I, minuscule grasse de ronde S, minuscule grasse de ronde I, minuscule grasse de ronde S, minuscule grasse de ronde T, minuscule grasse de ronde E, minuscule grasse de ronde S j’écris du texte minuscule ajourée T, minuscule ajourée O, minuscule ajourée T, minuscule ajourée A, minuscule ajourée L, minuscule ajourée E, minuscule ajourée M, minuscule ajourée E, minuscule ajourée N, minuscule ajourée T, minuscule grasse gothique I, minuscule grasse gothique N, minuscule grasse gothique A, minuscule grasse gothique C, minuscule grasse gothique C, minuscule grasse gothique E, minuscule grasse gothique S, minuscule grasse gothique S, minuscule grasse gothique I, minuscule grasse gothique B, minuscule grasse gothique L, minuscule grasse gothique E notamment pour les personnes minuscule grasse U, minuscule grasse T, minuscule grasse I, minuscule grasse L, minuscule grasse I, minuscule grasse S, minuscule grasse A, minuscule grasse N, minuscule grasse T, minuscule grasse U, minuscule grasse N, minuscule grasse L, minuscule grasse E, minuscule grasse C, minuscule grasse T, minuscule grasse E, minuscule grasse U, minuscule grasse R, minuscule grasse D, E accent aigu, minuscule grasse C, minuscule grasse R, minuscule grasse A, minuscule grasse N. Majuscule grasse italique I, minuscule grasse italique L, minuscule grasse italique N apostrophe, minuscule grasse italique I, minuscule grasse italique A, minuscule grasse italique R, minuscule grasse italique I, minuscule grasse italique E, minuscule grasse italique N, minuscule grasse italique D, minuscule grasse italique E, minuscule grasse italique C, minuscule grasse italique O, minuscule grasse italique O, minuscule grasse italique L !

JAWS

Donc comme vous pouvez le constater, JAWS supporte ces caractères mathématiques et les restitue comme tels. Il n’utilise pas le mot « mathématique » contrairement à la voix américaine de VoiceOver mais il épelle chaque caractère avec sa particularité visuelle. La voix anglaise par défaut fait de même.

Test 2 : Démonstrations de détournement d’émojis avec des lecteurs d’écran

Maintenant que nous avons vu le résultat du détournement des caractères mathématiques, voyons le résultat du détournement d’émojis pour faire des phrases.

Comme pour le test précédent, la phrase est d’abord lue dans son écriture correcte sans émoji puis avec les émojis. La phrase est la suivante :

Le saviez-vous ? Plus de 97% des pages d’accueil d’1 million de sites web ont des anomalies d’accessibilité détectables automatiquement !

La version avec les émojis remplace :

  • le point d’interrogation par un émoji point d’interrogation et un émoji qui réfléchit ;
  • le nombre 97 et le chiffre 1 sont remplacés par des émojis de touches numérotées ;
  • le mot « accueil » est remplacé par un émoji de maison (je vous assure que j’ai déjà vu des gens faire ça) ;
  • le point d’exclamation final est remplacé par 3 émojis point d’exclamation et un émoji qui crie de frayeur.

Démo avec VoiceOver

Commençons avec la démo avec VoiceOver dans Safari sur MacOS.

Le saviez-vous ? Plus de 97% des pages d’accueil D un million de sites web ont des anomalies d’accessibilité détectables automatiquement !

Le saviez-vous point d’interrogation rouge visage en pleine réflexion plus de touche de clavier 9 touche de clavier 7 pourcent des pages des maisons avec jardin D touche de clavier 1 million de sites web ont des anomalies d’accessibilité détectables automatiquement trois points d’exclamation rouge visage hurlant de peur.

VoiceOver

Alors, il est déjà intéressant de constater que, même dans la phrase écrite normalement, il y a un petit défaut de prononciation. J’ai écrit « d’un million » avec le chiffre 1 et le lecteur d’écran lit, ici, le D puis le 1 mais ne fait pas de liaison.

Ensuite, pour la phrase avec les émojis, le 97% devient « touche de clavier 9 touche de clavier 7 pourcent » et ça nécessite donc une gymnastique de l’esprit pour comprendre que ça fait 97%. Le mot « accueil » est ensuite remplacé par « maison avec jardin » ; ce qui n’a absolument rien à voir et rend la phrase vraiment difficile à comprendre.

Et VoiceOver apporte un support particulier pour les émojis des 3 points d’exclamation rouge d’affilée. Il s’agit de 3 émojis séparés mais il les compte pour alléger la restitution. Ça limite un peu la pénibilité à l’écoute !

Démo avec NVDA

Testons maintenant avec NVDA dans Firefox sur Windows.

Le saviez-vous ? Plus de 97% des pages d’accueil D un million de sites web ont des anomalies d’accessibilité détectables automatiquement !

Le saviez-vous point d’interrogation rouge visage en pleine réflexion plus de 9 7 pourcent des pages des maisons avec jardin D’touche 1 million de sites web ont des anomalies d’accessibilité détectables automatiquement point d’exclamation rouge point d’exclamation rouge point d’exclamation rouge visage qui hurle de peur.

NVDA

Alors, NVDA lit comme VoiceOver la première phrase avec le défaut de liaison du « D apostrophe » avec le chiffre 1.

Et puis, pour la phrase avec les émojis, le 97% est plus compréhensible qu’avec VoiceOver car il lit « 9 7 % ». Toutefois, on pourrait se demander si c’est 97 ou 9,7%. Du coup, c’est pas très clair. Et puis, pour le chiffre 1 pour « 1 million », cette fois, il nous dit « touche 1 » alors qu’il n’a pas dit le mot « touche » pour le 9 et le 7. Donc, c’est pas très cohérent.

Et les 3 émojis « point d’exclamation rouge » sont ici restitués séparément et, on entend que c’est pénible !

Démo avec JAWS

Allons voir ce que fait JAWS dans Firefox sur Windows.

Le saviez-vous ? Plus de 97% des pages d’accueil d’un million de sites web ont des anomalies d’accessibilité détectables automatiquement !

Le saviez-vous triangle noir pointant vers le haut visage pensif plus de 9 point d’interrogation point d’interrogation 7 pourcent des pages d’maisons avec jardin d’un million de sites web ont des anomalies d’accessibilité détectables automatiquement demi-disque droite noir demi-disque droite noir demi-disque droite noir visage hurlant de peur.

JAWS

Donc JAWS lit correctement la liaison du « D apostrophe » avec le chiffre 1.

En revanche, signe d’un manque de support des caractères, il y a un vrai problème avec les émojis chiffres cumulés où il dit « 9 point d’interrogation point d’interrogation 7 ». Le chiffre 1 tout seul passe bien et la liaison est même faite avec le « D apostrophe ».

Par ailleurs, les émojis point d’interrogation rouge et point d’exclamation rouge ne sont pas du tout supportés. Le premier est vocalisé comme un « triangle noir pointant vers le haut » et le second comme un « demi-disque droite noir ».

Donc, en résumé, le détournement de caractères mathématiques ou d’émojis pour écrire des mots n’est absolument pas compatible avec les lecteurs d’écran.

Les autres problèmes posés par le détournement des caractères Unicode

Le détournement des caractères Unicode n’impacte pas seulement les personnes qui utilisent des lecteurs d’écran. En effet, d’autres problèmes peuvent se poser tels que :

  • L’impossibilité de personnaliser la police de caractères pour ces éléments or, une écriture en italique, script ou gothique peut être difficilement lisible pour des personnes dyslexiques ou malvoyantes, par exemple ;
  • La difficulté de compréhension des phrases lorsque des mots sont remplacés par des émojis. Cela peut être particulièrement problématique pour les personnes ayant un handicap dit « intellectuel » et/ou un handicap cognitif. Tout le monde ne met pas l’idée que vous avez en tête sur un émoji. De plus, certains émojis ne ressemblent pas à grand chose en petit format et selon le système d’exploitation ou l’application utilisée ;
  • Enfin, le manque de compatibilité dans certains systèmes d’exploitation, ou dans certains logiciels ou applications mobiles : ainsi, à la place de certains caractères fantaisistes ou émojis, on peut avoir des rectangles barrés indiquant la non-prise en charge du caractère. Le propos devient alors absolument incompréhensible parce qu’il manque des morceaux.

Est-ce que c’est non conforme au RGAA ou aux WCAG ?

Alors c’est bien beau toutes ces petites démos mais puisque je vous parle ici d’accessibilité pour les personnes handicapées depuis le début, une question se pose : est-ce que le fait de détourner des caractères Unicode de leur usage pour écrire des mots, des phrases est non conforme aux règles d’accessibilité officielles ? Alors, je parle ici du RGAA (Référentiel Général d’Amélioration de l’Accessibilité) qu’on utilise en France notamment mais aussi des WCAG (les Web Content Accessibility Guidelines) qui est la norme internationale en matière d’accessibilité des contenus web.

Donc la réponse est oui pour le RGAA. En effet, le critère 13.5 sur les contenus cryptiques qui dit Dans chaque page web, chaque contenu cryptique (art ASCII, émoticône, syntaxe cryptique) a-t-il une alternative ? correspond à ce mauvais usage.

Toutefois, le test demande de respecter une solution parmi deux :

  • soit un attribut title est disponible (c’est-à-dire qu’une infobulle apparaît au survol du contenu cryptique) ;
  • soit une définition est donnée par le contexte adjacent.

Aucune de ces solutions ne permet de résoudre concrètement le problème posé. En effet, non seulement un attribut title sur un élément HTML non interactif ne sera pas restitué par les lecteurs d’écran mais une définition donnée par le contexte adjacent ne permettra pas de mieux comprendre un texte à trou.

Donc là, on a besoin d’une amélioration du RGAA sur ce point.

La réponse est également oui pour les WCAG. Le critère de succès 1.1.1 des WCAG correspond à ce sujet. La technique associée « F71 » dispose d’ailleurs d’un exemple très concret du mot cook écrit avec des caractères visuellement similaires mais pas techniquement similaires.

Qu’est-ce qu’on peut faire ?

La seule solution est de ne pas détourner les caractères de leur usage initialement prévu. Il n’y a aucune solution technique qui permettrait de continuer à faire n’importe quoi.

Donc, pour écrire des mots, il faut utiliser des vraies lettres. Pour écrire des chiffres, et particulièrement des nombres, il faut utiliser des vrais chiffres.

Pour les caractères fantaisistes

Les caractères utilisés aujourd’hui pour écrire de façon fantaisiste ne doivent pas être utilisés pour autre chose que ce pour quoi ils sont prévus, c’est-à-dire des mathématiques !

Et non, ce n’est pas aux lecteurs d’écran de s’adapter ! Ces caractères sont prévus pour être des caractères mathématiques. Cela signifie que si certains lecteurs d’écran ou certaines voix qui ne les restituent pas aujourd’hui devaient les restituer dans le futur, ce sont les noms des caractères mathématiques qu’ils devraient restituer !

Il s’agit purement et simplement d’un détournement de caractères. Donc, ce n’est pas aux logiciels de s’adapter à vos bêtises. C’est à vous d’arrêter de faire des bêtises.

Toutefois, il serait appréciable que les réseaux sociaux se penchent sur la possibilité d’avoir quelques options basiques de mise en forme du texte pour stopper ces maudits usages.

Pour les émojis

Concernant les émojis, on ne les utilisera surtout pas pour remplacer des mots, des chiffres, de la ponctuation. On évitera de les utiliser en début ou en milieu de phrase. On évitera également de les multiplier.

En résumé : faire simple est souvent la meilleure des solutions !

Hé voilà, merci pour votre attention ! Vous retrouverez sur le blog la transcription textuelle de cette vidéo avec des ressources complémentaires en fin d’article qui vous permettront d’approfondir ce sujet.

Ressources complémentaires

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.