Utilisation accessible des emojis : ton texte doit être compréhensible même lu à voix haute

Une personne naviguant avec un lecteur d'écran perçoit souvent l'emoji via son nom. Ce nom ne correspond pas nécessairement au sens figuré auquel l'auteur pensait. Le guide W3C H86 attire particulièrement l'attention sur ce point. Source : W3C H86

Écris ce que tu souhaites communiquer

Un exemple court :

Vendredi ☕, ensuite 📞, enfin 📄.

La phrase est interprétable de plusieurs façons même visuellement. Signifie-t-elle prendre un café, passer un appel téléphonique et envoyer un document ? Quand cela se produit-il, et qui est responsable de quoi ? La lecture des noms des symboles ne répond pas à ces questions à elle seule.

Version plus précise :

Vendredi à 9 heures, nous nous rencontrons pour un café. Ensuite, j'appelle le fournisseur et j'envoie le résumé dans l'après-midi.

Si tu souhaites ajouter une tasse au café, la phrase doit rester complète. Dans un communiqué, la date, le lieu, le prix et la tâche à effectuer doivent aussi figurer sous forme de texte. Les recommandations d'accessibilité pour les réseaux sociaux soutiennent également cette solution. Source : NCDIT, Social Media Content Accessibility

Une longue suite de symboles lue à voix haute peut devenir une longue énumération

Dans le message « Félicitations ! 🎉🎉🎉🎉🎉 », le lecteur d'écran peut lire le même nom plusieurs fois. Essaie avec un seul symbole : « Félicitations pour ton résultat ! 🎉 ». La phrase est ainsi plus courte à écouter. Il est judicieux de placer le symbole à un point d'arrêt naturel, par exemple à la fin du paragraphe. Source : Section508.gov, réseaux sociaux

Dans une liste, utilise une véritable énumération lorsque l'interface le permet. Si tu places la même étoile, coche ou doigt au début de chaque ligne, réfléchis à l'information apportée par le symbole répété. Une numérotation simple ou une liste intégrée offre souvent une structure plus facile à suivre.

En revanche, dans une comparaison où les emojis eux-mêmes sont les sujets, il est justifié de présenter plusieurs symboles. Dans ce cas, écris leur nom et l'explication de la différence à côté. Ainsi, le lecteur dispose de l'essentiel sans avoir à distinguer les images.

Que peux-tu faire sur ton propre site web ?

Si un emoji porte un sens distinct, un nom accessible peut lui être attribué en HTML. Un exemple propre, conforme à la méthode présentée par W3C :

<span role="img" aria-label="Envoyé avec succès">✅</span>

Dans cet exemple, le nom accessible indique l'envoi réussi. L'attribut aria-label n'apparaît pas comme légende pour le lecteur voyant, c'est pourquoi tu dois aussi écrire l'état important sous forme de texte visible. Le libellé d'un bouton doit nommer l'action : par exemple « Copier ».

Pour un emoji inséré comme fichier image, détermine le texte alternatif de l'élément img en fonction de la fonction de l'image. Si la même information figure déjà entièrement à côté de l'image et que le graphique n'ajoute pas de nouveau sens, un alt="" vide peut être justifié. Le guide de W3C sur les images présente en détail cette décision dépendante du contexte. Source : W3C, Decorative Images

La vérification doit se faire sur l'interface finale

Dans un post sur les réseaux sociaux, tes options techniques sont généralement plus limitées, c'est pourquoi une phrase bien écrite est particulièrement importante. La gestion des noms accessibles peut dépendre du système et de l'application. Une seule solution HTML ou un test réussi ne prouve pas à lui seul l'accessibilité de l'ensemble de la page.

Pour une vérification pratique, lis le texte sans les symboles, puis écoute-le sur l'interface finale avec un lecteur d'écran. Observe où l'information se répète inutilement, où la phrase est interrompue, et s'il reste des références non expliquées. Après la correction, répète le test au même endroit.

Pour commencer, choisis un post ou un message client fréquemment utilisé. Raccourcir la suite de symboles superflue et écrire les mots manquants constituent immédiatement une modification concrète et vérifiable.