Loading...
Loading content...
Loading content...
Content must adapt to increased text spacing without breaking.
Why it matters: Users with dyslexia often increase text spacing to improve readability.
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: (Level AA) 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.
What This Means: This success criterion requires that content must remain functional and readable when users apply increased text spacing. Specifically, content must work when line height is set to 1.5x font size, paragraph spacing is 2x font size, letter spacing is 0.12x font size, and word spacing is 0.16x font size. Content should not be cut off, hidden, or become unusable with these spacing adjustments.
Why It's Important: Users with dyslexia and reading disabilities often benefit from increased spacing between letters, words, lines, and paragraphs. This spacing helps reduce visual crowding and makes text easier to read. If content breaks or becomes unusable when spacing is increased, these users cannot access the content effectively.
Design layouts that are flexible and can accommodate increased spacing. Avoid fixed-height containers that cut off content. Use min-height instead of height. Ensure text containers can expand vertically. Test by applying the specified spacing values and verifying that all content remains accessible and functional. Avoid using overflow: hidden on text containers.
This criterion ensures that users with dyslexia can access and understand the content, improving their overall experience and ability to use the website effectively.
This criterion ensures that users with low vision can access and understand the content, improving their overall experience and ability to use the website effectively.
Impact: When this criterion is properly implemented, it removes barriers for these user groups and creates a more inclusive web experience for everyone.
Text in a fixed-height container gets cut off when spacing is increased.
<div style="height: 200px; overflow: hidden;">
<p>Text that gets cut off with increased spacing...</p>
</div>Text container adapts to increased spacing without cutting off content.
<div style="min-height: 200px;">
<p>Text that adapts to increased spacing...</p>
</div>This success criterion benefits the following user groups:
Tip: Use this checklist during development and testing to ensure all requirements for 1.4.12 Text Spacing are met. Check off items as you complete them.
Note: These are official W3C resources for 1.4.12. For the most up-to-date information and detailed technical guidance, always refer to the official W3C documentation.
Implementing 1.4.12 Text Spacing correctly requires understanding your specific context. Code solutions vary significantly based on multiple factors:
HTML, React, Vue, Angular, PHP, Python, and other frameworks each have different patterns and best practices.
Server-side rendering, client-side rendering, static generation, and hybrid approaches require different solutions.
Your existing components, styling approach, and UI library influence how accessibility must be implemented.
Your specific user base, content type, and interaction patterns determine the most appropriate implementation.
We provide tailored implementation guidance by analyzing your specific technology stack, coding patterns, design system, and project requirements. Our team reviews your codebase and provides custom solutions that integrate seamlessly with your existing architecture.
Get Custom Implementation HelpPart of
Perceivable PrincipleGuideline
1.4 Distinguishable