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
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
Thanks Steve! Appreciate your late night effort. It will spare many a11y professionals from hours of manual CSS manipulation.
Thank you for this Steve – very useful for a11y testing.