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

Important Information about Techniques

See Understanding Techniques for WCAG Success Criteria for important information about the usage of these informative techniques and how they relate to the normative WCAG 2.1 success criteria. The Applicability section explains the scope of the technique, and the presence of techniques for a specific technology does not imply that the technology can be used in all situations to create content that meets WCAG 2.1.

Applicability

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

This technique relates to Success Criterion 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:

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 criteria. 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 criteria, 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.

Resources

Resources are for information purposes only, 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 criteria:
    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