Accessibility rule: Improper use of preformatted text element, explained

There are situations where it makes sense to make sure that text on a website will be displayed exactly as written in the HTML source code. This is called preformatting text. It is needed for instance when presenting snippets of code or ASCII art visually.

In HTML, the <pre> tag defines preformatted text. Text in a <pre> element is displayed in a fixed-width font, and the text preserves both spaces and line breaks. 

Examples of ASCII art in Wikipedia. 

Who is impacted by this barrier?

If the <pre>  element is used for anything other than code or a figure, users are prevented from making changes to content spacing. This will impact users with dyslexia or low vision who may need to change the content spacing to improve text readability.

On the other hand, if ASCII Art is not defined as a figure with a role of an image, screen readers will announce each letter in the sequence. For ASCII art, this would not make sense. In this case, it is important to make sure the art is defined as an image and provide an alternative description for the image.

How does the rule work?

This rule checks that 

A. Preformatted text is used for a visual representation of computer code.

B. The preformatted text is inside a figure (for ASCII art).

You can read more about the rule in the technical documentation here.