F104: When Fixed Heights Swallow Your Content

Automated tools will miss F104 (opens in new window) almost every time. The failure only appears when a user applies text spacing overrides — a state no scanner replicates by default. That gap between what automated testing catches and what real users encounter is exactly why this failure document deserves careful attention from every front-end team.

The Failure

F104 describes a specific, testable failure of WCAG 2.1 Success Criterion 1.4.12 Text Spacing (opens in new window). The criterion requires that no loss of content or functionality occurs when users apply the following overrides simultaneously:

F104 triggers when a size-constrained container — fixed height, fixed width, or both — cannot accommodate the expanded text that results from those overrides. The content doesn't reflow gracefully. It either overflows and overlaps adjacent content, or it clips entirely, disappearing behind a hard boundary.

The source document identifies three primary causes:

• overflow: hidden on an enclosing element
• Absolutely positioned content inside a fixed container
• Borders sized to the original content, not the adjusted content

Here's the problematic pattern from the W3C source:

<!-- FAILURE: Fixed height container with no overflow accommodation -->
<div style="font-size:100%; width:130px; height:125px; border: thin solid gray;">
  <p style="margin:0;">Now is the time for all good men to come to the aid of their country.</p>
</div>
<p style="margin:0;">The quick brown fox jumps over the lazy dog.</p>

At default spacing, this renders fine. Apply the SC 1.4.12 overrides, and the paragraph text expands beyond the 125px height constraint. With no overflow instruction, it bleeds directly into the paragraph below — visually overlapping unrelated content.

The clipping variant is arguably worse. Add overflow: hidden to that same container and the overflowed text simply vanishes. Users applying spacing overrides — typically people with dyslexia, low vision, or cognitive disabilities who depend on those settings — lose content with no indication that anything is missing.

Why This Matters

For a developer reading this, the failure might seem edge-case. Most users don't apply text spacing overrides manually. But that framing misses who does.

Users who apply these overrides are disproportionately people with dyslexia, who need increased letter and word spacing to parse text. People with low vision, who increase line height to track lines across the screen. People with cognitive disabilities, who rely on spacing to reduce visual crowding. These aren't edge users — they're the users for whom SC 1.4.12 was written, and they're applying these settings precisely because the default spacing makes content harder to use.

When a fixed-height card component clips their adjusted text, they don't see a broken layout — they see incomplete information. A product description that ends mid-sentence. A form label that disappears. A navigation item that vanishes. They have no way to know the content exists.

This is a content access failure, not a cosmetic one.

Our research on automated versus manual testing found that automated tools catch at most 37% of real accessibility barriers. F104 belongs firmly in the 63% that scanners miss — it requires state simulation that most pipelines don't perform.

The Fix

The corrected pattern removes the fixed height constraint and lets the container expand with its content:

<!-- FIXED: Container expands with content -->
<div style="font-size:100%; width:130px; border: thin solid gray;">
  <p style="margin:0;">Now is the time for all good men to come to the aid of their country.</p>
</div>
<p style="margin:0;">The quick brown fox jumps over the lazy dog.</p>

Removing height: 125px allows the box to grow. When text spacing overrides are applied, the container accommodates the expanded content rather than constraining it.

For more complex layouts — card grids, data tables, hero sections — the pattern extends to:

/* Instead of fixed height */
.card {
  min-height: ;  /* Establishes minimum, allows growth */
  overflow: visible;  /* Or omit overflow entirely */
}
/* Absolutely positioned content — reposition to relative flow */
.card-label {
  position: relative; /* Not absolute, unless youve tested spacing overrides */
}

The min-height approach preserves design intent (cards maintain a baseline height) while allowing content to push the boundary when needed. The ARIA Authoring Practices Guide and the WCAG Understanding document for 1.4.12 (opens in new window) both point toward this direction: design for content growth, not content containment.

Applying This

For development teams, catching F104 requires adding a spacing override test to your manual review process. The Text Spacing Bookmarklet (opens in new window) from Steve Faulkner applies all four SC 1.4.12 overrides in a single click — make it part of your component sign-off checklist.

Specific things to inspect during code review:

• Any height or max-height on text containers — flag these for spacing override testing
• overflow: hidden on elements containing text — automatic review candidate
• Absolutely positioned text labels — common in card components, badges, and data visualizations
• Fixed-dimension buttons — especially icon buttons with visible labels

For design systems, this is a systemic fix opportunity. If your token library defines fixed card heights, add a min-height variant and deprecate the fixed-height version. One design system change propagates the fix across every component instance — that's the kind of high-leverage intervention that operational capacity analysis consistently surfaces as the most efficient path to broad compliance improvement.

Teams using CSS-in-JS or utility frameworks should audit their spacing utility classes. A h-32 class in Tailwind (a fixed height: 8rem) on a text container is an F104 waiting to be triggered.

CORS Perspective

From an operational capacity standpoint, F104 is a high-leverage fix with low implementation complexity — remove a fixed height, add a min-height, test with the bookmarklet. The real operational challenge is detection: because automated testing misses this class of failure, teams need a manual testing protocol that simulates text spacing overrides as a standard step, not an afterthought. Organizations managing compliance across multiple overlapping standards should note that SC 1.4.12 is incorporated in both WCAG 2.1/2.2 and EN 301 549 — fixing F104 satisfies a requirement that crosses multiple frameworks simultaneously. The strategic argument for leadership is straightforward: this is a one-line CSS fix that prevents content from disappearing for users who depend on text spacing adjustments. The cost of not fixing it is measured in inaccessible information, not just audit findings.