Short note on getting spaced out with SC 1.4.12 Text Spacing

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

Last updated 26th of March 2020. Now works on content inside same-origin first level iframes – i.e. it doesn’t then work if there’s an iframe inside another iframe. Thanks to Patrick H. Lauke

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:

Categories: Development

About Steve Faulkner

Steve was the Chief Accessibility Officer at TPGi before he left in October 2023. He joined TPGi in 2006 and was previously a Senior Web Accessibility Consultant at vision australia. 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 ARIA in HTML and HTML Accessibility API Mappings 1.0. He also develops and maintains HTML5accessibility and the JAWS bug tracker/standards support.

Comments

Kurt Mattes says:

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

Zoë Haughton says:

Thank you for this Steve – very useful for a11y testing.