Web Governance
Are users able to use the fonts, spacing, and font size of their choice, without loss of content?
1.4.12 Text Spacing
This document provides information about the Acquia Web Governance accessibility check:
Are users able to use the fonts, spacing, and font size of their choice, without loss of content?
Users must be able to modify the spacing of text, lines, and paragraphs, and must be able to read and interact with all of the content after the modifications.
Your website does not need to provide the functionality to modify text properties, however if the user wishes to use their own tools to adjust text properties for better readability, your content must not hinder the user.
Users with low vision, dyslexia, and other cognitive disabilities benefit from the ability to adjust the spacing between lines, words and letters. Increase the spacing between these elements to make it easier for such users to read and comprehend the content.
Certain users may use personalized style sheets or other tools to modify text properties for enhanced legibility. These users are more likely to effectively access your content if it adapts to these adjustments in text properties.
Sight impairments: Who can see and read the text better when there is extra spacing.
Reading difficulties: Who can read faster when space is added between words or lines.
Alex is a dyslexic individual in his mid-20s.
He has completed a degree in graphic design and works as a freelancer, taking up projects from various clients. Alex is highly creative and has a keen eye for design, but he faces certain challenges related to his dyslexia while working online.
"I find it challenging when I'm reviewing a customer's website text and it doesn't adapt well. It makes it difficult for me to understand the text and do my job in the best possible way. I strive to provide exceptional design work, but without clear and accessible text, it becomes a struggle to fully grasp the message and convey it effectively through my designs."
This section provides some examples of the issue.
A website article with extra spacing for improved readability.
A website article where the heading of the article “How to make the perfect espresso” is cut off, as it is hidden behind the background of the body text.
A website article where the heading of the article “How to make the perfect espresso” overlaps with the body text, making it very difficult to read.
This section provides information about how to review and fix the issue.
Check that your page adapts well to changes in 4 specific text style properties. The four changes are:
Line height (line spacing) to at least 1.5 times the font size.
Spacing after paragraphs to at least 2 times the font size.
Letter spacing (tracking) to at least 0.12 times the font size.
Word spacing to at least 0.16 times the font size.
Tip! You can use the tool Text Spacing Bookmarklet, which modifies the four text properties for your page, so you can easily review the changes to ensure the expected result.
The Text Spacing bookmarklet is a simple tool you can save as a bookmark in your browser.
Add the Text Spacing Bookmarklet to your browser. Find instructions for the Text Spacing Bookmarklet here.
Go to the page you want to review and click the bookmark for the “Text Spacing Bookmarklet” in your browsers bookmark menu. This will adjust the text styling properties for your page. Review that:
You get more spacing between letters, words, lines, and after paragraphs.
You do not get overlapping content or other issues that cause loss of functionality or content.
Click the bookmark again to toggle the text style adjustments off.
When the text exceeds the available space, it is common to replace the excess text with three dots (ellipsis). This practice is acceptable as long as there is a way for the user to reveal the full text, such as the ability to change the focus to or activate the element.
To fix issues it is recommended to:
Make a design decision for how the layout will adapt.
Follow principles of responsive design
Use the CSS unit “rem” for text sizes.
Avoid fixed sizing of container elements.
Front-end Development: To fix the issues.
Visual Design: To decide how layout adapts to changes.
This section contains useful resources for this subject.
If this content did not answer your questions, try searching or contacting our support team for further assistance.
If this content did not answer your questions, try searching or contacting our support team for further assistance.
Web Governance