This document provides information about the Acquia Web Governance check:
Text is incorrectly aligned.
What
Text on a webpage should not be justified.
Note
Justified text aligns both the left and right edges of a text block, creating straight margins on both sides. This causes uneven spacing between words, which can make the text harder to read.
Why
Justified text can create significant barriers for users with visual or cognitive impairments. When text is justified, the spacing between words becomes uneven to ensure that both the left and right edges of the text align perfectly. These irregular gaps can make it difficult for readers to follow the text smoothly, as their eyes may struggle to identify consistent patterns between words.
For individuals with dyslexia or other reading disorders, inconsistent spacing can cause words to blend together or create "rivers" of white space that visually disrupt the flow of text. This makes reading more tiring and less efficient. Similarly, people with low vision who rely on screen magnification may find it challenging to navigate justified text, as the unpredictable word spacing interferes with their ability to scan lines easily.
Avoid justified text to ensure that content remains more readable and accessible for a wider range of users, to support a clear and consistent reading experience.
Who
This check affects the following users who have:
Cognitive disabilities: These users may find it challenging to read text with irregular spacing, as it can disrupt their reading flow and comprehension.
Low vision: These users rely on screen magnification and may struggle with inconsistent word spacing, which makes it difficult to track lines of text.
User story
Maria is a Norwegian carpenter with dyslexia. She loves working with her hands and takes pride in building things from the ground up. While she is confident on the construction site, reading complex instructions or new building regulations can be a real struggle. She uses text-to-speech software when needed, but prefers clear, simple text that she can read herself.
"When text on a website is stretched to both sides so the lines look all neat, it becomes impossible for me. There are weird gaps between the words, and it is like these white rivers running down the page. My eyes get lost, and I quickly lose track of where I am. It feels like the words are slipping away from me as I try to read. If the text was just lined up on the left, it would be so much easier to follow."
Examples
This section provides some examples of the issue.
Example: Difficult-to-read safety instructions on a website
A website displays safety instructions for how to use a jigsaw and presents the information in fully justified text. This formatting causes uneven spacing between words, which creates visible "rivers" of white space that run vertically through the paragraphs.
Important safety details become difficult to read due to the inconsistent spacing. The uneven gaps disrupt the natural flow of reading, making it harder for users to follow the instructions quickly and accurately.
Example: Easy-to-read safety instructions on a website
A website displaying safety instructions for using a jigsaw presents the information in left-aligned text. This formatting ensures consistent spacing between words, creating a clean and even appearance across the paragraphs.
Important safety details are easy to read due to the uniform spacing. The clear text layout supports the natural flow of reading, which makes it easier for users to follow the instructions quickly and accurately.
How
This section provides instructions on how to identify and fix the issue.
How to identify it
The Acquia Web Governance platform highlights elements that contain justified text.
How to fix it
The cause of the problem is that the CSS property text-align: justify; is applied to an element or the align="justify" attribute is used in the HTML code. Both methods cause the text to align evenly along both the left and right margins.
To fix the problem, update your website code to remove both methods. Ensure that the text-align: justify; CSS property is not used, and delete any align="justify" attributes from the HTML.
This document provides information about the Acquia Web Governance check:
Text is incorrectly aligned.
What
Text on a webpage should not be justified.
Note
Justified text aligns both the left and right edges of a text block, creating straight margins on both sides. This causes uneven spacing between words, which can make the text harder to read.
Why
Justified text can create significant barriers for users with visual or cognitive impairments. When text is justified, the spacing between words becomes uneven to ensure that both the left and right edges of the text align perfectly. These irregular gaps can make it difficult for readers to follow the text smoothly, as their eyes may struggle to identify consistent patterns between words.
For individuals with dyslexia or other reading disorders, inconsistent spacing can cause words to blend together or create "rivers" of white space that visually disrupt the flow of text. This makes reading more tiring and less efficient. Similarly, people with low vision who rely on screen magnification may find it challenging to navigate justified text, as the unpredictable word spacing interferes with their ability to scan lines easily.
Avoid justified text to ensure that content remains more readable and accessible for a wider range of users, to support a clear and consistent reading experience.
Who
This check affects the following users who have:
Cognitive disabilities: These users may find it challenging to read text with irregular spacing, as it can disrupt their reading flow and comprehension.
Low vision: These users rely on screen magnification and may struggle with inconsistent word spacing, which makes it difficult to track lines of text.
User story
Maria is a Norwegian carpenter with dyslexia. She loves working with her hands and takes pride in building things from the ground up. While she is confident on the construction site, reading complex instructions or new building regulations can be a real struggle. She uses text-to-speech software when needed, but prefers clear, simple text that she can read herself.
"When text on a website is stretched to both sides so the lines look all neat, it becomes impossible for me. There are weird gaps between the words, and it is like these white rivers running down the page. My eyes get lost, and I quickly lose track of where I am. It feels like the words are slipping away from me as I try to read. If the text was just lined up on the left, it would be so much easier to follow."
Examples
This section provides some examples of the issue.
Example: Difficult-to-read safety instructions on a website
A website displays safety instructions for how to use a jigsaw and presents the information in fully justified text. This formatting causes uneven spacing between words, which creates visible "rivers" of white space that run vertically through the paragraphs.
Important safety details become difficult to read due to the inconsistent spacing. The uneven gaps disrupt the natural flow of reading, making it harder for users to follow the instructions quickly and accurately.
Example: Easy-to-read safety instructions on a website
A website displaying safety instructions for using a jigsaw presents the information in left-aligned text. This formatting ensures consistent spacing between words, creating a clean and even appearance across the paragraphs.
Important safety details are easy to read due to the uniform spacing. The clear text layout supports the natural flow of reading, which makes it easier for users to follow the instructions quickly and accurately.
How
This section provides instructions on how to identify and fix the issue.
How to identify it
The Acquia Web Governance platform highlights elements that contain justified text.
How to fix it
The cause of the problem is that the CSS property text-align: justify; is applied to an element or the align="justify" attribute is used in the HTML code. Both methods cause the text to align evenly along both the left and right margins.
To fix the problem, update your website code to remove both methods. Ensure that the text-align: justify; CSS property is not used, and delete any align="justify" attributes from the HTML.
Web Governance