On each web page, can text spacing properties be redefined by the user without loss of content or functionality (except in special cases)?
A dyslexic user opens your page and applies their custom stylesheet: line height 1.5, wider letter spacing, spaced-out words. If your CSS has locked container heights with pixel height, text overflows or disappears. Content vanishes without you noticing during development.
This criterion requires that four RGAA spacing properties be redefinable without breaking: line height (line-height), paragraph spacing (margin-bottom on <p>), letter spacing, and word spacing. When a user modifies them, no text should be truncated, hidden, or overlap another element.
Reference values to test are: line-height: 1.5, margin-bottom: 2em on <p>, letter-spacing: 0.12em and word-spacing: 0.16em on all elements. The official WCAG 1.4.12 bookmarklet applies these four values in one click on the current page.
The fix usually takes one word: replace height with min-height on your text containers. The rest follows.
Un test to ensure that text spacing can be increased without loss
Customizable text spacing
- Apply the following style modifications across the entire page (via the WCAG 1.4.12 bookmarklet or directly in DevTools):
line-height: 1.5on all elementsmargin-bottom: 2emon all<p>letter-spacing: 0.12emon all elementsword-spacing: 0.16emon all elements
- Visually browse each text passage on the page.
- Verify that no text is truncated, hidden, or overlapping with other content.
- Ignore out-of-scope elements: subtitles embedded in a video, text images, text in a
<canvas>. - If all passages remain readable and complete, the test is validated.
Examples
❌ Non-compliant : Fixed-height container — text truncated after spacing
<style>
.card-description {
height: 80px;
overflow: hidden;
font-size: 16px;
}
</style>
<div class="card-description">
<p>Discover our complete range of digital accessibility training, recognized by professional organizations in the sector.</p>
</div>With fixed height: 80px and overflow: hidden, as soon as the user applies line-height: 1.5 and letter-spacing: 0.12em, text expands vertically and the excess portion is hidden. A portion of content disappears without any visual warning.
✅ Compliant : Flexible container — text always visible after spacing
<style>
.card-description {
min-height: 80px;
font-size: 16px;
}
</style>
<div class="card-description">
<p>Discover our complete range of digital accessibility training, recognized by professional organizations in the sector.</p>
</div>min-height replaces height: the container measures at least 80px, but can grow if text needs it. When the user increases spacing, content expands downward and remains fully visible.
Tips and pitfalls
⚠️ Buttons with fixed width often go unnoticed in audits
A button with width: 120px and short text seems harmless. With letter-spacing: 0.12em and word-spacing: 0.16em, text overflows outside the button or gets truncated. Systematically test interactive elements — buttons, tabs, navigation links — not just editorial content blocks.
⚠️ CSS ellipsis is not always non-compliance
Text already truncated at origin with text-overflow: ellipsis may be compliant if a mechanism reveals the full content: reveal on focus, on activation, or link to a detail page. Non-compliance arises when text was not truncated initially and becomes so after applying spacing, with no escape route for the user.
💡 Replacing height with min-height fixes most cases
This is the most common technical error in audits: height in pixels on text containers. Replace every occurrence with min-height in your layout styles. The container can then grow according to content, regardless of customization applied by the user.
⚠️ Three types of text content are out of scope
Subtitles directly embedded in the video stream (encoded in the video, not from a <track> tag), text images (text rendered as bitmap image), and text displayed via <canvas> are not covered by this criterion. These contents do not respond to CSS styles defined by the user.
⚠️ !important on spacing properties blocks customizations
If your CSS declares line-height: 1.2 !important on the <body> or main wrapper, no user stylesheet will be able to override it. Check for the absence of !important on line-height, letter-spacing, word-spacing, and margin in your base styles — this is a source of non-compliance invisible during standard visual review.
Frequently asked questions
How to test criterion 10.12 quickly without manually writing CSS?
Use the WCAG 1.4.12 bookmarklet from the GitHub project (alastc/adaptation-scripts/text-adaptation.js). It applies the four spacing values in one click on the current page. Alternative: in DevTools, create a * rule and paste the four properties into it. Then visually browse each text area.
What impact does text-overflow: ellipsis have on compliance with RGAA criterion 10.12?
None. If text was already truncated before applying spacing and a mechanism provides access to full content (on the same page or via a link), the criterion may be compliant. Non-compliance appears only when text was not truncated originally and becomes so after spacing, with no revelation mechanism.
How does criterion 10.12 apply to form fields <input> and <textarea>?
Yes. Fields contain text visible to the user and fall within the scope of the criterion. An <input> with fixed width whose entered text overflows visually after applying spacing constitutes a loss of functionality under criterion 10.12.
How does criterion 10.12 cover third-party components like carousels, modals, and widgets?
Yes. As soon as text is part of visible page content, it falls within scope, regardless of technical origin. If a third-party component blocks CSS customizations, it constitutes non-compliance with 10.12. Report it to the vendor or replace it with a compliant alternative.
What is the difference between line-height: 1.5 unitless and line-height: 1.5em in RGAA?
For testing, apply the value 1.5 unitless — it is a value relative to the font size of each element. This is the notation recommended by WCAG to ensure line height adapts proportionally to all font sizes present on the page.