Vous êtes à : Blog > Jour 57 - Contenu cryptique

Jour 57 - Contenu cryptique

Proposer des émoticônes, des dessins ASCII ou du “leet speak” accessibles.

Ce que j’ai fait :

Ce que j’ai appris

Définitions

Nous nous intéressons aux critères d’accessibilité suivants :

Critère 13.5. Dans chaque page web, chaque contenu cryptique (art ASCII, émoticon, syntaxe cryptique) a-t-il une alternative ?

Critère 13.6. Dans chaque page web, pour chaque contenu cryptique (art ASCII, émoticon, syntaxe cryptique) ayant une alternative, cette alternative est-elle pertinente ?

L’art ASCII (American Standard Code for Information Interchange) consiste à former des images à partir des lettres et caractères spéciaux contenus dans le code ASCII.

Une des approches les plus simples de l’art ASCII consiste à combiner 2 ou 3 caractères pour exprimer une émotion en texte. Il s’agit des émoticônes, qui peuvent se lire comme du texte ou en penchant légèrement la tête à gauche. Par exemple :

<!-- Un sourire -->
:-)  ou  :)

<!-- Un clin d'oeil -->
;-)  ou  ;)

<!-- La fatigue ou l'exaspération -->
-_-"

On peut également réaliser des dessins entiers en ASCII(lien externe). Il y a quelques années, Biocoop avait même conçu pour sa campagne éco-responsable un site web sur lequel toutes les photos et animations avaient été remplacées par des illustrations en ASCII. Vous pouvez encore consulter le site via les archives de la WayBack Machine(lien externe).

La syntaxe cryptique se réfère quant à elle à des systèmes d’écriture utilisant de manière détournée les caractères usuels. Par exemple : le langage SMS(lien externe) ou le “leet speak”(lien externe).

<!-- Langage SMS -->
à12C4 pour "A un de ces quatres"

<!-- Langage Leet Speak -->
Au5t1N r0xx0rz pour "Austin Rocks"

Défauts d’accessibilité

Ces contenus peuvent se révéler difficile à comprendre : d’une part car tout le monde n’est pas familier de ce type de langage, d’autre part car leur restitution par les technologies d’assistance est loin d’être optimale. Les principales personnes impactées sont les aveugles et mal-voyant·e·s utilisant des lecteurs d’écran et des synthèses vocales.

A titre d’exemple, prenons le tweet de Mozilla Developer en date du 30 décembre 2019 (comme quoi l’art ASCII est loin d’être mort et enterré) :

Ce tweet dessine donc en langage ASCII le chiffre 2020. Je vous invite ensuite à regarder cette vidéo d’Adrian Roselli(lien externe) : il s’agit de la restitution de ce tweet par VoiceOver, restitution particulièrement fastidieuse et incompréhensible. Il existe d’ailleurs un bot Twitter qui fournit des enregistrements de mèmes d’art ASCII(lien externe) afin de montrer à quel point leur lecture par les technologies d’assistance peut s’avérer difficile.

Certains lecteurs d’écran ont en revanche une bonne prise en charge des émoticônes. En testant avec Talkback le rendu de l’émoticône :( j’ai eu pour résultat émoticône triste. La restitution est donc correcte.

Les solutions possibles

Il est nécessaire de fournir la signification d’un contenu cryptique. Selon le RGAA (Référentiel Général d’Amélioration de l’Accessibilité), cette signification peut être donnée par un attribut title ou le contexte adjacent, et elle doit être pertinente.

Exemple avec un attribut title et la balise <abbr> :

<abbr title="A un de ces quatres">à12C4</abbr>

Néanmoins, le rendu de l’attribut title n’est pas toujours optimal selon les lecteurs d’écran, et il n’est pas accessible sur un mobile ou via la navigation au clavier.

La signification peut également être indiquée dans le contexte, par exemple entre parenthèses :

<p>à12C4 (à un de ces quatres)</p>

Cette solution garantit la lisibilité de la signification pour tous les utiliateurs et utilisatrices. Il est possible de rendre ce texte uniquement accessible aux technologies d’assistance en le masquant de manière appropriée (voir à ce sujet l’article Cacher du contenu en CSS) :

<p>à12C4 <span class="sr-only">(à un de ces quatres)</span></p>

Il est aussi possible de fournir une alternative aux dessins ASCII via les éléments <figure> et <figcaption>, ainsi que les attributs ARIA role="img" et aria-labelledby :

<figure role="img" aria-labelledby="legende-personnage">
  <pre>

  \O/
   |
  / \

  </pre>
  <figcaption id="legende-personnage">
    Une personne contente représentée en art ASCII.
  </figcaption>
</figure>

Le dessin sera donc bien annoncé comme une image et le lecteur d’écran restituera uniquement la description alternative.

Sur les réseaux sociaux, et notamment Twitter, les dessins ASCII sont encore largement répandus (comme le montre l’exemple du tweet de Mozilla Developer). Une bonne pratique consiste à faire une capture d’écran du dessin et la poster en tant qu’image avec un attribut alt. Ainsi les technologies d’assistance pourront facilement lire l’alternative.