Les émoticônes et suites de caractères spéciaux de votre site sont-ils accompagnés d'une description de leur signification ?
Critère officiel 13.5 — Dans chaque page web, chaque contenu cryptique (art ASCII, émoticône, syntaxe cryptique) a-t-il une alternative ?
Pourquoi c'est important
Un logiciel de lecture annonce les émoticônes selon leur encodage technique, pas selon leur sens. L'émoticône 🎉 peut être lue avec son nom technique anglais incompréhensible, et « :-) » devient « deux-points tiret parenthèse fermante ». Sans description de la signification, le message émotionnel est totalement perdu.
Exemples concrets
Ce qui est conforme
L'actualité du 1er janvier utilise l'émoticône 🎉 placée en fin de titre, après le texte principal. Le message reste compréhensible sans l'émoticône. Si elle est conservée, son alternative textuelle « (célébration) » est associée.
Ce qui pose problème
L'actualité commence par « 🎉🎆✨ Bonne année 2025 ! 🎉🎆✨ ». Le logiciel de lecture produit une longue suite de noms techniques avant d'atteindre le texte — le message est noyé dans du bruit.
Comment agir
Limitez les émoticônes dans les titres et introductions d'articles. Si vous en utilisez, placez-les en fin de phrase — jamais en début. Le texte doit être compréhensible sans eux. Pour les suites de hashtags ou de symboles dans un texte, reformulez en texte lisible.
Règles clés
- Émoticônes : <span role='img' aria-label='Sourire'>:-)</span>.
- Acronymes : <abbr title='Référentiel Général d'Amélioration de l'Accessibilité'>RGAA</abbr>.
- Art ASCII : description via aria-label ou alternative textuelle adjacente.
Erreurs fréquentes
- Émoticônes textuelles :-) ;-) dans les contenus sans alternative
- Art ASCII sans description
- Acronymes non développés à leur première occurrence
Exemples de code
émoticône sans alternative
✗ Non conforme<p>Merci pour votre commande :-)</p>Annoncé : 'deux points tiret fermante parenthèse' — incompréhensible.
émoticône avec alternative
✓ Conforme<p>Merci pour votre commande
<span role="img" aria-label="sourire">:-)</span>
</p>role='img' + aria-label='sourire'. Annoncé : 'sourire, image'.
Référence WCAG : 1.1.1