Summary: Squarespace, like other no-code content management systems (CMS), is a common choice for people who want to easily create a website. Choosing Squarespace comes with pros and cons when making a site accessible for people with disabilities.

Disclaimer

In this post, I share observations about a Squarespace website’s output and its conformance to the Web Content Accessibility Guidelines (WCAG), not the Authoring Tools Accessibility Guidelines (ATAG).

These observations were made during recent client work, which reviewed a Personal Plan subscription that excludes certain customization features, such as code injection (scripting). Additionally, the site reviewed was a basic site that hasn’t implemented e-commerce, so I won’t be covering Squarespace’s e-commerce accessibility.

---

Squarespace Overview

Squarespace is a no-code website building tool that helps people build their website without coding knowledge. Small businesses and individuals choose it for its affordability and ease of setting up a web presence.

Is Squarespace accessible?

Partially.

In the past, Squarespace has not had a good reputation within the web accessibility space. Accessibility professionals have observed, recorded, and been frustrated by issues created by Squarespace websites, which blocked or burdened people with disabilities.

From my recent observations, out of the box, Squarespace has some automated accessibility. They also offer some features that enable creators to make their content accessible. Squarespace isn’t accessible in all things. Creators will have to do some of that work.

That being said, Squarespace needs to continue making progress by accepting feedback from their clients, accessibility professionals, and people with disabilities.

What can you do to make your Squarespace site more accessible?

Creators play a role in their own website’s accessibility. The following guidance I offer is not exhaustive. It advises on first steps to making a Squarespace site, or any other website, more accessible.

Be intentional about headings

Headings of pages and sections are so much more than just large and bolded text. Heading levels create a hierarchy on each webpage that break apart content and offer context about each section. In very basic terms, they create a table of contents for your page by way of heading level 1 (H1), heading level 2 (H2), heading level 3 (H3), and so forth.

Headings offer readers an overview of what’s on a page and how different parts of information relate to one another. It enables people who use robust text-to-speech software (screen readers) to pull up a list of headings on the page, With that same software, headings can be used as bypass blocks to quickly skip from one section to the next.

Bonus: When heading levels are chosen, helpful visual styling (large and bolded text) usually comes along with it.

Make links stand out and easy to understand

Hyperlinks (links) have been around since the early days of the web. It’s one of the most humble, yet useful parts of the web. People associate links as text of a contrasting color with an underline. It works!

At some point in recent web history, links have become harder to spot. They don’t pop out from the text they’re surrounded by. Its underline has been forcefully removed. Some people are left guessing if it’s a link, or completely miss the link altogether.

Links need to be clear and descriptive, informing the visitor where it will take them. Usually the link text matches the title of the pages it goes to. “Read More” is NOT clear and descriptive.

If multiple links on one page lead to the same page (URL), the link text should be the same or very similar.

If “Open link in new tab” has been enabled on a link, that link text should inform visitors that a new browser window or tab will open. Even better, stop forcing your visitors to stay on your site, and let them make the choice to open a new tab or window.

Links are more helpful and accessible when they get to keep their underline. Especially when a link is part of a paragraph or heading. Its underline shouts, “click me!” because it is easy to spot and its function is clear. If you remove the underline, you better make sure your color contrast against the links surrounding text is strong.

Choose colors that stand out when paired together

Color design can feel like a huge undertaking. It takes a lot of planning and thought because the chosen colors may be paired in a variety of ways. I can’t advise on which colors scheme or theme is best for your website. But I can help you become aware of the accessibility barrier that occurs through pairing of colors.

The background and foreground should have good contrast, so people can read your content. This includes text set atop images. WCAG recommends, as a bare minimum, contrast between foreground and background colors should calculate to 4.5:1.

Contrast between interactive components and graphical items should calculate no less than 3:1. That includes checking border colors against background or surrounding colors. This contrast ratio also applies to links without underlines surrounded by text.

Check out the free Colour Contrast Analyzer from TPGi. It’s works on Windows and Mac. The color picker helps you capture foreground and background colors to see if your theme, blocks, and hero images + text are good choices. You may find you have to add in some of your own CSS styling on your website to make sure you’re helping people access your content.

Add alternative (alt) text to images

Think of images as separate content. They can serve many purposes:

• convey emotion,
• replace text,
• enhance the meaning of accompanying text,
• be a visual aid, and
• be a graphic in place of text inside a link or button.

Think about the purpose of your image. Think about what you would say if the image wasn’t there. For visitors with slower or limited internet, sometimes it doesn’t load! For people with visual or cognitive disabilities, sometimes they need a description of that image.

This is Accessibility 101 (and WCAG Success Criterion 1.1.1): Non-text Content.

Describe images through the alt text field. If the image is clickable, describe it’s function (where does it go?). If the image isn’t clickable, rely on its purpose to describe its visual aspects or intent. Always include text that is part of the image.

Rarely should you exclude alt text or make the image “hidden”. Sometimes blind people want to be a part of the whole experience. Read Léonie’s post Text Descriptions and Emotion Rich Images. Even people with usable vision may need additional context, for a variety of reasons.

Squarespace also has an image caption feature to add to the bottom or overlay the image. That can be beneficial to everyone, but be sure it has good color contrast between the text and background color!

Check out the W3C’s An alt Decision Tree for more guidance.

Related: If you include video or audio on your site, you’ll need to provide captions, transcripts, and/or audio description, too.

Be intentional about list items

Lists visually break apart blocks of text, while still connecting related pieces of information together.

Screen reader software notes lists as lists and the number of items in a list. It enables screen reader users to quickly skip between list items via keyboard shortcuts.

Ordered lists (numbered lists) suggest there is a sequence to each item. Unordered lists (bulleted lists) express that items are related, but no sequence is determined.

Image galleries would be a great use case for lists. Alas, Sqaurespace doesn’t enable creators to make them into lists. Nor does it automatically generate those thumbnail images as a list.

Offer a search box and sitemap

The Web Content Accessibility Guidelines (WCAG) has a criterion for this. Adding a search box or a sitemap (a page with a list of pages within your site) offers visitors multiple ways to find content on your site.

Squarespace offers a built-in search feature. But it’s like trading out one accessible part for another, since the search feature isn’t fully accessible. See my next section: What can Squarespace do to improve accessibility?

For a sitemap, you can manually create a list of pages on your site. Don’t forget to keep it updated. Wouldn’t it be nice if Squarespace offered that feature, too?

Improve accessibility of forms

Forms are created for a variety of purposes. To name a few:

• contact form,
• subscribe form, and
• purchase form.

Forms are more accessible when:

• a label (usually text) is coupled with an input;
• focus rings with good color contrast are visible when an input box is in use;
• clear and descriptive error messages are displayed/announced;
• the purpose of input fields is clear (e.g. an email address goes into an email input field); and
• confirmation is displayed/announced when the form is submitted.

Squarespace generates partially-accessible forms, available as blocks. Adjust the settings of your form to make sure:

• input box border colors have good color contrast,
• appropriate input fields are selected to convey their purpose, and
• text labels (not placeholders) with clear directions are given.

Demand accessibility from Squarespace

Once you’ve done what you can to make your site accessible, it’s time to hold Squarespace accountable. Accept that some coding is out of your control, and notify the people who can make change for the good of accessibility.

Remember, if parts of the website generation process aren’t accessible, Squarespace is potentially setting you up for a lawsuit. Squarespace customers should be able to provide feedback and demand accessibility for the parts that are out of their control.

In the next section, I’ll give you some ideas to bring to the people of Squarespace.

What can Squarespace do to improve accessibility?

A Squarespace customer shouldn’t have to jump through hoops to make their Squarespace site accessible. Additionally, they shouldn’t have to pay for a Premium plan in order to access features that improve their site’s accessibility.

This is not an exhaustive list of barriers Squarespace is creating. However, I do offer a few talking points to get you started on holding Squarespace accountable.

Form blocks

When testing a simple contact form, I found one accessibility barrier I couldn’t overlook: The same-page confirmation message. It doesn’t alert screen reader users of the change from form to message. Additionally, it is hard to notice when the screen is magnified. If Squarespace is going to offer this option, they need to make it accessible.

I would be more satisfied if Squarespace would:

• Link their error list to each input error, or move keyboard focus to the first input error, rather than a static list of errors;
• Change the code’s property value of email autocomplete to true to enable autocomplete is available across a variety devices, browsers, and assistive technologies;
• Create a default form submission confirmation page, with good layout, HTML syntax, and design, but allows creators to edit the message, rather than the creators having to create their own page.

Navigation menu button

The navigation menu button, which appears on smaller or zoomed in screens, doesn’t tell screen reader users whether the menu is expanded or collapsed. This doesn’t prevent access to the menu. However, it does withhold important context from people with less vision compared to people with more vision. The creator shouldn’t have to script this code in; Squarespace has the ability to generate this for all sites.

Additionally, the design options of the button are minimal. Creators don’t have the ability to add visible text to the menu button, such as “Menu”, to give clearer meaning to that button’s function. Ask Squarespace to add in a visible label, or allow creators to do so.

Search

Squarespace offers a built-in search function, which is great for accessibility, in general. However, their search block and search page need accessibility improvements:

• The border of the search box has low contrast, by default;
• Quick Preview is not keyboard accessible, which blocks keyboard users from selecting an item;
• The spinner, which indicates a search is processing, is not coded to alert screen reader users that a search is happening;
• Search results appear after a keyword is typed in, not when Enter pressed, but screen reader users aren’t told when the search results appear and how many results are listed.

Image captions

When the dark overlay option is chosen, image captions have poor foreground and background color contrast.

Blog page

The blog page, which lists all the posts a creator has written, appears to pull in code directly from each post page, There are missed opportunities of molding the content to its context, and making a more accessible experience for everyone:

• A heading level 1 (H1) is automatically assigned for each article title, despite the page already having an H1, and the creator has no option to correct this;
• The linked H1 doesn’t have an underline or present in a contrasting color, so the idea that it’s a link could be missed; This can be resolved with custom CSS, but why not just fix it for all creators?
• The linked image and linked heading (and linked Read More, if chosen) are redundant;
• The linked image cannot be unlinked, nor have its alternate text customized.

In the least, Squarespace could give the creator a few more options to help them create a better experience.

404 Page Not Found

Squarespace should allow people to customize their 404 pages. Allowing the creator to add a heading level 1 (H1) and customize font size could help improve accessibility on that page.

Additionally, the page should have a unique page title, so visitors know immediately they are on a 404 page. (I think there’s a joke in here somewhere… “Page title not found”)

Dark mode

It would be helpful if Squarespace offered its clients the option to select two themes at a time: a light mode and dark mode theme. Sure, plugins like that are available on Premium plans. But for the sake of accessibility, every plan should offer built-in dark mode capability. There are several of us out here surfing the web who get headaches when looking at bright, light-colored screens after awhile.

The most important thing to remember about accessibility is respecting user preferences. If a user has customized their font size, color scheme, or anything else, the website should honor those preferences. That is true accessibility.

Accessibility Conformance Report (ACR)

Hold Squarespace accountable by asking for their Accessibility Conformance Report (ACR). They encourage their customers to fill out a VPAT. It makes sense they would have one to share with you, don’t you think?

That’s if you can actually find a direct contact for accessibility within Squarespace, which I’ve had some trouble doing. After poking around their site a bit, I finally found a Squarespace Customer Support contact form, but you have to be logged in to access the form, and it doesn’t include a choice for accessibility feedback/problems.

A note on e-commerce, courses, extensions, and Fluid Engine

No matter what plan you have, it’s time to do your own research concerning e-commerce, courses, extensions, and drag-and-drop.

Start with that ACR you asked Squarespace to give you. Then see what third-party vendors say about the accessibility of their extension. Both may easily make or break the accessibility you’ve worked so hard to implement on your website! Even if they make big promises, you need to test for accessibility.

A word from the wise… adding an extension or widget through scripting that promises it will fix all accessibility problems is not actually going to help you. Following accessibility standards and best practices, consulting people with disabilities, and demanding an accessible site generator will make your website more accessible in the long run. If you need more convincing, take a look at Overlay Fact Sheet and Should I Use an Accessibility Overlay. I even wrote about this 4 years ago in 7 Reasons Why Accessibility Overlays Aren’t a Magical Solution.

Conclusion

Squarespace is one of many content management systems that helps people easily build and maintain their website. When it comes to accessibility, Squarespace has made some progress in automating accessibility. However, it’s clear they need to make more progress for the features they offer.

A website creator and maintainer must actively participate in the creation of an accessible website. Accessibility cannot be fully automated. Humans need to make an intentional choice to include people with disabilities on the web.

Don’t be a WebAIM Million statistic. Do your research about the services you buy. At the same time, learn about people with disabilities and how you can make your site more accessible for all of us.

There is much to learn and much to do, but the first step forward is how you’re going to get there.

Hire Me

I make websites accessible from the start. When people come to me later in their journey, I test and remediate websites, even Squarespace ones, to improve accessibility.

Contact me if you looking for help with the accessibility of your website.