Journal : Émojis accessibles

Je savais déjà que l'utilisation d'émojis dans le texte n'était pas accessible. C'est leur texte alternatif qui est lu au lecteur d'écran. Comme "mains rassemblées" ou folded hands pour l'émoji utilisées pour symboliser un "merci" .

La lecture de l'article making emojis and icons screen reader accessible m'a fait agir dessus sur ce blog avec l'extension markdown-it-emoji.

J'ai suivi la documentation pour rendre l'affichage accessible.

Ainsi, le raccourci textuel :pray: est converti en :

<span class="emoji emoji--pray" aria-hidden="true">🙏</span>

Il a fallu plonger dans les entrailles du fonctionnement de markdown-it pour que chaque émoji existante soit elle aussi, convertie dans un code similaire.

J'ai créé une règle qui est insérée avant l'extension émojis pour convertir chaque émoji (unicode) en raccourci textuel d'émoji :

on parcourt chaque jeton markdown de type inline ;
on vérifie la présence d'une émoji (via leur classe Unicode d'expression régulière) ;
on remplace chaque occurence par son raccourci textuel.

Le code complet est disponible sur GitHub.

Tout autre émoji décoratif (comme dans cette entrée de journal par exemple) est masquée aux lecteurs d'écran avec aria-hidden="true" :

<h1 id="post-title">
  <span aria-hidden="true">☕️</span>
  Journal : Émojis accessibles
</h1>

Je n'ai pas eu à reprendre les vingt années de contenus pour y arriver. La lecture d'une issue GitHub, d'une proposition de code et le code d'autres extensions markdown m'ont aider à mettre en place les mécanismes ci-dessus.