Text Spacing Test

Introduction

The DeviceHub Text Spacing Test is a free online preview of WCAG-oriented text spacing adjustments on sample copy, without installing browser extensions on every machine, without rewriting your production CSS, and without claiming to diagnose dyslexia or other reading conditions clinically. Designers checking whether cards still contain expanded line-height, engineers validating that sticky headers do not crush spaced paragraphs, QA capturing overflow bugs before release, educators teaching WCAG text spacing success criteria, and content authors seeing why fixed-height boxes fail all open one HTTPS page, apply spacing, and watch sample text reflow. DeviceHub states limits plainly: text-spacing is a preview of CSS spacing, not a sitewide fixer; it is not a full page audit crawler; prefers-* tools elsewhere reflect OS settings, not all AT; and nothing here replaces WAVE, axe, or professional audits. Results are informational accessibility helpers, not medical or clinical diagnoses. Pair with Keyboard Focus Test when focus outlines clip under tighter boxes. Pair with Color Contrast Checker when spaced text also sits on low-contrast backgrounds. Pair with Speech Synthesis Test when users rely on TTS after visual reading strain, still not clinical. Pair with Accessibility Preferences for prefers-* context. Permissions stay none. Text spacing adjustments help many readers, including people who increase spacing through user styles, bookmarklets, or AT-related tools, but DeviceHub will not invent a clinical dyslexia diagnosis from a CSS preview. The Text Spacing Test exists so designers see overflow failure modes early: fixed heights, absolute badge positions, ellipsis that hide meaning, and sticky footers that cover the last line when line-height grows. Engineers get a shared vocabulary before arguing about whether a card “looks fine” at default metrics. QA captures a reproducible demo without installing a stack of extensions on locked-down corporate images. Educators teach WCAG text spacing ideas with a live sample while repeating that production sites still need WAVE, axe, or professional audits, and that DeviceHub’s preview is not a sitewide fixer. Cross-link Keyboard Focus Test when outlines clip, Color Contrast Checker when spaced text sits on pale chips, Speech Synthesis Test when teams offer TTS alternatives (gesture may be required; voices differ by OS), and Accessibility Preferences for prefers-* context. Permissions stay none. Never file medical paperwork from spacing screenshots.

What this tool does

Text Spacing Test applies adjustable spacing properties to sample content so you can see reflow, clipping, and overlap patterns typical when users increase spacing. It does not inject styles into other origins, does not upload reading metrics for ads, and does not certify WCAG conformance for your domain. Guidance explains why fixed heights, absolute positioning, and overflow:hidden fail under spacing, and why custom fonts may clip. Typed permissions remain none. Closing the tab clears the preview. Informational only, not clinical diagnosis of learning disabilities. Controls increase spacing metrics on sample paragraphs, lists, and constrained boxes so you can watch reflow. The UI calls out clipping and overlap as teaching moments. It does not inject user styles into other origins, does not modify your webfonts, and does not upload reading-speed analytics, DeviceHub is not measuring comprehension or diagnosing learning disabilities. Guidance mentions that some icon fonts interpret letter-spacing poorly and that containers with overflow hidden are frequent culprits. Typed permissions remain none. Closing the tab resets the demo. Pair notes encourage real-page verification because your CSS grid and container queries will not match the sample DOM exactly.

When to use it

Use during design-system spacing reviews, when cards truncate expanded text, when teaching WCAG text spacing, when QA needs a shared demo before filing overflow bugs, and when sticky chrome overlaps spaced paragraphs. Prefer real-site audits with WAVE/axe afterward. Prefer Keyboard Focus Test for tab visibility. Avoid medical claims. Avoid expecting DeviceHub to fix Shopify themes remotely. Use during design-system definition of card min-heights, when marketing tiles truncate under spacing, when sticky CTA bars collide with expanded paragraphs, when localizing into languages with longer words that amplify overflow, and when onboarding freelancers who never tested user spacing. Prefer professional audits on staging afterward. Prefer Forced Colors Test when Contrast themes and spacing interact. Prefer Reduced Motion Check when animated expanders fight spaced layouts. Avoid clinical claims about dyslexia, ADHD, or reading disorders. Avoid promising DeviceHub will patch WordPress themes remotely.

How it works

WCAG text spacing guidance describes user-adjustable spacing metrics authors should not break. DeviceHub demonstrates those ideas on sample DOM with CSS, line-height, letter-spacing, word-spacing, and paragraph spacing, without crawling your sitemap. Typed permissions stay none. Engines render fonts differently; preview is educational. Not a substitute for bookmarklets on production. Not clinical. Not WAVE/axe. Local only. WCAG describes spacing adjustments users may apply; authors should ensure content still works. DeviceHub approximates the spirit of those adjustments with CSS on a sample document: larger line-height, letter-spacing, word-spacing, and paragraph spacing. It is explicitly a preview, not a crawler that walks your sitemap applying bookmarklets. Typed permissions stay none. Font metrics differ by family, Google fonts versus system UI fonts will not fail identically. RTL and complex scripts need real-page checks beyond the English sample. Speech synthesis and screen readers remain separate concerns; listing voices on Speech Synthesis Test does not prove your headings are exposed correctly to NVDA. Not clinical. Not WAVE/axe replacement. Local styling only. Teams should also remember that spacing previews will not catch every collision with absolutely positioned chat widgets, cookie banners, or third-party iframes injected at runtime, those belong in staging audits with WAVE, axe, or human review. DeviceHub refuses to claim otherwise. When stakeholders ask for a “dyslexia mode,” respond with spacing and typography options as inclusive design choices while stating clearly that DeviceHub does not clinically diagnose dyslexia or any reading disability. Locale testing remains essential: German compound words, Finnish long tokens, and CJK line breaking stress containers differently than the English sample. Print stylesheets and PDF exports are separate surfaces this browser preview does not certify. If your design system documents a minimum line-height token, verify that token still holds after user spacing overrides rather than assuming the sample’s numbers equal your theme. Finally, pair visual spacing checks with Keyboard Focus Test so expanded lines do not push focus rings under sticky chrome, and keep Color Contrast Checker nearby when pale caption text becomes even harder to judge after reflow.

Step-by-step instructions

1. Open Text Spacing Test over HTTPS and read the baseline sample copy.
2. Apply spacing controls to increase line, letter, word, and paragraph spacing.
3. Note clipping, overflow, or overlapping UI in the sample.
4. Reproduce on your real components with audits; do not assume the sample equals your CSS.
5. Check Keyboard Focus Test if focus indicators are affected by cramped boxes.
6. Label results as spacing preview, not a sitewide fix, not a medical diagnosis, not a full audit certificate.

Common problems

Assuming the preview patches production sites. Fixed-height cards overflowing. Treating results as dyslexia diagnosis. Skipping professional audits. Custom icon fonts colliding with letter-spacing. Sticky headers covering content. Confusing text spacing with prefers-contrast. Expecting DeviceHub to meet legal conformance alone. Ignoring RTL scripts in your real product. Using only English sample as proof for all locales. Believing the preview rewrites production. Fixed pixel heights overflowing. Medical claims about dyslexia diagnosis. Skipping audits. Icon fonts colliding with letter-spacing. Sticky headers covering content. Confusing spacing with prefers-contrast. Legal conformance claimed from a sample screenshot. English-only assumptions. Custom line-clamp CSS hiding spaced text. Absolute-positioned badges overlapping. Expecting DeviceHub to meet Section 508 alone. Mixing Color Blindness Test into clinical forms. Ignoring keyboard focus clipping after spacing. Assuming bookmarklet parity without running one on production. Ignoring container queries that change card width under spacing. Treating DeviceHub as a CMS plugin. Forgetting that button labels with letter-spacing can overflow rounded pills. Claiming medical outcomes. Using only desktop widths while mobile sticky footers crush spaced paragraphs. Expecting speechSynthesis to compensate for clipped text without fixing layout. Replacing professional audits with a workshop screenshot.

Privacy explanation

Text Spacing Test styles sample text locally. DeviceHub does not upload reading performance or health inferences, there are none to infer clinically. Permissions stay none. Informational accessibility preview only, not medical. Clear the tab on shared classroom machines when finished. Text Spacing Test only restyles sample copy in your tab. DeviceHub does not infer medical conditions or upload reading performance. Permissions stay none. Informational accessibility education, not clinical diagnosis. Clear the page on shared classroom machines when finished. No reading-speed telemetry is collected. No clinical inferences are made. DeviceHub’s spacing demo is an accessibility education surface, informational only, not a medical instrument. Clear projector displays before the next class arrives.