Short note on getting spaced out with SC 1.4.12 Text Spacing

Posted on Thursday, 24 May 2018 by Steve Faulkner

astronaut puffing on a cheroot through her helmet. The words SPACED OUT, with the letters separated, above her head.One of the new success criterion in WCAG 2.1 is 1.4.12 Text Spacing. Conforming to this criteria provides accommodation for people to modify their text styles according to their needs.

The success criterion defines a set of text styles that must be supported. Thinking that this should be pretty simple to test using a bookmarklet I went searching for one that someone may have prepared previously. Not finding any, I whipped one up.

What the success criterion requires;

In content implemented using markup languages that support the following text style properties, no loss of content or functionality occurs by setting all of the following and by changing no other style property:

  • Line height (line spacing) to at least 1.5 times the font size;
  • Spacing following paragraphs to at least 2 times the font size;
  • Letter spacing (tracking) to at least 0.12 times the font size;
  • Word spacing to at least 0.16 times the font size.

source: 1.4.12 Text Spacing

Using a bookmarklet that applies these styles to a page when activated, the styled content can be visually scanned to identify any issues such as clipping or overlaying of content.

The Text Spacing bookmarklet

On Tuesday night, way past my bedtime, the Text Spacing bookmarklet was born:
On Codepen: text spacing bookmarklet

See the Pen text spacing bookmarklet by steve faulkner (@stevef) on CodePen.

Permalink to the Text Spacing Bookmarklet

Addendum

I found out later that there was another bookmarklet to test this criteria:

About Steve Faulkner

Steve is the Technical Director at TPG. He joined The Paciello Group in 2006 and was previously a Senior Web Accessibility Consultant at vision australia. He is the creator and lead developer of the Web Accessibility Toolbar accessibility testing tool. Steve is a member of several groups, including the W3C Web Platforms Working Group and the W3C ARIA Working Group. He is an editor of several specifications at the W3C including HTML 5.1, ARIA in HTML, Notes on Using ARIA in HTML and HTML5: Techniques for providing useful text alternatives. He also develops and maintains HTML5accessibility.

Comments

  1. Thanks Steve! Appreciate your late night effort. It will spare many a11y professionals from hours of manual CSS manipulation.

Comments for this post are closed.