WCAG 1.4.12: Text Spacing

What This Rule Means

WCAG 1.4.12 Text Spacing belongs to Guideline 1.4 (Distinguishable) and targets a very specific problem: many people with reading disabilities, low vision, or cognitive impairments need to override the default text spacing of a web page to make content readable for them. If a site's layout breaks — text gets clipped, buttons overlap, form labels disappear, or content becomes unreachable — when spacing is increased, the site fails this criterion.

The criterion defines four spacing properties that must remain functional when set to the following minimum values simultaneously:

• Line height (line spacing): at least 1.5 times the font size of the element.
• Letter spacing (tracking): at least 0.12 times the font size of the element.
• Word spacing: at least 0.16 times the font size of the element.
• Spacing following paragraphs: at least 2 times the font size of the element.

A page passes this criterion if, after all four of these overrides are applied, users can still read all text, operate all interactive controls, and access all page content without horizontal scrolling at a 320 CSS pixel wide viewport, without clipping or truncation, and without content overlapping to the point of being unreadable or unusable.

A page fails if applying these overrides causes any of the following: text is cut off by a container with a fixed height and overflow: hidden; interactive labels or button text disappears; dropdown menus or tooltips overlap body content in an unusable way; or any content becomes permanently inaccessible.

Importantly, the criterion does not require you to set those spacing values yourself. It only requires that your layout does not break when the user (or their assistive technology, browser extension, or user stylesheet) applies those overrides. The spacing values are thresholds for testing, not design requirements.

There is one explicit exception: components where a particular visual presentation is essential to the information being conveyed — for example, a logotype, a musical score rendered in SVG, or a CAPTCHA image — are exempt. However, this exception is narrow and should not be used as a blanket excuse to exempt navigation menus or card components.

This criterion applies to all text content rendered in the browser using CSS, including headings, paragraphs, labels, button text, placeholder text, list items, table cells, and navigation links. It does not apply to text rendered inside images or canvas elements, since those are not affected by CSS spacing overrides.

Why It Matters

Text spacing directly affects people across a wide range of disabilities and reading profiles. According to the World Health Organization, approximately 2.2 billion people globally have some form of vision impairment or blindness, and many of them use browser zoom or custom stylesheets to make content readable. Beyond vision impairment, an estimated 15–20% of the global population has dyslexia, a condition for which increased letter spacing, word spacing, and line height are proven readability interventions — supported by research including studies published in the journal Annals of Dyslexia.

For users with cognitive disabilities such as ADHD or processing difficulties, tight text spacing increases the cognitive load of reading by making it harder to track lines and distinguish individual words. These users frequently install browser extensions like the Readability Bookmarklet, Stylus, or platform-level accessibility settings that apply custom spacing to all websites they visit.

Consider a concrete scenario: a university student with dyslexia visits a Turkish e-commerce platform to check a product return policy before an exam. She uses a browser extension that sets line height to 1.7 and letter spacing to 0.14em globally. On the product detail page, the return policy text sits inside a fixed-height <div> styled with height: 120px; overflow: hidden;. With her custom spacing active, only the first two lines are visible and there is no mechanism to reveal the rest. She cannot complete her task and loses trust in the platform. This is precisely the failure WCAG 1.4.12 is designed to prevent.

Beyond disability access, there are secondary benefits. Flexible, spacing-resilient layouts tend to be more robust across international markets — Turkish text, for example, often contains longer word forms due to agglutinative morphology, and layouts that cannot accommodate spacing variation also tend to break with longer strings. Accessible layouts also improve SEO indirectly: content that is readable and accessible tends to have lower bounce rates and better engagement signals, which search engines factor into rankings.

Related Axe-core Rules

WCAG 1.4.12 requires manual testing and cannot be fully verified by automated tools alone. This is because automated engines cannot predict how a layout will behave under user-applied style overrides without actually applying those overrides and measuring the rendered result — a process that requires visual inspection or a headless rendering comparison. The axe-core engine does not include a dedicated automated rule for 1.4.12 for this reason.

• Manual testing with the Text Spacing Bookmarklet: The recommended testing approach is the Text Spacing Bookmarklet created by Steve Faulkner (now maintained by the accessibility community). This bookmarklet injects a stylesheet into the current page that sets all four spacing properties to their minimum threshold values simultaneously. The tester then visually (or with a screen reader) checks whether any content is clipped, overlapping, or inaccessible. The bookmarklet approach is the standard referenced in the W3C's own Understanding document for 1.4.12.
• Why automation falls short: Automated scanners such as axe-core analyze the DOM and computed styles as they exist at scan time. They do not simulate user stylesheet overrides or re-render the page to detect layout overflow or clipping caused by those overrides. A container with overflow: hidden and a fixed height will pass an automated scan because, in isolation, it is not an accessibility error — it only becomes one when spacing is increased. Only by applying the override and observing the result can a tester confirm a failure.
• Supplementary automated checks: While no axe rule maps directly to 1.4.12, reviewers should also note that axe's scrollable-region-focusable rule and color-contrast rules can surface related issues that contribute to a poor text-spacing experience. Additionally, Lighthouse's accessibility audit may flag fixed-size containers in certain contexts, though not specifically for spacing compliance.

How to Test

1. Install the Text Spacing Bookmarklet. Navigate to the Steve Faulkner Text Spacing Bookmarklet page (accessible via the W3C Understanding document or a web search for "text spacing bookmarklet WCAG"). Drag the bookmarklet to your browser's bookmarks bar. Alternatively, create a bookmark manually and paste the bookmarklet JavaScript as the URL.
2. Open the page under test in your browser at its default zoom level (100%). Navigate to the page or component you want to evaluate — for example, a product listing page, a checkout form, or a navigation menu.
3. Activate the bookmarklet. Click the bookmarklet. This injects CSS that sets line-height: 1.5 !important, letter-spacing: 0.12em !important, word-spacing: 0.16em !important, and p margin-bottom to 2em !important across the page.
4. Visually inspect the entire page. Scroll through all content areas. Look for: text that is cut off at the bottom of a container; button labels or link text that has disappeared or is partially hidden; navigation menus or dropdowns where items overlap; form fields where placeholder or label text is clipped; and modal dialogs or tooltips where content overflows the container boundary.
5. Interact with interactive elements. Tab through all focusable elements, activate dropdowns, open modals, and submit forms. Confirm that all interactive controls remain operable and that their visible labels are fully readable with the spacing applied.
6. Test with a screen reader for functional loss. With the bookmarklet still active, use NVDA with Firefox or JAWS with Chrome to navigate the page by headings, landmarks, and interactive elements. Confirm that the reading order and announced content match what a sighted user sees. Use VoiceOver on Safari on macOS or iOS for Apple platform coverage.
7. Test at 320px viewport width. Resize your browser window to 320 CSS pixels wide (or use browser DevTools responsive mode). Reactivate the bookmarklet. Confirm that content is still accessible without horizontal scrolling and that text is not clipped at small viewport widths combined with increased spacing.
8. Document failures. For each failure, record: the element type, its CSS class or ID, the specific spacing property that causes the failure, and a screenshot before and after bookmarklet activation.

How to Fix

Fixed-height container clipping text — Incorrect

<!-- Failure: fixed height with overflow:hidden clips text when line-height increases -->
<div class='product-description' style='height: 80px; overflow: hidden;'>
  <p>Bu ürün doğal malzemelerden üretilmiştir ve 2 yıl garanti kapsamındadır.</p>
</div>

Fixed-height container clipping text — Correct

<!-- Fix: use min-height instead of height, and allow overflow to be visible or auto -->
<div class='product-description' style='min-height: 80px; overflow: visible;'>
  <p>Bu ürün doğal malzemelerden üretilmiştir ve 2 yıl garanti kapsamındadır.</p>
</div>
<!-- If you need to truncate for design reasons, use a "Read more" button pattern
     that expands the content rather than hiding it with overflow:hidden -->

Button label clipped by fixed button height — Incorrect

<!-- Failure: fixed height on button causes label text to be cut off
     when letter-spacing and line-height are increased -->
<button style='height: 36px; overflow: hidden; white-space: nowrap;'>
  Sepete Ekle
</button>

Button label clipped by fixed button height — Correct

<!-- Fix: use min-height and padding instead of fixed height.
     padding ensures the button grows with its content. -->
<button style='min-height: 36px; padding: 8px 16px;'>
  Sepete Ekle
</button>

Tooltip or dropdown overflowing with no scroll — Incorrect

<!-- Failure: tooltip has a max-height and overflow:hidden,
     causing content to be cut off when spacing is increased -->
<div role='tooltip' id='info-tip' style='max-height: 60px; overflow: hidden;'>
  Bu alan zorunludur. Lütfen geçerli bir e-posta adresi giriniz.
</div>

Tooltip or dropdown overflowing with no scroll — Correct

<!-- Fix: remove the max-height restriction or use overflow:auto
     so content remains accessible when spacing is overridden -->
<div role='tooltip' id='info-tip' style='max-width: 280px; overflow: auto;'>
  Bu alan zorunludur. Lütfen geçerli bir e-posta adresi giriniz.
</div>

Paragraph spacing breaking card layout — Incorrect

<!-- Failure: card uses absolute positioning and a fixed container height.
     When paragraph margin-bottom is set to 2em by the user,
     text overflows and overlaps the card footer. -->
<div class='card' style='position: relative; height: 200px; overflow: hidden;'>
  <p>Ürün açıklaması burada yer alır ve birden fazla satır içerebilir.</p>
  <div class='card-footer' style='position: absolute; bottom: 0;'>
    <a href='/urun/detay'>Detayları Gör</a>
  </div>
</div>

Paragraph spacing breaking card layout — Correct

<!-- Fix: use flexbox or grid with a natural document flow.
     The footer follows the content instead of being absolutely positioned.
     min-height allows the card to grow with its content. -->
<div class='card' style='display: flex; flex-direction: column; min-height: 200px;'>
  <p style='flex: 1;'>Ürün açıklaması burada yer alır ve birden fazla satır içerebilir.</p>
  <div class='card-footer'>
    <a href='/urun/detay'>Detayları Gör</a>
  </div>
</div>

Common Mistakes

• Using height instead of min-height on text containers. A fixed height on any element containing text will cause clipping as soon as the user increases line height or letter spacing. Replace all fixed heights on text-bearing containers with min-height so the container can grow.
• Setting overflow: hidden on containers that hold paragraph text. This is the single most common cause of 1.4.12 failures. Hidden overflow clips text that expands vertically when spacing increases. Use overflow: visible or overflow: auto depending on the design context.
• Using white-space: nowrap on button or link labels without adequate container flexibility. When letter spacing increases, nowrap text may overflow its parent or be clipped, especially in fixed-width navigation items.
• Absolutely positioning footer or action elements inside a fixed-height card. When the card content grows due to spacing overrides, absolutely positioned elements at the bottom of the card overlap the text. Use flexbox column layout instead.
• Applying max-height with overflow: hidden to collapsible sections that are in their expanded state. Animated accordions that expand to a calculated max-height value based on pixel measurements will clip text at that pixel boundary when spacing is overridden, even when fully open.
• Using CSS line-clamp (webkit-line-clamp) without a visible mechanism to expand the full content. Clamping text to a fixed number of lines is acceptable only if there is a clearly labelled, keyboard-accessible control to reveal the full content. Clamping without any expansion mechanism fails 1.4.12.
• Relying on JavaScript to dynamically set element heights in pixels. Scripts that measure element heights and then hard-code those pixel values as inline styles will lock the container to a size that ignores user spacing overrides. Use intrinsic sizing and let CSS handle the layout.
• Assuming automated accessibility scans will catch all 1.4.12 failures. Teams that rely exclusively on axe or Lighthouse without running the Text Spacing Bookmarklet will miss all layout-based spacing failures. Manual testing with the bookmarklet is mandatory for this criterion.
• Not testing navigation menus and mega-menus with the bookmarklet. Navigation components are frequently built with fixed pixel heights and overflow hidden to create a polished visual result. They are also among the most commonly failing components for 1.4.12 because increased spacing causes menu items to wrap and be cut off.
• Treating the spacing values as design requirements rather than test thresholds. Some teams respond to 1.4.12 by updating their default styles to match the threshold values, which is unnecessary and may conflict with the designer's intent. The criterion only requires that the layout does not break when those values are applied — not that they be the default.

Relation to Turkey's Accessibility Regulations

WCAG 1.4.12 Text Spacing is directly relevant to Turkey's emerging legal accessibility framework. The most significant recent development is Presidential Circular 2025/10, published in the Official Gazette No. 32933 on June 21, 2025. This circular establishes binding obligations for a wide range of organizations to ensure digital accessibility across their web presence and mobile applications.

The circular covers a broad set of entity types. Public institutions and agencies at all levels of government are required to comply. Private sector entities within scope include e-commerce platforms, banks and financial institutions, hospitals and healthcare providers, telecommunications companies with 200,000 or more subscribers, travel agencies, private transport companies, and private schools authorized by the Ministry of National Education (MoNE). These organizations are required to meet Level AA conformance with WCAG, which includes 1.4.12, as part of their obligations under the circular.

Compliance at Level AA is also a prerequisite for obtaining the Accessibility Logo (Erişilebilirlik Logosu) issued by the Ministry of Family and Social Services (Aile ve Sosyal Hizmetler Bakanlığı). This logo signals to users, particularly those with disabilities, that a digital product has been audited and meets the required accessibility standard. For organizations that serve the Turkish disability community — estimated at several million people, including those with visual, cognitive, and reading impairments — the logo carries both reputational and regulatory weight.

In practical terms, a Turkish e-commerce platform that uses fixed-height product description containers with overflow: hidden, or a government portal whose navigation menu clips when a user applies spacing overrides through a browser extension or operating system accessibility setting, is not only failing its users — it is potentially non-compliant with the obligations established under the 2025/10 circular. Text Spacing failures are particularly relevant to Turkish users with dyslexia and low vision who rely on custom spacing tools, and to users who access government or commercial services on mobile devices where operating system text size settings can also trigger layout instability similar to spacing overrides.

Organizations seeking the Erişilebilirlik Logosu should include a manual text spacing audit using the Text Spacing Bookmarklet as a required step in their accessibility audit process, alongside automated scanning and screen reader testing. Remediating 1.4.12 failures — primarily by replacing fixed heights with min-height, removing unnecessary overflow: hidden from text containers, and adopting flexible CSS layout techniques — is generally achievable without significant design changes and represents a high-value, low-cost improvement to the accessibility of any Turkish digital service.