Skip to content

Technique F104:Failure of Success Criterion 1.4.12 due to clipped or overlapped content when text spacing is adjusted

About this Technique

This technique relates to 1.4.12: Text Spacing (Failure).

This failure applies to text content created in markup languages that support text style properties.

Description

The purpose of this technique is to identify and test a failure condition where part of the content clips and is unreadable when the user overrides the spacing of the text within the boundaries set out in the Text Spacing success criterion. In general, this failure occurs when text is presented in a size-constrained block which does not expand if the size of the content increases. Some of the ways in which this can occur include:

  • Setting the overflow property of the enclosing element to hidden
  • Using absolutely positioned content
  • Creating borders that are not large enough for the content when using the new font spacing

Examples

Example 1: Text inside a box overflows and overlaps text below it when text spacing is implemented.

The code below is what is implemented in the DOM before the user implements any CSS test spacing overrides. The text renders correctly in the box and doesn't interfere with the next paragraph.

<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>

Now is the time for all good men to come to the aid of their country.

The quick brown fox jumps over the lazy dog.

Here is the view AFTER the text spacing has been overridden by the user with the text spacing in the success criterion. The text overlaps the paragraph below it.

Now is the time for all good men to come to the aid of their country.

The quick brown fox jumps over the lazy dog.

Example 2: Text inside a box is clipped when text spacing is implemented.

The code below is what is implemented in the DOM before the user implements any CSS test spacing overrides. The text renders correctly in the box and doesn't interfere with the next paragraph.

<div style="font-size:100%; width:130px;
 height:95px; overflow:hidden; border:thin solid gray;">
  <p>Now is the time for all good men to come to the aid of their country.</p>
</div>
<p>The quick brown fox jumps over the lazy dog.</p>

Here is the default view before the text spacing has been overridden by the user, The text renders properly in the box.

Now is the time for all good men to come to the aid of their country.

The quick brown fox jumps over the lazy dog.

Here is the view AFTER the text spacing has been overridden by the user with the maximum text spacing in the success criterion, the text is clipped.

Now is the time for all good men to come to the aid of their country.

The quick brown fox jumps over the lazy dog.

Related Resources

No endorsement implied.

Tests

Procedure

  1. Open the page and review the available content.
  2. Override the CSS on the page using a user stylesheet, bookmarklet, extension, or application with the values listed in the success criterion:
    1. Line height to at least 1.5 times the font size;
    2. Spacing following paragraphs to at least 2 times the font size;
    3. Letter spacing (tracking) to at least 0.12 times the font size;
    4. Word spacing to 0.16 times the font size.
  3. Check if any content is clipped, obscured, or lost due to the new text spacing.

Expected Results

  • If check #3 is true, then the failure condition applies and the content fails the Success Criterion
Back to Top