Short note on getting spaced out with SC 1.4.12 Text Spacing

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:

If that doesn't have any dependencies and works across a reasonable browser spread, it's better than the quick one I did previously (https://t.co/pzzPHxTos3). Will that URL be stable?

— Alastair Campbell (@alastc) May 22, 2018