Text must stay readable with increased text spacing
Many people with dyslexia or low vision use a browser extension that adds space between lines, words and letters. When buttons, badges and menus have fixed heights, their labels get cut off, so customers can no longer read prices, sizes or the text on the checkout button.
- Rule id
- vs-text-spacing
- Source
- Validiscan check
- Impact
- Moderate
- Fix tier
- ASSISTED
- on Shopify, Shopware, WooCommerce and Magento
- Status
- runs
What the check does
Applies the WCAG text-spacing overrides (line height 1.5, paragraph spacing 2, letter spacing 0.12 and word spacing 0.16 times the font size) and detects text that is clipped, overlaps or disappears (1.4.12).
The check freezes CSS transitions, measures the page, injects the spacing styles and measures again. Paragraph spacing goes on p elements as margin-bottom: 2em. It measures each line of text, not the element’s box, for up to 1,500 elements with text of their own.
Text is reported when its lines now reach more than 4 px past a box whose overflow is hidden or clip, or now overlap another element’s text, an image or an input by more than 4 px both ways. Overflow into a scrollable box does not count, nor does text already truncated or visually hidden. Fixed or sticky layers are never compared with content that scrolls under them.
A third measurement without the styles must no longer show the problem, so a carousel that moved on its own drops out. It runs at each scan viewport, 1440 px and 390 px wide by default, and reports at most 15 elements per page and viewport. Text in SVG, canvas, textarea and select is not measured.
How to fix it
Avoid fixed heights and overflow: hidden on elements that contain text; use min-height and padding instead so buttons, badges and menu items grow with their content.
WCAG success criteria
- 1.4.12 Text Spacing, level AA
EN 301 549 clauses
| WCAG criterion | Version 3.2.1 | Version 4.1.1 |
|---|---|---|
| 1.4.12 | 9.1.4.12 | 9.1.4.12 |
Start with a free check of your shop.
Send your shop’s address. Validiscan scans it and replies with every failure the scan can prove, with the page and the code.
Request a free checkOr write to info@validiscan.com.
What the free check covers, and what it leaves out- You send
- your shop’s address
- Pages scanned
- up to 15
- You get
- every failure the scan can prove, with the page and the code
- On your shop
- public pages only; no login, nothing bought, no forms sent
- What it is not
- a full audit