ASCII Art and Accessibility

Making ASCII Art Accessible

ASCII art presents significant accessibility challenges. Screen readers interpret text character by character, meaning ASCII art that looks like a picture to sighted users becomes a meaningless string of characters for screen reader users.

How Screen Readers Handle ASCII Art

When a screen reader encounters ASCII art, it reads each character individually:

  /\_/\       Screen reader output:
 ( o.o )     "slash backslash underscore slash backslash..."
  > ^ <

This provides no useful information about what the art represents. For users who rely on screen readers, unannounced ASCII art is noise at best and confusing at worst.

Web Context: ARIA Attributes

When displaying ASCII art on web pages, use ARIA attributes to provide accessible alternatives:

<pre role="img" aria-label="ASCII art of a cat face">
  /\_/\
 ( o.o )
  > ^ <
</pre>

The role="img" tells the screen reader to treat the element as an image, and aria-label provides the description that the screen reader announces.

For decorative art that does not convey information:

<pre role="presentation" aria-hidden="true">
 ===== DECORATIVE BORDER =====
</pre>

Documentation Context

In README files and documentation:

1. Always describe the diagram in text — The ASCII art should supplement, not replace, written descriptions
2. Use HTML comments — <!-- This diagram shows the request flow from client to server -->
3. Provide alternative formats — Link to an SVG version of complex diagrams

Email Context

In email signatures:

• Keep ASCII art minimal
• Include all important information as plain text (not embedded in the art)
• Remember that some email clients reflow text, breaking ASCII art

Code Comments

When using ASCII art in source code comments:

• Add a text description before or after the art
• Ensure the art supplements a text explanation rather than being the only documentation

Testing for Accessibility

1. Use a screen reader — Test with VoiceOver (macOS), NVDA (Windows), or Orca (Linux)
2. Disable CSS — Verify that the alt text provides the information needed
3. Check contrast — Ensure ASCII art characters have sufficient contrast against the background (WCAG 4.5:1 ratio)
4. Test with zoom — ASCII art should remain readable at 200% zoom without horizontal scrolling