Guide to Web Accessibility and ADA Compliance for Squarespace
Guide to Web Accessibility and ADA Compliance for Squarespace
In this post, we share tips on how to help make your Squarespace site accessible and explain why that matters for accessibility laws like the Americans with Disabilities Act.
Last Updated: April 2023
If you run a Squarespace website, you probably spend a lot of time optimizing your site to improve your reach and drive more leads or sales.
But have you thought about the accessibility of your site? Or how accessibility issues like missing alt text and low color contrast can affect the one in four U.S. adults who live with some type of disability?
Just 3% of the internet today is accessible to people with disabilities. It’s a big gap that needs to be closed, but also a huge opportunity for businesses that focus on accessible design — or the practice of building sites that can be used by everyone, regardless of ability.
In this guide, we explain the importance of web accessibility, discuss the latest legal requirements, and share tips on how you can help make your Squarespace site more accessible.
Want to see where you stand today? Get a free scan of any URL to identify accessibility issues on your site →
Why Does Digital Accessibility Matter?
According to a report by Statista, revenue from retail e-commerce in the United States was $856.8 billion in 2022 — more than double the revenue in 2017. By 2027, that number is projected to exceed $1.5 trillion.
Unfortunately, most e-commerce sites — including many built on Squarespace — are not accessible to people with disabilities.
Almost every website we tested had accessibility issues, but e-commerce sites performed worse than most: 83% had severe accessibility issues, including the inability to view product descriptions, make a purchase, or book an appointment.
It’s not like these issues were limited to a single product image or page, either. On average, e-commerce sites had 203 issues per page — and 20% of those issues were severe enough to impact a user’s ability to complete key tasks.
"Accessibility really doesn’t have to be this hard, scary thing. If you take some steps and do this today, your website will stand out as being exemplary."
Chris | AudioEye A11iance Member and Internet Security Professional
So what does that mean for businesses?
Beyond the reputational hit that can come from a web accessibility-related lawsuit, there’s also an opportunity cost to accessibility barriers.
According to one study, people with disabilities — along with their friends and family — control up to $13 trillion in disposable income. If your website is riddled with accessibility issues like missing alt text or keyboard traps, these would-be customers may end up shopping elsewhere.
Does My Squarespace Website Need To Be ADA Compliant?
There are plenty of reasons for Squarespace sites to prioritize accessibility. Not only is it good for business, but it’s also the right thing to do.
However, there’s another aspect of web accessibility that should not be ignored: the rising threat of legal action, in the form of demand letters and lawsuits.
For the fourth consecutive year, plaintiffs filed a record number of web accessibility-related lawsuits in federal court. In total, the number of lawsuits has risen from 814 in 2017 to 3,255 in 2022, as reported by Seyfarth Shaw LLP.
It isn’t just large enterprise brands getting sued, either. Every business should be checking their website against international accessibility standards like the Web Content Accessibility Guidelines (WCAG).
In 2022, the Department of Justice (DOJ) published new guidance reiterating its position that web accessibility is a requirement under the Americans with Disabilities Act (ADA) — and recommended that businesses use WCAG when testing web content for accessibility.
Related Reading: Learn more about WCAG conformance and the Americans with Disabilities Act →
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 accessibility issues when designing your site or adding content.
So, how can you tell if your Squarespace site is accessible — and whether it conforms with accessibility standards like WCAG? 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.
You can also manually test your site. As a best practice, we recommend that you work with assistive technology testers to better understand the user experience; however, you can also try simulating the experience yourself:
- Navigate using only your keyboard: Many people today browse websites without the use of a mouse, whether they have a motor impairment or rely on assistive technologies like screen readers. Try using your keyboard to browse your site, whether it’s pressing the Tab key to jump between elements, pressing the Enter key to activate buttons and links, or using arrow keys to change selections in open dropdowns and pre-selected radio buttons.
- Increase the size of text on screen: In order to read 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 inside your template’s site styles.
- Preview each page title: 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.
- Test the accessibility of your forms: Enter incorrect data on your forms to make sure that error messages are clear and don’t rely on visual cues alone. For example, using color to indicate a missing or incorrect form entry is inaccessible to screen reader users or people with color vision deficiencies, or color blindness.
Five Tips for Building a More Accessible Squarespace Website
Squarespace offers multiple ways to provide a more inclusive browsing experience, many of which are aligned with the best practices of accessible design. Here are five tips to keep in mind as you consider your site’s design:
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 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 or 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.
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 →
Take the Next Step Toward a More Accessible Website
Squarespace offers plenty of design flexibility and a large selection of customizable templates, but there’s always the risk of a designer or developer accidentally introducing an accessibility barrier.
That’s where the technology, expertise, and services of a solution like AudioEye come into play. Our hybrid approach to web accessibility — which blends the best of automated testing and human expertise — allows us to automatically find and fix most common accessibility issues before a page loads. And our team of certified experts is ready to deliver manual remediations that solve 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.
Ready to test your website for accessibility?