Text Spacing
No loss of content or functionality occurs when users set line height to at least 1.5 times the font size, letter spacing to at least 0.12 times the font size, word spacing to at least 0.16 times the font size, and space after paragraphs to at least 2 times the font size.
What it means
The intent of this success criterion (SC) is to ensure that when people override author-specified text spacing to improve their reading experience, content is still readable and operable. Each of the requirements stipulated in the SC's four bullets helps ensure text styling can be adapted by the user to suit their needs. The metrics set a target for a minimum for text spacing that must be met. Starting from the author's presentation, changing these four style properties to the specified values should not result in a loss of content or functionality. This SC focuses on the adaptability of content to a change in spacing between lines, words, letters, and paragraphs. Any combination of these may assist a user with effectively reading text. As well, ensuring that content correctly adapts when users override author settings for spacing also significantly increases the likelihood other style preferences can be set by the user. For example, a user may need to change to a wider font family than the author has set in order to effectively read text. This SC does not dictate that authors must set all their content to the specified metrics, or provide a mechanism to do so. Rather, it specifies that an author's content has the ability to be set to those metrics without loss of content or functionality. The author requirement is both to not interfere with a user's ability to override the author settings, and to ensure that content thus modified does not break content in the manners shown in figures 1 through 3 in Effects of Not Allowing for Spacing Override . The values in the SC are a baseline. Authors are encouraged to allow spacing to surpass the values specified, not see them as a ceiling.
Failing example
/* Fails: fixed-height container clips text when spacing increases */
.excerpt {
height: 48px;
overflow: hidden;
line-height: 1.2;
}How to fix it
/* Pass: allow container to grow with text spacing overrides */
.excerpt {
min-height: 48px; /* min, not fixed */
overflow: visible;
line-height: 1.5; /* already at baseline */
}How A11yRisk detects this
A11yRisk detects this criterion automatically.
Scan your site for this violation →