Rendre un dessin ASCII accessible : descriptions et exemples
Un lecteur d’écran peut énoncer la ponctuation sans restituer l’image. Décrivez la fonction du dessin et les informations qu’il apporte ; un motif décoratif et un schéma explicatif ne demandent pas la même alternative.
Choisir l’information à transmettre
| Cas | Alternative utile | À éviter |
|---|---|---|
| Petit chat / small cat | Un chat de face / front-facing cat | Liste de signes / list of marks |
| Bannière TITRE / TITLE banner | Titre en texte / plain heading | Nom de police seul / only font name |
| Schéma / diagram | Relations et ordre / relationships and order | « Image ASCII » / “ASCII image” |
Avant d’écrire, demandez-vous ce que perdrait le lecteur si le dessin disparaissait. S’il perd le nom d’un projet, reproduisez ce nom. S’il perd une relation entre étapes, expliquez cette relation. Le nombre de caractères du dessin n’est généralement pas l’information principale.
Exemple 1 : une illustration simple
<pre role="img" aria-label="Petit poisson">><></pre>
Cette alternative nomme la forme sans réciter « supérieur, inférieur, supérieur ». La technique H86 du W3C propose des alternatives pour les dessins ASCII. Il faut tester l’annonce effective avec les technologies d’assistance visées : le fragment n’est pas une certification.
Exemple 2 : un schéma à trois étapes
[A] --> [B] --> [C]
Une description utile serait : « Le traitement passe de A à B, puis de B à C. » Si A, B et C ont des noms métier, utilisez-les dans la description. Le principe de la technique G94 est de conserver le rôle et l’information. Pour un schéma complexe, préférez une explication structurée adjacente à un long aria-label.
Décoration et outils de copie
Un motif purement décoratif peut être masqué aux technologies d’assistance avec aria-hidden="true", à condition qu’aucune information utile ne soit perdue. Ne placez pas un bouton de copie ou un lien à l’intérieur d’un conteneur ainsi masqué. Dans une bibliothèque, le dessin est lui-même le contenu recherché : gardez un nom, les dimensions et une méthode de copie utilisable au clavier.
Vérifications concrètes
Parcourez la page au clavier ; vérifiez que le focus est visible et que les boutons indiquent leur action. Agrandissez le texte et testez une fenêtre étroite. Écoutez ensuite l’ordre de lecture avec un lecteur d’écran. Une description correcte ne corrige pas un bouton inaccessible ni une information transmise seulement par la couleur.
Intégration HTML · Choisir un export
Avant de publier un dessin en caractères colorés, vous pouvez tester le contraste de deux couleurs sur Code Couleur en saisissant la couleur du texte et celle du fond. Ce contrôle complète les essais au clavier et la description textuelle ; il ne constitue pas un audit complet d’accessibilité.