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

Applicability

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

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

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:95px; border: thin solid gray;"> Now is the time for all good men to come to the aid of their country. </div> <p>Now is the time for all good men to come to the aid of their country.</p>

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

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

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.

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

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;"> Now is the time for all good men to come to the aid of their country. </div> <p>Now is the time for all good men to come to the aid of their country.</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.

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

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.

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

Other sources

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