Contrary to popular belief, the Web Content Accessibility Guidelines (WCAG) doesn’t have strict requirements for typeface, font size, or text spacing. As a content author, you’re required to make your text readable — and make sure that nothing breaks when users change the default presentation.
That’s especially relevant when testing your content against WCAG Success Criterion (SC) 1.4.12, “Text Spacing.” Here’s the full text of that criterion:
In content implemented using markup languages that support the following text style properties, no loss of content or functionality occurs by setting all of the following and by changing no other style property:
- Line height (line spacing) to at least 1.5 times the font size;
- Spacing following 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.
That’s quite a bit of explanation for a fairly simple concept: If your users ignore your website’s CSS and adjust the spacing of the text to make it easier to read, they shouldn’t lose access to any of the content.
Of course, the specifics matter. Here are some tips for making sure that your website meets WCAG SC 1.4.12.
Think about how text spacing impacts your users
With any accessibility issue, it’s important to understand the “why" before focusing on the “how.”
Text spacing is part of a WCAG because it’s important for real-life users. People might want to change the visual presentation of your website for various reasons:
- People with low vision might need more space around words, sentences, and letters to read comfortably.
- People with dyslexia might change the font and text spacing to improve readability.
- People with attention disorders might change text spacing to make reading less frustrating or distracting.
WCAG SC 1.4.12 ensures that when people make changes, all of the text on the web page remains readable. All of the user interface elements still work, and everything appears in a logical order.
Once again, WCAG does not set specific requirements for text spacing. You simply need to ensure that your website works when the text spacing changes.
Related: Will Digital Accessibility Make My Website Ugly?
Responsive design is accessible design
Most failures of WCAG SC 1.4.12 occur when developers ignore the principles of responsive design. For example:
- Content may have an absolute position.
- Borders may not be large enough for the content with the specified text spacings.
- The overflow property of the enclosed element may be set to hidden.
If your layout uses elements with relative positions, you’re less likely to run into issues. Your content is also much more likely to meet WCAG’s requirements for reflow (which essentially means that the layout is responsive to the user’s viewport).
Find a reliable way to test your content with different text spacing settings
You can apply WCAG’s text spacing maximums with various developer tools to check your content for potential issues. Popular options include Stylus, which is available as an extension for Chrome and as an extension for Firefox.
As you review your content, ask questions:
- Does any text “clip" or become less readable as a result of the new spacing?
- Does any text overlap with other text or with user interface elements?
- If so, could the problem be fixed by using static or relative positioning?
While you’re checking conformance, you should also resize your web page to 200% and make sure that everything works.
Learn more: Give Yourself an Accessibility Test: Zoom Your Page to 200%.
Get help with WCAG conformance
At the Bureau of Internet Accessibility and AudioEye, our goal is to help you achieve, maintain, and prove digital compliance. Whether you need help with a specific accessibility issue or you’re ready to build a sustainable, long-term strategy, we’re ready to assist.
Talk to us to learn more or get started with a free and confidential website accessibility scan.
