Squarespace Accessibility Check

Why Squarespace accessibility matters in the EU

The European Accessibility Act (EAA) applies to e-commerce and consumer-facing services in the EU. If your Squarespace store sells to EU customers, WCAG 2.1 AA compliance is expected — and enterprise partners increasingly ask for proof before they sign.

Most accessibility problems on Squarespace sites come from a handful of repeating issues: missing alt text on product images, generic link text like "read more", low-contrast text over theme colours, empty form labels, and missing page language. All of these are detectable automatically — that's what our scanner checks.

Squarespace's platform: how accessibility works inside the builder

Unlike open CMS platforms where you control every line of HTML, Squarespace gives you a template-based system with guardrails — and limits. Understanding what's under your control is the first step to compliance.

Templates: Brine/Family vs. 7.1 Fluid Engine

Squarespace has two major template generations. The older Brine family (7.0) uses per-template style editors with their own colour and font palettes. The current 7.1 platform uses Fluid Engine — a drag-and-drop grid editor that replaces the classic content editor. Fluid Engine gives you pixel-level layout control without code, but it does not enforce accessible heading order, visible focus indicators, or sufficient colour contrast. The visual freedom means you must manually verify that your layout works for keyboard and screen reader users.

If you're still on a Brine-era template (7.0), you have a fixed set of colour/style options controlled per template. Switching to 7.1 unlocks Fluid Engine but also changes your entire style stack — worth planning as a separate migration project alongside your accessibility work.

CSS access: limited, but powerful

Squarespace does not expose the raw HTML of your pages. Instead, you work through the page builder and the Custom CSS panel (Settings → Advanced → Custom CSS). This panel lets you override colours, add focus outlines, fix contrast ratios, and adjust spacing — all without breaking the template system. The key limitation is that you cannot restructure the DOM. For example, you cannot add a missing <h1> element if the template never outputs one; you work with what Squarespace's markup gives you and enhance it.

Built-in SEO settings

Squarespace includes a solid SEO panel (Settings → SEO → SEO Controls) where you set the page title format, meta descriptions, social share images, and canonical URLs. These settings affect how search engines and assistive technology perceive your page structure. Ensure your SEO title format includes the page name before the site name, and verify that auto-generated meta descriptions are not empty — screen readers use page titles for navigation, and empty titles break that flow.

Squarespace Forms

Forms are one of the most frequently flagged areas in Squarespace accessibility scans. The form block (Storage section in the content panel) supports email, text, checkbox, dropdown, and file upload fields. Labels are shown by default, but hiding them for visual design reasons is common — and a WCAG failure. Always keep labels visible or use placeholder-as-label only as a supplementary hint (never the sole label). The built-in form block also lacks error announcement for screen readers by default; add descriptive inline error text above the field rather than relying on colour alone.

Blog, Store, and Portfolio content handling

Each content type has different accessibility pitfalls:

• Blog posts: Image blocks inside blog posts often inherit no alt text from the post-level thumbnail. Add alt text to every image block inside a post individually. The blog list view's "Read More" links are generic by default — customize the link text in the blog post settings.
• Store products: Product images uploaded via the inventory panel accept alt text in the image variant editor. Variant images (colour swatches, alternate angles) each need their own descriptive alt text. The "Add to Cart" button label is set by Squarespace and is usually fine, but verify it isn't hidden behind a custom CSS override.
• Portfolio pages: Squarespace portfolio pages use a gallery-style layout where each item links to a detail page. The thumbnail alt text and the detail page's heading structure are separate — both must be set. Portfolio items also often use lightbox overlays that trap keyboard focus; test each overlay with Tab to ensure it doesn't lose the user.

How to check your Squarespace site

1. Open the free EAA/WCAG scanner.
2. Paste your Squarespace URL — any published page: home, a product page, or a collection page.
3. Read your grade. Each finding shows the exact element and why it matters, so fixes are concrete, not vague advice.
4. Fix and re-scan. In Squarespace, most image-alt and contrast issues are fixed right in the editor or theme settings. Re-run the scan to confirm.
5. Copy the shareable link from the result page — useful when a client or colleague needs to see the findings.

Common fixes in Squarespace

When your scan flags a failing rule, here's where to fix it in the Squarespace editor:

Issue	Where to fix in Squarespace
Missing alt text	Click the image → Edit → click the image again → Image Editor → Alt Text field. Or in the page editor, click the image block settings.
Low contrast text	Site Styles (paintbrush icon) → Colors → adjust text colour for each colour palette element. Squarespace themes often use light text — darken body text to at least #444.
Missing heading structure	Click a heading block → Text panel → Heading level dropdown (Heading 1-4). Squarespace sets H1 by page title; use H2 for section headings, H3 for subsections.
Empty form labels	Click the form block → Edit Form → Field Settings → ensure Label is displayed. Squarespace forms show labels by default — verify they aren't hidden.
Generic link text	Click the text → highlight the link → Link editor → update the visible link text. Replace "Learn more" with "Learn about our shipping policy".
Missing page language	Squarespace sets the lang attribute automatically from your site language in Settings → Language and Region. Verify it's correct.

Squarespace-specific tools and fixes

Fluid Engine vs. Classic Editor accessibility

If your site is on Squarespace 7.1, you edit every page in Fluid Engine — a drag-and-drop grid that layers content blocks on a freeform canvas. The Classic Editor (still available on 7.0 sites) stacks blocks vertically. From an accessibility standpoint, Fluid Engine introduces a risk: blocks placed in a non-linear visual order may not match the DOM order that screen readers follow. After rearranging blocks in Fluid Engine, test the page with a screen reader to confirm the reading order is logical. The Classic Editor's vertical stacking is simpler and usually matches the DOM order by default.

Custom CSS for contrast and focus repairs

When Site Styles doesn't give you enough contrast control, the Custom CSS panel (Settings → Advanced → Custom CSS) is your next tool. Common fixes include:

/* Darken body text for WCAG AA contrast */
body { color: #222; }

/* Add visible focus outlines for keyboard users */
*:focus-visible { outline: 3px solid #005fcc; outline-offset: 2px; }

/* Fix contrast on light overlay backgrounds */
.sqs-block-content p { color: #333; }

Always test custom CSS against the responsive views (mobile, tablet) inside Squarespace's preview — some fixes that work on desktop break the mobile layout.

Targeting with Squarespace block IDs

Every block in Squarespace receives a unique data-block-id attribute. You can use these IDs in Custom CSS to target a single element without affecting others on the page. In the page editor, open the block's settings panel and look for the block ID in the URL; or inspect the page in your browser's dev tools and find data-block-id="yui_3_17_2_1_...". Then write CSS like:

/* Target a specific image block's alt fallback */
[data-block-id="yui_3_17_2_1_12345"] img { outline: 2px dashed red; }

Image block alt text workflows

Alt text in Squarespace lives in two places depending on how you upload the image:

• Image block (page editor): Click the image → Edit → click the image again → Image Editor → Alt Text field. Also accessible from the block's design panel under "Caption".
• Content library (Assets panel): Images uploaded to the shared content library store alt text at the asset level, but this does not auto-populate into every block that uses the image. Each insertion needs its own alt text.
• Product / gallery images: Alt text is set per-image in the inventory or gallery editor. Gallery blocks do not expose a bulk alt-text field — each image must be edited individually.

For sites with hundreds of images (stores, portfolios), consider a manual audit schedule: flag one collection per week until all images are covered. Our scanner can help prioritise which pages need attention fastest.

Squarespace Extensions (formerly Plugins)

Squarespace's Extensions marketplace includes third-party tools that add functionality through iframes, JavaScript embeds, or Server Connectors. Each extension introduces its own accessibility surface — a chat widget, a booking calendar, or a reviews carousel — that may not follow WCAG requirements. Before installing any extension, check the provider's accessibility documentation. After installing, include the extension's UI in your regular scanning cycle; iframes are often invisible to automated tools, so manual keyboard testing is especially important.

Maintaining EAA compliance on Squarespace

Accessibility is not a one-time fix. Squarespace's platform changes frequently, and every major update can reintroduce issues you already resolved.

Template change impact

Switching templates is the single highest-risk event for your accessibility compliance. When you change a template (from any 7.0 family to 7.1, or between 7.1 templates), Squarespace resets your colour palette, font stack, spacing, header layout, and content block arrangement. Custom CSS is preserved but may no longer work because the target class names change. After a template change:

• Run a full scan on every page type: home, product, blog post, and collection/index page.
• Verify all Custom CSS still applies — inspect each override against the new template's generated class names.
• Check that the page language attribute and SEO settings survived the migration.
• Test keyboard navigation: tab through the header, main content, and footer. New templates often change the focus order.

Content contributor training

If your team includes non-technical content editors (marketers, product managers, writers), accessibility knowledge needs to reach them too. Common contributor-caused regressions include:

• Uploading a new product image without alt text — the field is not required by Squarespace.
• Pasting content from Word or Google Docs that strips heading levels or introduces unlabeled links.
• Hiding form labels "to make the form look cleaner" in the block design panel.
• Adding decorative images without marking them as decorative in the alt text field.

A short internal guide (or a bookmark to this page) helps contributors self-check before publishing. Pair it with a monthly scan report from our tool to catch regressions early.

Regular testing after platform updates

Squarespace deploys platform-wide updates several times a year. These updates can change how your site renders, even without any action on your part. Build a recurring check into your calendar:

• Monthly: Scan your three highest-traffic pages with our free checker.
• Per major release: After Squarespace announces a feature update (new template family, editor overhaul, form extension), scan all templates and page types.
• Quarterly: Conduct a manual keyboard-and-screen-reader pass on one complete user journey (e.g. browse → product page → cart → checkout).

Set a reminder in your project management tool the day after Squarespace's release notes drop. Because automated tools catch roughly a third of issues, the manual quarterly pass closes the gap that scanners miss.

Go deeper

Automated scanning catches roughly a third of accessibility issues — but it catches the ones that are cheapest to fix first. When you want the full picture, here are the next steps:

• Run a manual audit: Pair our automated scan with a keyboard-only test (Tab through every interactive element) and a screen reader test (VoiceOver on macOS or NVDA on Windows). The combination covers the largest gaps.
• Read the Squarespace accessibility docs: Squarespace publishes its own accessibility guide covering built-in features and known limitations.
• Use the WAI's evaluation tools list: The W3C maintains a curated list of evaluation tools for deeper testing.
• Build a compliance binder: Save each scan result link in a dated folder. Over time, this becomes documented evidence of your ongoing compliance effort — useful for procurement questionnaires and regulatory inquiries.