How To Make Your Squarespace Website ADA Compliant
Note: This blog post contains affiliate links, however, I only recommend brands that I use and love.
There’s so much more than just pretty website design when it comes to attracting new people to your website and to your business. You want to develop a website that is accessible for all. That way, you can attract more people to your business than ever before. Through this blog post I cover a few different ways to make your website accessible to more people and ADA compliant. Take a look below!
What is ADA?
The American’s with Disabilities Act, commonly referred to as the ADA is “a civil rights law that prohibits discrimination against individuals with disabilities in all areas of public life, including jobs, schools, transportation, and all public and private places that are open to the general public. The purpose of the law is to make sure that people with disabilities have the same rights and opportunities as everyone else.” Source - https://adata.org/learn-about-ada. Being inclusive and creating an accessible brand should always be a priority for your business, it gives everyone equal access to your business or service and by giving everyone equal access you strengthen your community. The Web Content Accessibility Guidelines are a great tool to reference when making sure your site is accessible. Its main goal is to “provide a single shared standard for web content accessibility that meets the needs of individuals, organizations, and governments internationally.”
What this means for you as a business owner
If you have a brick and mortar location you need to make sure that people have equal access to your business. For example, a wheelchair ramp or parking space with extra room for a person to get in and out of their car with extra space etc. And even if you are not brick and mortar, the same thing applies to your website: you must give people equal access to the information and services/products you offer, just in a slightly different way, or face being sued. As Kris Rivenbrough points out in his article “Web Accessibility for Beginners” there are 38 success criteria to aim for, for example each page of a website needs to have a unique and descriptive page title - you can read all of them here. You risk being sued if your online business is not fully ADA compliant so be sure to check and then double check the 38 criteria linked above!
What this means for your website
Giving people equal access to the content, products and services offered on your website means taking a step back and considering the ways in which people access all your content.
Here are some things to consider: If someone is hearing impaired and you have a video on your website, does the video include subtitles/closed captions? If someone is using an eye gaze device for navigating your site and not a mouse or trackpad, can they properly access the content on your site by clicking through each link one by one? If someone is vision impaired, is the contrast of color great enough for someone to be able to see all the information? Perhaps the user is blind and requires a screen reader to use your website, is your website structure set up so that the information translates clearly?
How is your website doing?
Not sure how any of this applies to your website? Check out this super handy tool, WAVE, that lets your put your URL in and it will give you an overview of how accessible your website is: https://accessible.org/ (this link insertion was sponosred by accessiBe). If you’re a web designer or developer you will likely be able to understand the problem areas and how to fix them, or if you know of one it might be a good idea to ask them to look at your website for you! If you’re not sure how to make these changes you can and should at the very least focus on the areas that Kris Rivenbugh points out in his Article “Web Accessibility for Beginners”:
Adding alt attributes to all of your images (and including alt text values for all of the meaningful images)
Making sure your website is navigable by keyboard only (you can unplug your mouse and still fully use your website)
Programmatically adding labels to all of your form fields and controls (e.g. your contact form has labels bedded in the code)
How to apply these accessibility focus areas to your Squarespace website
Alt tags for images:
Alt text is text associated with an image that some browsers display instead of the image, it is extremely helpful at assisting those who use assistive screen readers or who have disabled images in their browser. Alt tags are also great for an SEO boost as well, so there are many reasons why you should incorporate them into your website. There are different ways to add these to your images and you can find step by step instructions on how to do so, as well as more information about alt tags overall here.
Video captions
Consider adding closed captions to your video content or a written transcript. Captions make the video accessible to hearing impaired, transcript makes it accessible to both vision and hearing impaired individuals. There are many online services that offer to add these to your videos if you can’t get them uploaded yourself.
Keyboard only navigation
In order to test your keyboard navigation system, unplug your mouse and try to navigate through your website using only the TAB, SHIFT+TAB, SPACE, ENTER and the LEFT, RIGHT, UP, and DOWN arrow keys. The goal is to successfully navigate and access all of the pages using only those keys. Keep in mind that a common place that can cause errors with keyboard navigation are forms or hidden links and code on your site. Make sure to test each page on your site for keyboard only navigation.
Content Structure
Structuring your website content correctly allows page navigation for users who might use a screen reader or eye gaze device. In order to ensure that your site is accessible you’ll want to make sure your content is organized properly.
Thankfully, Squarespace has a built in content structure which you can access from your tool box when editing your text. You will see the following:
Heading One
Heading Two
Heading Three
Normal
You need to have the Heading One be the title of the page, for example “About Me”, heading two will briefly explain the page “I am a designer, mom and surfer” then moving down in body copy which should be normal.
Colors
Lastly, make sure that you have even a contrast between colors when they are next to each other. For example a button with text on top of it. The color of the button background needs to have enough contract for the button text to be read easily. Larger text usually tends to need less contrast than small text. If you notice that your colors aren’t contrasting enough, you can edit them in the ‘design’ section of your Squarespace site.
Questions? Comment below!
Check out these other Resources regarding website Accessibility and the ADA:
The ADA Checklist: Website Compliance Guidelines for 2019 in Plain English
WAVE Web Accessibility Evaluation Tool
Website Accessibility for Beginners
Transform your Squarespace website into an inclusive masterpiece effortlessly with accessiBe!
Say goodbye to the dilemma of choosing between Squarespace aesthetics and accessibility. With accessiBe's cutting-edge AI-driven technology, your Squarespace site seamlessly becomes ADA compliant, aligning with the WCAG 2.1 AA standards.
No need for a Squarespace redesign! accessiBe's automated solution works behind the scenes, remediating your Squarespace website's code without compromising its stunning design. Embrace Squarespace accessibility effortlessly with accessiBe.
