Make ASCII art accessible: descriptions and examples
A screen reader may announce punctuation without conveying the image. Describe the drawing’s purpose and information; decoration and an explanatory diagram need different alternatives.
Choose what to communicate
| Case | Useful alternative | Avoid |
|---|---|---|
| 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” |
Before writing, ask what the reader would lose if the drawing disappeared. If it is a project name, reproduce that name. If it is a relationship between steps, explain the relationship. Character count is usually not the main information.
Example 1: a simple illustration
<pre role="img" aria-label="Small fish">><></pre>
This alternative names the shape instead of reciting “greater than, less than, greater than”. W3C technique H86 provides alternatives for ASCII art. Test the actual announcement with the intended assistive technology: this fragment is not a certification.
Example 2: a three-step diagram
[A] --> [B] --> [C]
A useful description is: “Processing moves from A to B, then from B to C.” If A, B and C have meaningful names, use those names. Technique G94 focuses on preserving purpose and information. For a complex diagram, prefer an adjacent structured explanation to a very long aria-label.
Decoration and copying tools
Pure decoration can be hidden from assistive technology using aria-hidden="true", provided no useful information is lost. Do not put a copy button or link inside that hidden container. In a library, the design itself is the requested content: keep a name, dimensions and a keyboard-usable way to copy it.
Concrete checks
Navigate by keyboard; check visible focus and meaningful button names. Increase text size and try a narrow window. Then listen to reading order with a screen reader. A correct description cannot fix an inaccessible button or information conveyed only by colour.
HTML integration · Choose an export
Before publishing a coloured character drawing, you can test the contrast of two colours on Code Couleur using its foreground and background values. This check complements keyboard testing and a text description; it is not a complete accessibility audit. Resource in French.