Accessibility widget for Squarespace

Squarespace templates are designed to look good, and they often lean on large hero images, thin fonts, and subtle gray text. Those choices can be beautiful and still be hard to read for visitors with low vision or color deficiency.

ClearPath installs through Squarespace Code Injection, a single paste in the site footer that then applies to every page your template renders.

How to add ClearPath to Squarespace

  1. In your Squarespace dashboard, go to Settings, then Advanced, then Code Injection.
  2. Paste the snippet into the Footer box.
  3. Click Save at the top of the panel.
  4. Open your live site in a new tab and confirm the ClearPath button appears in the corner.

Where Squarespace sites usually fail

  • Squarespace's built-in style editor sets heading levels by visual size rather than document order, so a template can jump from an H1 straight to an H4 because that's the font weight the design called for, leaving screen reader users with a table of contents that makes no structural sense.
  • The Fluid Engine page builder lets you stack image blocks, spacer blocks, and text blocks in any visual arrangement, but the underlying reading order it generates often doesn't match what's on screen, so keyboard and screen reader users tab through content in a sequence that has nothing to do with the layout.
  • Squarespace's native form blocks rarely get custom labels added, so required fields in a contact or newsletter form often depend on placeholder text alone, which disappears the moment a visitor starts typing and leaves no accessible name for assistive tech.
  • Gallery and slideshow sections built on Squarespace's default templates frequently ship without alt text fields filled in, since the platform lets you publish an image block with the alt field left blank, so product photos and portfolio images go undescribed.

Why Squarespace sites choose ClearPath

  • The Footer injection loads on every page, so one paste covers the whole Squarespace site.
  • Contrast and font tools counter the light gray text many Squarespace templates use by default.
  • No template switch or code editing beyond the single Code Injection box.
  • The accessibility statement gives you a ready page to link in your Squarespace footer navigation.

Questions

Which Squarespace plan do I need for Code Injection?

Code Injection is available on Squarespace Business and Commerce plans. If you are on the Personal plan you will need to upgrade before the Footer box is available.

Header or Footer box, where should the ClearPath snippet go?

Use the Footer box. The script uses defer and does not need to block page rendering, so loading it at the end keeps your pages fast.

Does the widget make my Squarespace site fully compliant?

No. ClearPath gives visitors 25 adjustment tools, 8 disability profiles, and 14 languages, and it generates an accessibility statement from a live scan of your site. What it does not do is rewrite the heading structure Squarespace's style editor applied, fix the reading order Fluid Engine generated, or add labels to your native form blocks. Those live in your template and page sections, so they still need to be corrected there. No widget, on Squarespace or any other platform, makes a site compliant by itself.