The <pre> Element
As defined in the HTML Living Standard, the <pre> element represents a block of preformatted text, in which structure is represented by typographic conventions rather than by elements.
_________________
< Accessibility! >
-----------------
\ ^__^
\ (oo)\_______
(__)\ )\/\
||----w |
|| ||
<pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks.
</pre>
View HTML Living Standard: The pre element
Usage with the <code> Tag
The most common semantic use for <pre> is wrapping a <code> element to display multi-line blocks of source code. While <pre> handles the visual layout (indentation and line breaks), the <code> tag provides the meaning.
<pre><code>
function helloWorld() {
console.log("Hello, SimpleAccess!");
}
</code></pre>
WCAG Requirement: Info and Relationships
Success Criterion 1.3.1 (Level A): Information, structure, and relationships conveyed through presentation can be programmatically determined.
For users of assistive technology, the <pre> tag signals that whitespace is significant. Screen readers may adjust how they announce the content, ensuring that indentation—which often conveys hierarchy in code—is perceivable.
Reflow and Responsiveness
By default, <pre> elements do not wrap text. This can cause a horizontal scrollbar on small screens, which can be an accessibility barrier.
WCAG Requirement: Reflow
Success Criterion 1.4.10 (Level AA): Content can be presented without loss of information or functionality, and without requiring scrolling in two dimensions (except for parts of the content which require two-dimensional layout for usage or meaning).
Code blocks often fall under the exception for "meaning," but you should still ensure the container has overflow-x: auto and is keyboard-focusable if it scrolls.
pre {
overflow-x: auto;
white-space: pre-wrap; /* Optional: forces wrapping */
}
Understand SC 1.4.10: Reflow
Best Practices
- Fixed-Width Fonts: Browsers use a monospace font by default. Ensure your custom CSS maintains this for legibility.
- Avoid for Tabular Data: Do not use
<pre>to create "fake" tables using spaces. Use the<table>element instead to maintain proper semantics. - Keyboard Access: If a code block is long enough to require scrolling, add
tabindex="0"to the<pre>tag so keyboard users can focus it and use arrow keys to scroll.