Back to blog

A Guide to Squarespace Accessibility and ADA Compliance

Posted April 15, 2022


Posted April 15, 2022

Squarespace logo next to a webpage
Squarespace logo next to a webpage

Digital accessibility is a requirement for Squarespace websites. Learn how to make your site ADA compliant. Check for basic accessibility features.

With almost 4 million subscribers generating more than $600 million in annual revenue, Squarespace is one of the heavy hitters of the online shopping world. 

And like all e-commerce platforms, Squarespace sites need to be digitally accessible to people with disabilities. So whether you’re a seasoned e-commerce merchant, or just now opening the online store of your dreams, take the time to make your Squarespace website is accessible and compliant with the Americans with Disabilities Act (ADA).

Wepage with accessibility errors

The Importance of an Accessible Online Presence

What is the secret to building long-lasting customer relationships in this digital age? Most would agree it is creating exceptional digital experiences. And accessibility is a critical part of an online experience. 

If you have barriers to accessing your content and/or product, your customers, regardless of ability, will get frustrated, click away, and go to your competitors.

All consumers are after the same thing: getting the information they need to make better purchasing decisions and completing their online purchases smoothly. If you want to gain new customers and grow your business, prioritize removing barriers and creating accessible and inclusive experiences for all customers. 

According to the 2020 Report The Global Economics of Disability, people with disabilities, along with their family and friends, control more than $10 trillion in disposable income. But if they can’t access your site, you can’t earn their business. More than that, businesses with sites that fail to comply with current accessibility standards can face costly and time-consuming legal action.

Wheelchair icon, braille, and accessibility man icon on the left with the text ADA The Americans with Disabilities Act was enacted in 1990. on the right.

How Can I Make My Squarespace Website ADA-Compliant?

The ADA was enacted in 1990 to remedy accessibility issues in the physical world (think rails and ramps, braille signs, and wide doors). As the internet grew, the ADA became applicable to business websites. For a website to be compliant with the ADA, it must be accessible to people who browse the web with assistive devices, such as screen readers. 

While the ADA doesn’t provide specific guidance on how to create accessible websites, the Department of Justice (DOJ) instructs businesses to follow the Web Content Accessibility Guidelines (WCAG), accessible website design best practices published by the World Wide Web Consortium (W3C).

Check out four web design principles of accessibility and AudioEye's ebook full of tips on how to best design your website for accessibility.

Making Your Squarespace E-commerce Website Accessible

It’s now standard for e-commerce platforms like Squarespace to start you with a few basic accessibility features. Unfortunately, these don't come close to making your site ADA-compliant or giving your customers with disabilities an exceptional user experience. Squarespace offers users some accessibility tips, but that doesn’t include site-specific support to make your content more accessible.

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

Webpage with labels for Headings, Keyboard Focus, Image Alt Text, Buttons and Form Fields, Functional Elements, and Color Contrast

Auditing Your Website

You can start by doing a quick audit of the key areas of accessible website design that tend to produce a lot of common recurring problems. You can also use AudioEye’s free website accessibility checker. Check the following key areas of accessibility and their impact on user experience:

  • Buttons and Form Fields: If buttons and form field labels are missing, not descriptive, redundant, placeholders, or presented as icons, then assistive technology (AT) can’t determine an accessible name for the button and overlooks it. 
  • Headings: If headings are missing, out of order, not descriptive, or used decoratively, then the heading structure is confusing for navigation and users won’t get to the right page.
  • Image alt text: If the image alt text for a picture is missing, not descriptive, redundant, or is the image’s filename, then it doesn’t provide any useful information for assistive technology.
  • Functional elements: If functional elements like user interface (UI) changes are missing (expanding/collapsing accordion, open/close dialogs), then someone using assistive technology cannot navigate this page to find out if they can, say, change a delivery address.
  • Keyboard focus: If keyboard navigation and focus order are not intuitive or have missing interactions — e.g., the “Open dialog” not working — then the user can't enter their information to join the email list.
  • Color contrast: If your site’s color palette doesn’t reflect an accessible color contrast ratio, then AT users and people with visual impairments won’t read your text or use site navigation and UI elements. The more contrast you have between your text and UI elements and background colors, the more accessible your website is. Use AudioEye’s Color Contrast Checker to see if your website meets WCAG requirements.

These are just a handful of the many ways to check for your site’s accessibility gaps. You can continue your journey towards full accessibility by reviewing our accessibility checklist to help you make the best accessible design decisions for your business.

Manual Audits and Fixes

Putting yourself in your users’ shoes is the best place to start testing accessibility and usability. Do this by manually using, testing, and validating your website in different ways and with various media. Here are a few ideas: 

  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. Now, test all of these functions: the Enter key to activate buttons and links, the space bar to select or deselect checkboxes and radio buttons, and the arrow keys to change selections in open dropdowns and preselected radio buttons.
  2. Zoom in your browser to 200%. If content overlaps and is made illegible, change the browser window width. 
  3. Hover over and read the browser tab when a page is loaded — each tab should have a unique title explaining 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.

Ongoing Accessibility of Your Website

Squarespace gives you near-bottomless design options with an endless selection of customizable templates, but these templates may not be accessible. Never forget that every time you tweak your site or change its content, the code changes. Every time you update your site, you could be creating accessibility issues. 

This is where the tools, skills, and services of providers like AudioEye are not just useful but critical, providing continuous automated testing and fixes, coupled with accessibility experts when complicated solutions are required.

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

Squarespace websites showing an AudioEye Accessibility Score of 94

Accessibility Is Smart Business

The digital world never ceases to evolve. And as people increasingly turn to shopping online, now more than ever it’s necessary for businesses to open both their physical and digital doors to all users.

The AudioEye solution is seamlessly integrated with Squarespace. Check it out and try for free.

Ready to test your website for accessibility?

Scan your website now.

Share post


Keep Reading