How to Make Your Squarespace Website ADA Compliant

With nearly four million subscribers generating almost $800 million in annual revenue, Squarespace is one of the most popular content management systems (CMS) for online sellers.

For e-commerce sites, digital accessibility is a critical part of making sure that every potential customer can view product images, add items to their cart, and complete purchases.

However, accessibility issues like missing image alt text and keyboard traps can make it harder for people with disabilities to shop online. That can have a big impact on a business’ bottom line, especially when you consider that one in four U.S. adults lives with a disability.

Why Does ADA Compliance Matter for Websites?

The Americans with Disabilities Act (ADA) is a landmark civil rights law that prohibits discrimination against people with disabilities in all areas of public life. Although the ADA does not specifically mention web accessibility, the Department of Justice (DOJ) has regularly stated that websites qualify as “places of public accommodation.”

Each year, thousands of companies face litigation for alleged web accessibility issues, including major corporations like Domino’s and Hy-Vee, Inc. And while the ADA doesn’t include specific technical standards, the Department of Justice (DOJ) has referenced the Web Content Accessibility Guidelines (WCAG) as a reasonable standard for compliance.

How Can I Make My Squarespace Website ADA-Compliant?

It’s now standard for e-commerce platforms like Squarespace to provide a number of accessibility features out of the box. However, these features alone won’t make your website accessible — especially if you accidentally introduce other accessibility issues when designing your site or adding content.

So, how can you tell if your Squarespace website is accessible, and to what degree? Here are a few tips to get you started.

Check Your Website’s Accessibility

You can start by using AudioEye’s free website accessibility checker to scan any page on your website. Our checker runs more than 400 tests to help you identify accessibility issues on your site.

Putting yourself in your users’ shoes is a great way to test your site’s accessibility and user experience. You can do this by navigating your website like an end user might. Here are a few ideas to get you started:

1. Navigate using only the keyboard. The Tab key should jump your cursor focus top to bottom in logical order down the page, highlighting each interactive element. Then, test all of these functions: press the Enter key to activate buttons and links, the spacebar to select or deselect checkboxes and radio buttons, and the arrow keys to change selections in open dropdowns and pre-selected radio buttons.
   
2. In order to read text comfortably, some users need to be able to change the way it is displayed. This includes changing the text size, spacing, font, and color. Zoom in your browser to see if content overlaps. If it does, you can adjust letter spacing and line height in site styles.
   
3. Hover over and read the browser tab when a page is loaded. Each tab should have a unique title that clearly explains the page’s purpose.
   
4. Enter incorrect data on your forms to check if the error messages are clear and help fix the problem. Make sure you’re using an indicator other than color to denote errors.

Not sure how to get started? Learn about AudioEye’s approach to manual testing and remediation.

Five Tips for Building an Accessible Squarespace Website

Your website should provide an equal experience for all users — regardless of their abilities, preferences, or the tools they use to browse the internet.

With that in mind, here are four tips to help you make your Squarespace site accessible to all users:

1. Include page titles: Squarespace lets you add a page title to every page. The title is the first thing a screen reader will announce when it lands on a page. Including an accurate, descriptive title for each page will help orient visitors and let them quickly determine if they’ve reached the right page and want to keep reading.

2. Use headers: For general readability, we always recommend breaking up large blocks of content into smaller sections. However, it’s also important to remember to use headers and maintain proper header order. Screen readers will announce each header, and it can be confusing for users if you skip heading ranks.

On Squarespace, you can use the text toolbar to format text as headings.

Pro Tip: You can use formatting (like bold and italic font) to draw attention to a particular word or phrase, but you shouldn’t use it in place of proper header structure.

3. Use alt text: Alt text is a written description of an image that screen readers can read out loud — or convert to Braille — for people with visual impairments, sensory processing disorders, or learning disorders.

Done right, alt text can paint a complete picture of a website for people who cannot perceive images visually.

Unfortunately, many designers and content creators forget to provide alt text. Or they write something so non-descriptive — like an image of a menu that is simply labeled “menu” — it might as well not be there.

Click here to see more alt text best practices →

4. Write descriptive links: Descriptive links help users understand where clicking the link will take them. Screen reader users often navigate emails by going from link to link, so providing links that make sense is an important part of the user experience.

For example, an inline link like “To reach out, click here.” can leave screen reader users wondering where exactly they’ll be taken. Instead, try writing “To reach out, visit our contact page.”

5. Avoid using color alone to convey information: A common UX practice is to convey information using color, whether it’s setting a different color for links or adding a red outline to indicate errors. Unfortunately,  color differences like this can be missed by people with visual impairments.

As a best practice, we recommend underlining inline links and avoiding any kind of status update (such as an error or success message) that relies on color alone.

Want to check your color contrast? Try using AudioEye’s free Color Contrast Checker →

Deliver Ongoing Accessibility With AudioEye

Squarespace offers plenty of design flexibility and a large selection of customizable templates, but these templates may not be accessible. Remember: Each time you update your website, you run the risk of introducing a new accessibility error.

That’s where the tools, skills, and services of a solution like AudioEye come into play. Our hybrid approach to digital accessibility — which blends the best of automated testing and remediation and human expertise — allows us to find and fix most accessibility issues on page, and manual remediations for the trickiest accessibility issues.

In 2022, AudioEye joined forces with Square ADA, a web accessibility firm dedicated to Squarespace websites, to offer a sustainable accessibility solution for the rapidly growing number of Squarespace websites.

Want to learn more? Check out how AudioEye’s solution seamlessly integrates with Squarespace or get a free scan of your website to uncover accessibility issues on your site.