Squarespace accessibility: built-in tools and what stays with the site owner

What Squarespace provides

Squarespace's support pages describe tools for building accessible sites, including alt-text fields for images and color controls in Site Styles for adjusting text and background contrast. See Squarespace's accessibility resources and its guide to inclusive design. Squarespace's own guidance places responsibility for compliance with local accessibility law on the site owner.

The usual problems and the fixes

A Squarespace checklist

1. Scan the published site with a free checker, including the home page, a content page and any form or store page.
2. Work through the problems in the table above.
3. Check animations and scroll effects: anything that moves for more than five seconds should be possible to pause.
4. Test by keyboard (hand-testing steps), including menus and Squarespace Commerce checkout.
5. Publish an accessibility statement.
6. Rescan after template changes, new sections or code injection.

If you consider a third-party accessibility widget for Squarespace, read accessibility overlays explained first.

What to check first on a Squarespace site

Squarespace sites are built from templates and content blocks, which keeps pages consistent. That is helpful, because a fix to the template or style settings often applies to every page. The main areas to check are as follows.

• Site title and page titles. Each page needs a descriptive title and a short description.
• Headings. Use the heading styles for headings and the paragraph style for body text. Do not choose a heading level because it looks right.
• Text and background colors. Check contrast in the style editor, especially for button labels and text over images.
• Image alternative text. Add it in the image settings. See alt text.
• Links and buttons. Make link text specific. See link and button names.
• Forms. Make sure every field has a label and that error messages are clear.
• Video and audio. Provide captions or transcripts, and turn off autoplay.

Template choices and style settings

Templates differ in how they handle navigation, overlays and image text. Some place text on top of photos, which can make contrast unpredictable. If you choose a template, test its demo with a keyboard and at high zoom. In style settings, choose font sizes that are comfortable to read, with good line spacing, and avoid very light or thin fonts for body text. Check that the mobile menu opens and closes with a keyboard and that the focus does not disappear.

Custom code and code injection

Squarespace allows custom CSS and code injection. This is useful for fixes, such as restoring a focus outline, and risky when it hides or changes built-in features. If you add code, test it on every template you use. Keep a record of what you changed and why, so you can review it when the platform updates.

Commerce pages

If you sell products, check the product page, the cart and the checkout in the same way as any store. Look at variant selection, quantity fields, and error messages when a field is wrong. Review confirmation emails for readable text and contrast. See the ecommerce accessibility checklist.

Monthly routine for a Squarespace owner

1. When you add a page, check headings, images and links before publishing.
2. Run a scan on a handful of pages each month.
3. Test the keyboard on any page with a new block or form.
4. Review your statement every six months. See the accessibility statement guide.

What Squarespace can and cannot do for you

Squarespace maintains the platform and publishes help articles about accessible design. Its templates are built to work with common assistive technology. What the platform cannot know is whether your photos have descriptions, your headings follow a logical order, your colors have enough contrast or your forms are clear. Those are the parts you control, and they cause most accessibility problems on Squarespace sites.

Fixing the usual problems

Newsletters, announcements and pop-ups

Pop-ups and announcement bars are popular on Squarespace sites. If you use one, check that it can be closed with the keyboard, that it does not hide other content and that it does not return again and again after it is closed. A banner that sits over the top of the page can also cover the focus indicator when someone tabs through the page. Test at 200 percent zoom, where banners tend to take up more of the screen.

Portfolio and creative sites

Photographers, designers and artists often use Squarespace, and their sites tend to rely on images and unusual layouts. Writing alternative text for artwork is both an art and a courtesy: describe what is shown and, where relevant, the medium and mood, without being long. Provide titles and captions as real text. Avoid hiding navigation behind hover effects, and make sure galleries can be browsed with a keyboard. The goal is not to make the site plain, but to make sure everyone can find and enjoy the work.

When to ask for outside help

If your site includes custom code, a complex store or members-only content, a specialist can test pages that a free scan cannot reach and explain what to change. Look for a reviewer who has worked with Squarespace and who will tell you plainly what can be fixed within the platform and what needs a workaround. For cost guidance see accessibility audit cost.

Common questions from Squarespace site owners

• Does Squarespace have an accessibility widget? Squarespace does not provide an overlay by default. Third-party widgets exist, and they work as described in the overlays guide.
• Does changing templates fix problems? It can change them. A different template may handle navigation, spacing or image text better or worse. Test after switching.
• Is the font size I picked fine? Check the paragraph size on a phone. Small, light text is a frequent complaint. Increase size or weight if text looks faint.
• Should I add alternative text to every image? Add it to every image that carries meaning. For decorative images, leave the description empty if the option exists, or choose a text-friendly layout that does not need the image.
• How should I handle PDFs? Provide them in accessible form, or give the same information on a web page. A scanned image of a menu or price list is not readable by a screen reader.

A five-minute check for each new page

1. Read the page title and the first heading out loud. Do they describe the page?
2. Tab through the page. Can you see the focus, and does it move in order?
3. Check each image for a description.
4. Look for links that say "here" or "more" and rewrite them.
5. Zoom the page to 200 percent and scroll once.

This small routine takes less time than writing the page and prevents most of the problems that build up over time.

A worked example: a photographer's portfolio

A photographer has a Squarespace portfolio with full-screen images, white text over photos and a menu that only appears when the pointer reaches the top of the screen. A scan reports low contrast on the titles, images without descriptions and links without names. A keyboard test shows that the hidden menu cannot be reached at all.

She replaces the hidden menu with a visible one, adds a subtle dark gradient behind the titles so the text passes contrast, writes a sentence for each featured photo, and gives the social icons names. She keeps the full-screen look of the portfolio, because that is not a barrier, and she makes sure each gallery can be browsed with the arrow keys. The site still looks like her work, and now more people can see it.

Pages that visitors rely on most

• Contact and booking: labels, errors, confirmation messages.
• Pricing and services: real text, not images, and a clear heading for each service.
• Policies: readable pages with headings, not scanned documents.
• Events and calendars: dates and times in text that a screen reader can read.
• Newsletter sign-up: a labeled field and a named button.

Prioritizing these pages means the people who most need to reach you can do so, even if other parts of the site are still being improved.

Mobile layout, fonts and image focal points

Squarespace crops images differently at different widths. A focal point setting lets you choose which part of the image stays visible. When text sits on an image, check each width, because the crop may move the busiest part of the picture behind the words. Also check the mobile menu, which should open and close with a keyboard or a screen reader, and the size of tap targets in the mobile navigation. Choose fonts that stay legible when enlarged, and avoid ornate display fonts for anything people must read.

Member areas, courses and scheduling

If you use Squarespace for members-only content, online courses or appointment scheduling, test those flows separately. Sign-in, video lessons, quizzes and booking calendars each have their own controls. Make sure videos have captions, quizzes can be completed with a keyboard and the scheduling calendar announces the selected date and time.

Planning a Squarespace project from the start

Choose a template by testing the demo with a keyboard and a zoom, not only by looking at the pictures. Write your headings first and let the layout follow your content. Pick two fonts at most and a small palette that passes contrast, and keep to it. Decide in advance how you will describe images, and who will review new pages. These choices are easy at the start and annoying to retrofit.

A seasonal reminder

Sites change with the seasons: new banners, sale pages and holiday hours. Each change is a chance for a new problem. Before you publish a seasonal page, run the five-minute check from this guide. Afterwards, remove outdated banners and update your statement date only when you have really reviewed the site.

Blocks and features worth checking

• Galleries and lightboxes: can you open, move through and close images with the keyboard?
• Form blocks: does each field keep a visible label, and are errors clear?
• Announcement bars and popups: can they be dismissed by keyboard without hiding the page behind them?
• Animations and scroll effects: can motion be avoided or paused, and does the content still read without it?
• Embedded video and third-party widgets: each comes from another developer, so test them on the published page.