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

Metadata

Success Criteria 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 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 criteria. In general, this failure occurs when there is no way for a user agent's layout engine to honor all the layout overrides in the HTML for the user defined font spacing. 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:120px; height:90px; 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 maximum 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.

Working example of {Example Title}

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:120px; height:85px; 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.

Working example of {Example Title}

Tests

Procedure

  1. Override the CSS on the page using a user style sheet or a browser plugin with the maximum values listed in the success criteria:
    1. Line height (line spacing) 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.
  2. Check if there are any content is clipped, obscured or has any loss of content due to the new text spacing

Expected Results

Resources

Provide links to external resources that are relevant to users of the technique. This section is optional.