Visual effect degrades the programmatic readability

What is the problem?

Text is well understood by assistive technologies. Techniques that create a visual effect of text, can be very problematic.

ASCII art used to create a visual effect

ASCII art, generally used as a term to refer to the technique of using characters and spacing to create a visual image or effect. Most ASCII art is non recognizable if rendered using an alternative font than the author intended. Think of assistive technologies as an alternative font, unable to understand what the original intent the author had.

The following CodePen shows how 2 lines of text can be displayed with spacing between each letter.

See the Pen 1.3.2 - Comparing ASCII art to CSS by Equal Entry LLC (@EqualEntry) on CodePen.

Screen Reader Announces:T H I S   I S   N O T   A   G O O D   I D E A ! ! !
heading level 3
You have a choice!

While this is very readable visually, let’s listen at how a screen reader announces these lines.

Using CSS for visual style

Create the visual style you want using CSS without changing the programmatic meaning of the text.

In the example above the text “You have a choice!” is written as text, without ASCII artful spacing, and uses the following CSS to achieve the visual style of spacing between the letters.

h3 { letter-spacing: 1em; word-spacing: 3em; }

See the W3C’s Technical Report, Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification, specifically “16.4 Letter and word spacing: the ‘letter-spacing’ and ‘word-spacing’ properties”.

While now specific failure technique has been created by the W3C regarding the use of <br> it is a best practice to avoid them and use CSS for spacing.

C8: Using CSS letter-spacing to control spacing within a word