This document provides information about the Web Governance automated accessibility checks:
Inline style sets letter spacing too tight Inline !important styles restrict the letter spacing to less than 0.12 times the font size. This prevents users from changing the text spacing. Persons with low vision, dyslexia, or cognitive disabilities often use custom browser styles to increase the space between letters. Small letter spacing makes text difficult to read.
Inline style sets line height too low Inline !important styles restrict the line height to less than 1.5 times the font size. This prevents users from changing the line spacing. Persons with reading difficulties often need more space between lines. Small line heights cause lines of text to overlap. This makes the text difficult to read.
Inline style sets word spacing too tight Inline !important styles restrict the word spacing to less than 0.16 times the font size. This prevents users from changing the word spacing. Persons with reading difficulties often need more space between words. Small word spacing makes text difficult to read.
What
Users must be able to change the spacing of text, lines, words, and paragraphs. They must not lose content or website functions.
Your website does not need built-in controls for text spacing. But, your website visitors can use browser settings, extensions, custom stylesheets, or assistive technologies to increase spacing. When users change the spacing, all content must stay visible, easy to read, and fully usable.
Why
More text spacing helps many people. This includes persons with low vision, dyslexia, or other reading difficulties. More space between letters, words, lines, and paragraphs can increase reading speed and make content easier to understand. When users increase the text spacing, the layout must adapt. The text must not overlap, hide, or stop functions.
Who
This check helps users with:
Visual impairments: More spacing makes text easier to read and decreases visual strain.
Reading and learning disabilities: More spacing makes text easier to understand.
Cognitive disabilities: Clear text helps users keep focus and navigate the content.
User story
Alex is a graphic designer. He has dyslexia. He reviews websites for clients to check branding and accessibility.
"When I am reviewing website content, I often increase text spacing to make reading easier. Most websites work well, but sometimes headings overlap, buttons become difficult to use, or text gets cut off. When that happens, I spend more time trying to understand the content instead of focusing on my work. Websites that adapt properly help me work more efficiently and ensure I can access the same information as everyone else."
Examples
This section shows how text spacing adjustments can change content.
Example 1: Good practice. A news article is fully readable after you increase the text spacing. The headings, body text, navigation menus, and buttons adapt to the new spacing. There are no visual or functional problems.
Example 2: Hidden content. A product page has the heading "How to Brew the Perfect Espresso". You increase the text spacing. Another element hides part of the heading. The content is difficult to read.
Example 3: Overlapping content. A blog article has a heading. You increase the text spacing. The heading overlaps the paragraph below it. You cannot read or understand the content.
How
Web Governance highlights the incorrect HTML snippets. Follow these instructions to correct the errors:
Inline style restricts letter spacing
Do one of these actions:
Remove the !important rule from the inline letter-spacing style.
Set the value to a minimum of 0.12 times the font size (for example, letter-spacing: 0.12em !important;).
Note
The best practice is to put styles in an external CSS file. Do not use the !important rule.
Inline style restricts line height
Do one of these actions:
Remove the !!important rule from the inline line-height style.
Set the value to a minimum of 1.5 times the font size (for example, line-height: 1.5 !important;).
Note: Use stylesheet classes to control the layout. Do not restrict the line height.
Inline style restricts word spacing
Do one of these actions:
Remove the !important rule from the inline word-spacing style.
Set the value to a minimum of 0.16 times the font size (for example, word-spacing: 0.16em !important;).
Note
Remove inline !important rules. This lets user stylesheets apply custom spacing.
Competencies needed
These competencies are needed to fix text spacing issues:
Front-end Developers: Apply structural and CSS changes to prevent text that overlaps, text that is cut off, and layout problems.
UX and Visual Designers: Specify responsive behaviors. Make sure that layouts stay usable when text spacing increases.
This document provides information about the Web Governance automated accessibility checks:
Inline style sets letter spacing too tight Inline !important styles restrict the letter spacing to less than 0.12 times the font size. This prevents users from changing the text spacing. Persons with low vision, dyslexia, or cognitive disabilities often use custom browser styles to increase the space between letters. Small letter spacing makes text difficult to read.
Inline style sets line height too low Inline !important styles restrict the line height to less than 1.5 times the font size. This prevents users from changing the line spacing. Persons with reading difficulties often need more space between lines. Small line heights cause lines of text to overlap. This makes the text difficult to read.
Inline style sets word spacing too tight Inline !important styles restrict the word spacing to less than 0.16 times the font size. This prevents users from changing the word spacing. Persons with reading difficulties often need more space between words. Small word spacing makes text difficult to read.
What
Users must be able to change the spacing of text, lines, words, and paragraphs. They must not lose content or website functions.
Your website does not need built-in controls for text spacing. But, your website visitors can use browser settings, extensions, custom stylesheets, or assistive technologies to increase spacing. When users change the spacing, all content must stay visible, easy to read, and fully usable.
Why
More text spacing helps many people. This includes persons with low vision, dyslexia, or other reading difficulties. More space between letters, words, lines, and paragraphs can increase reading speed and make content easier to understand. When users increase the text spacing, the layout must adapt. The text must not overlap, hide, or stop functions.
Who
This check helps users with:
Visual impairments: More spacing makes text easier to read and decreases visual strain.
Reading and learning disabilities: More spacing makes text easier to understand.
Cognitive disabilities: Clear text helps users keep focus and navigate the content.
User story
Alex is a graphic designer. He has dyslexia. He reviews websites for clients to check branding and accessibility.
"When I am reviewing website content, I often increase text spacing to make reading easier. Most websites work well, but sometimes headings overlap, buttons become difficult to use, or text gets cut off. When that happens, I spend more time trying to understand the content instead of focusing on my work. Websites that adapt properly help me work more efficiently and ensure I can access the same information as everyone else."
Examples
This section shows how text spacing adjustments can change content.
Example 1: Good practice. A news article is fully readable after you increase the text spacing. The headings, body text, navigation menus, and buttons adapt to the new spacing. There are no visual or functional problems.
Example 2: Hidden content. A product page has the heading "How to Brew the Perfect Espresso". You increase the text spacing. Another element hides part of the heading. The content is difficult to read.
Example 3: Overlapping content. A blog article has a heading. You increase the text spacing. The heading overlaps the paragraph below it. You cannot read or understand the content.
How
Web Governance highlights the incorrect HTML snippets. Follow these instructions to correct the errors:
Inline style restricts letter spacing
Do one of these actions:
Remove the !important rule from the inline letter-spacing style.
Set the value to a minimum of 0.12 times the font size (for example, letter-spacing: 0.12em !important;).
Note
The best practice is to put styles in an external CSS file. Do not use the !important rule.
Inline style restricts line height
Do one of these actions:
Remove the !!important rule from the inline line-height style.
Set the value to a minimum of 1.5 times the font size (for example, line-height: 1.5 !important;).
Note: Use stylesheet classes to control the layout. Do not restrict the line height.
Inline style restricts word spacing
Do one of these actions:
Remove the !important rule from the inline word-spacing style.
Set the value to a minimum of 0.16 times the font size (for example, word-spacing: 0.16em !important;).
Note
Remove inline !important rules. This lets user stylesheets apply custom spacing.
Competencies needed
These competencies are needed to fix text spacing issues:
Front-end Developers: Apply structural and CSS changes to prevent text that overlaps, text that is cut off, and layout problems.
UX and Visual Designers: Specify responsive behaviors. Make sure that layouts stay usable when text spacing increases.
Web Governance