Allowing for spacing override

Metadata

css

sufficient

When to Use

This technique is applicable to Cascading Style Sheet/HTML technologies.

Description

The objective of this technique is to show how to test for a spacing override. Increased spacing between lines, words, and letters benefits people who override author settings via user stylesheet, bookmarklet, extension, or application. An author's content needs to have the ability to be set to Success Criterion 1.4.12's metrics without loss of content or functionality. The author requirement is both to not interfere with a user's ability to override the author settings, and to ensure that content thus modified does not break content.

Examples

Text adapts and does not break content

Line height adapts to 1.5 times the font size. Letter spacing adapts to 0.12 times the font size. Word spacing adapts to 0.16 times the font size. Spacing underneath paragraphs adapts to 2 times the font size. Text fits within the bounds of its containing box without being cut off and without overlapping other boxes.

Tests

Procedure

Bookmarklet Procedure (for Sites without Content Security Policies)

First, create a Text Adaptation Bookmarklet.

Then,

  1. Set zoom level to 100%.
  2. Visit the page to be tested.
  3. Click (activate) the new bookmarklet.

Alternate Plugin Procedure (for Sites with Content Security Policies)

First, use the Stylish Chrome Plugin to add the following style:

* {
line-height: 1.5 !important;
}
p {
margin-bottom: 2em !important;
}
* {
letter-spacing: 0.12em !important;
}
* {
word-spacing: 0.16em !important;
}

These rules can be added via a WCAG 2.1 Text Spacing Test Style.

Then,

  1. Set zoom level to 100%.
  2. Visit the page to be tested.

Expected Results

Note: Where a page has multiple layouts (e.g. in a responsive design) text spacing should be tested in each layout.