1.3.2 Meaningful Sequence
Introduction¶
This document provides information about the related Acquia Optimize checks:
- Using white space characters to control spacing within a word.
White space characters such as spaces, tabs, line breaks, or carriage returns must not be used to visually format individual words.
When you use white space characters like spaces, tabs, line breaks, or carriage returns to visually format individual words, it can harm accessibility. This practice can create challenges for users who rely on screen readers or other assistive technologies, as these tools interpret white space differently than visual users. Instead of seeing a well-formatted word, users may hear unnatural pauses or broken speech, which makes the content hard to understand. Additionally, this method can cause layout issues on different devices.
This check affects the following users who have:
Visual impairments: Who access the site contents with a screen reader or screen magnification software.
This section gives some examples of the issue.
Example: Heading formatted with the space character¶
In the example, a song title is formatted with spaces between each letter. This means that screen readers, which are often used by people who are blind, will not read the title as words but as a sequence of letters in quick succession. This makes it difficult to understand the meaning.
<h1>B a c k I n B l a c k</h1>
<p>Back in black, I hit the sack</p>
<p>I've been too long, I'm glad to be back</p>
<p>Yes, I'm let loose from the noose</p>
Example: Heading formatted with CSS¶
In the example, a visual effect of spacing between the letters is achieved once again. However, because this effect is created with CSS letter-spacing, it does not interfere with the correct reading by screen readers.
<h1 style="letter-spacing: 1em;">Back in Black</h1>
<p>Back in black, I hit the sack</p>
<p>I've been too long, I'm glad to be back</p>
<p>Yes, I'm let loose from the noose</p>
The Acquia Optimize platform highlights elements that contain text nodes that are formatted with whitespace characters. To resolve this issue, you should adjust your content to avoid whitespace characters for visual formatting. Instead, you can use CSS as illustrated in the “Examples” section above.