WCAG 1.4.12 Text Spacing says nothing may break when users set line height to 1.5, paragraph spacing to 2, letter spacing to 0.12 and word spacing to 0.16 times the font size.
For testing, I like the Text Spacing Editor extension by Actum. But in my Chrome, it doesn’t get access to plain http:// pages – and that includes my http://localhost development sites, where I want to catch spacing problems before they go live. So I built a bookmarklet.
It opens a small panel with all four properties set to the WCAG values. Each one has a checkbox and a slider from 0 up to the WCAG value, so you can find out which property breaks your layout. It also reaches same-origin iframes and open shadow roots. Click the bookmarklet again to remove everything.
Like any bookmarklet, it won’t run everywhere, and you need to click it again after each page load. Give it a try on your own projects and let me know what you think on GitHub.
Thanks to Steve Faulkner for the original one-click text spacing bookmarklet.
Drag this link to your bookmarks bar (or click it to try it here):
…and I am an Specialist for Web Accessibility and UX-Engineer with over 20 years of experience, by day and a podcaster by night.
I help organizations build accessible websites by offering talks about accessibility, workshops & trainings, accessibility reviews and developing strategies for developers and management.
If that sounds like you could use my help, let’s talk! 💬