How to Install A11yCore on Squarespace: Accessibility Meets Beautiful Design

Squarespace is the go-to platform for designers, photographers, and creatives who want a stunning web presence. But too often, accessibility widgets ruin that aesthetic with clunky overlays and mismatched fonts.

A11yCoreis different. It’s the only accessibility solution built to respect your design choices while ensuring full WCAG 2.2 compliance. This guide covers how to install it in minutes using Squarespace's "Code Injection" feature.

Part 1: Installation Guide

Note: The "Code Injection" feature is available on Squarespace Business and Commerce plans.

Step 1: Get Your License Key

Log in to your A11yCore dashboard and copy your uniqueLicense Key.

Step 2: Open Code Injection

1. Log in to yourSquarespace Dashboard.
2. Go toWebsite > Pages.
3. Scroll down toWebsite Tools(orUtilitiesin some versions) and clickCode Injection.

Step 3: Add the Script to Footer

1. Scroll down to theFootersection.Do not put this in the Header—placing it in the Footer ensures your site loads its visual content first.
2. Paste the following code:

<!-- A11yCore Accessibility Widget -->
<script type="module">
  import A11yCore from 'https://cdn.a11ycore.org/a11ycore/dist/esm/core.js';
  A11yCore.init({ 
    licenseKey: 'YOUR_LICENSE_KEY_HERE' 
  });
</script>

3. ReplaceYOUR_LICENSE_KEY_HEREwith your actual key.
4. ClickSaveat the top.

Step 4: Verify

Visit your live site. You should see the A11yCore icon appear. Test it by clicking the icon and trying a feature like "Dyslexia Friendly Font."

Part 2: Why A11yCore Fits Squarespace Perfectly

Squarespace templates are works of art. You don't want a plugin messing with your CSS.

1. Design Protection (Shadow DOM)

This is our superpower. A11yCore lives inside aShadow DOM—a protected "bubble" within your website code.

• Your Styles Stay Yours:We won't accidentally change your H1 fonts or button colors.
• Our Widget Stays Ours:Your template's complex CSS won't break our accessibility menu. It’s the only way to guarantee a seamless visual integration.

2. Performance for Heavy Sites

Squarespace sites often feature high-resolution images and videos. You can't afford a heavy plugin.

• Ultralight ESM:At just ~14KB, A11yCore is a fraction of the size of a single image.
• Lazy Loading:We only load advanced remediation features (like audio description engines) if a user actually requests them. Your initial page load remains lightning fast.

3. Visual & Neuro-Inclusion

Accessibility isn't just about code; it's about the experience.

• Smart Contrast:We can adjust text contrast dynamically without ruining your color palette.
• Motion Control:Squarespace loves parallax scrolling. For users with vestibular disorders, A11yCore can automatically pause these animations to prevent nausea.

Part 3: Customize to Match Your Brand

In your A11yCore dashboard, you can fine-tune the widget's appearance:

• Positioning:Move the button to the left if your chat widget is on the right.
• Color Matching:Use your brand's specific hex code for the trigger button.
• Icon Choice:Choose an icon style that fits your vibe (minimalist, bold, etc.).

Keep your Squarespace site beautiful AND open to everyone.Start your free A11yCore trial today.