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

Metadata

Success Criterion 1.4.12

Failure

Applicability

This techniques 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:

Examples

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.

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.

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

Resources