ASCI Art
Zeichnen mit Zeichen

WCAG Kontext

Erfolgskriterium 1.1.1 Nicht-textueller Inhalt

Bilder benötigen mit wenigen Ausnahmen eine textuelle Alternative.

ASCII-Art ist laut Definition für Nicht-textuellen Inhalt als Muster aus Zeichen ein Bild. Der Inhalt ist keine Abfolge von Zeichen, in dem die Abfolge etwas aus menschlicher Sprache ausdrückt.

Folglich muss eine Grafik aus Zeichen über eine textuelle Alternative verfügen.

Erfolgskriterium 1.4.5: Abbildung von Text

Wo immer möglich, muss Text als solcher verfügbar sein. Bei der Vergrößerung einer Abbildung von Zeichen wird die Erkennbarkeit durch Pixelvergrößerung beeinträchtigt.

1.4.12 Textabstände

Abstände zwischen Zeichen, Wörtern, Zeilen und Absätzen müssen bei Konfigurationsmöglichkeitenen im Browser veränderbar sein.

Für ASCII-Art ist in diesem Erfolgskriterium keine Ausnahme explizit vorgesehen. Da es sich dabei jedoch um ein Bild und keinen Text handelt und eine Abstandvergrößerung die visuelle Wahrnehmbarkeit potenziell beeinträchtigt, kann dieses Erfolgskriterium ignoriert werden.

Problematik für Screen Reader

Für blinde Menschen, die mit einem Screen Reader arbeiten, ist eine Wiedergabe der Computerzeichen einer ASCII-Art-Darstellung völlig unverständlich.

• Die erforderliche zweidimensionale Wahrnehmung ist bei der linearen Wahrnehmung mit einem Screen Reader nicht möglich.
• Eine Sprachausgabe liest die einzelnen Zeichen linear vor. Satzzeichen werden dabei möglicherweise ignoriert, wenn dies der aktuellen Konfiguration im Screen Reader entspricht.
• Auf der Braillezeile werden die einzelnen Zeichen und Leerzeichen dargestellt. Allerdings wird jeweils nur eine Zeile dargestellt. Und die einzelnen Braillezeichen geben nicht die visuellen Linien wieder.

Eine visuelle Darstellung aus Zeichen ist daher ontologisch als Bild einzustufen und und technisch entsprechend zu realisieren.

Technische Realisierung

Typischerweise werden ASCII -Zeichnungen im HTML-Element pre realisiert. Damit werden vom Browser implizit folgende Darstellungen umgesetzt:

• Die Zeichenbreite ist gleichbleibend (monospace).
• Es erfolgen keine Zeilenumbrüche bei langen Zeilen .

Zur barrierefreien Darstellung einer ASCII-Grafik stehen folgende ARIA-Anweisungen zur Verfügung:

role="img"

Eine ASCII-Grafik ist kein Text, sondern eine visuelle Darstellung aus Zeichen und muss daher technisch für Screen Reader als Bild realisiert werden.

aria-label

Die Beschreibung des Elements erfolgt mittels ARIA und nicht mit dem HTML-Attribut alt für Alternativtext.

font-weight

Die Strichstärke sollte zur Verbesserung der visuellen Wahrnehmbarkeit erhöht werden (font‑weight: bold).

Der Code für eine ASCII-Grafik kann also folgendermaßen aussehen:

<pre
  role="img"
  aria-label="Zeichnung eines Rindes aus Satz- und Sonderzeichen"
  style="
    font-weight: bold; ">
         (__)
         (oo)   
   /------\/     
  / |    ||  
 *  /\---/\ 
    ~~   ~~  
</pre>

Dieser Code wird in deinem Browser folgendermaßen dargestellt.

         (__)
         (oo)   
   /------\/     
  / |    ||  
 *  /\---/\ 
    ~~   ~~  

Beispiele für die Verwendung von Zeichen

Welche Zeichen wofür verwendet werden können, findest du in der folgenden exemplarischen Sammlung. Da das Tippen einzelner Zeichen nicht geläufig ist, werden verfügbare Shortcuts in Word angegeben.

_______

-------

~~~~~~~

|
|
|

  /
 /
/

     \
      \
       \

 oo

 o o

 v V

Code oder Screenshot?

Barrierefreiheit optimieren