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
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
