Get Your Free Accessibility & Inclusion Toolkit
Download NowSquarespace is one of the top web design platforms, with over 6,500,000 live websites created. The platform also has several built-in tools to create accessible Squarespace websites. So, it’s a popular choice for website creation.
However, you also need a firm understanding of the strategies and best practices you can put in place to strengthen your website accessibility. That’s essential for creating an inclusive internet, building a strong reputation with consumers, and meeting regulations. Whether you’re a web developer or UX designer, this guide will explain what you need to know.
What are the guidelines for Squarespace accessibility?
As with Wix, WordPress and other web builders, you should aim to brush up on WCAG. Created by W3C, it stands for Web Content Accessibility Guidelines and is widely considered the gold-standard in digital accessibility. It contains a clear set of recommendations for creating websites that are fully accessible to disabled people.
There are different iterations and levels of the WCAG. However, WCAG 2.1 Level AA is typically the best standard to work towards. It’s also the most widely used on websites around the world.
When applying WCAG guidelines, stay aware of the “POUR” principles, which define what good accessible content should be:
- Perceivable – Can all users perceive your website in a way that meets their needs?
- Operable – Can all users navigate and operate the interactive elements of your website?
- Understandable – Can all users understand the different elements of your website, including buttons, links and text?
- Robust – Is your website compatible with assistive technologies and will it continue to be as the tech develops?
Get a free automated accessibility check of your websites homepage. This will identify and highlight any compliance issues on your website. Followed by recommendations on how to implement the necessary changes to make your website more accessible.
The most important elements for accessible Squarespace websites
Although the WCAG recommendations are vast, there are a few key elements you can focus on to make a start.
Text & readability
From your About page to product listings and case studies, much of your website will consist of text. To make your Squarespace website accessible, you need to ensure all audiences can read the text content of your website, including disabled web users.
Some important things to tackle include:
- Checking your text can be read with a screen reader and other assistive technologies.
- Sticking to short paragraphs and sentences, and avoiding complex language or jargon to be accessible to people with cognitive disabilities.
- Creating a clearly delineated structure, with headings and bullet points to split up the text.
Colour and contrast
It’s tempting to go wild with colour when designing a Squarespace website. But sadly, your favourite colour scheme might not always be the best option for accessibility.
If text has low colour contrast compared to the background, visually impaired people can find it hard to read. So, an all cream and light beige scheme might look visually appealing, but typically won’t have enough contrast for all audiences.
WCAG 2.1 Level AA recommends a minimum contrast ratio of 4.5:1 for average-sized text. That also includes images of text the same size. If the text is large (i.e., 18pt or above) or 14pt bold, you’ll need to meet a ratio of at least 3:1. Colour contrast checkers are a good way to test out where your website stands.
Images and alt text
Image content is another important part of your website, but not all web users can see it. To improve your accessibility, you need to add descriptive alt-text to the image. This means a description of the image can be read aloud by screen readers.
Not all images require alt-text, e.g., if the image is purely a decorative pattern or background. But if viewing the image affects the webpage’s usability or meaning, it should have alt-text.
Again, this text must be descriptive, providing useful information to the reader to help them understand what the image conveys. For example, “bus” is not descriptive enough, but “red London double-decker” provides more detail.
Videos and multimedia content
From a product demo video to an audio podcast, media content gives website users a deeper glimpse into your business and its products/services. But what about people who struggle to hear? They might miss out on hugely important information from the audio tracks.
Fortunately, there’s a relatively simple solution. Adding synchronised captions to the videos on your Squarespace site makes them accessible for all. You can also add a downloadable transcript for both video and audio content.
Website navigation
We might assume that all web users navigate through websites with a mouse and keyboard. But for people with visual or motor impairments, that’s often not possible. These groups may use their keyboard alone to move through, and between, webpages.
If your website is not fully navigable (and functional) by keyboard, then it neglects the needs and preferences of many disabled people. To resolve this, all interactable elements, including all menus and buttons, must be operable with just the Tab, Arrow and Enter keys.
Ensure buttons and links are described clearly and descriptively too. This is important as assistive technologies may read out webpage content to visually impaired web users. That includes interactive content like links and buttons.
Focus indicators
Focus indicators help disabled web users to pinpoint the element on your website that is currently selected. This is very useful for people who use their keyboard exclusively or assistive technology rather than a mouse. It establishes the user’s position on the web page, and defines what they can interact with.
The indicator might look like a shadow underneath or outline around the focused element. Website elements that may feature a focus indicator include links and form fields. Squarespace has a “focus outline” built into the platform, with two contrasting colours for extra visibility.
Website forms
Web forms are essential to the functioning of most websites. They allow visitors to book sessions, sign up for newsletters, and make customer queries. Without accessible forms, disabled people are restricted in how they use your website. Aside from issues of discrimination, this could impact your bottom line.
So, how can you improve the accessibility of your forms? You should aim to:
- Ensure forms are fully keyboard-functional
- Error messages should be displayed clearly
- Label form fields clearly for screen readers
- Make sure form field labels are linked up correctly with HTML
Does Squarespace offer built-in accessibility features?
Yes, Squarespace has several built-in accessibility features, including:
- Keyboard accessibility: The platform has built-in features to assist keyboard users, including a focus outline and a “Skip to content” feature for users to bypass elements at the top of the page.
- Captions: There are options to add captions to video content, as well as audio transcripts.
- Easy to add alt-text: Squarespace makes it easy to add and adjust alt-text for your images, with set fields provided.
If you want to pinpoint images without alt-text on your site, the SEO Report feature can also come in handy. It’s not specifically an accessibility feature, however.
Although Squarespace has some out-of-the-box accessibility features, you should avoid relying on these alone. You’ll need to take an active role in improving your website inclusivity. That includes brushing up on WCAG, continuously checking your website for issues (both with software and manually) and taking accessibility training.
Using accessibility tools to build Squarespace websites
Squarespace accessibility can be daunting to implement. But it doesn’t have to be. Sometimes part of the battle is knowing what to fix and how to fix it. Accessibility tools can save you time and make it easier for disabled people to engage with your website.
Locate issues with a website accessibility checker
If you’re new to accessible web design, then it can be difficult to know where to start. Don’t just assume you know what needs changing. Use a website accessibility scan to check your website. This can search for potential breaches of WCAG compliance, and explain the steps you can take to put it right.
Recite Me offers a free website accessibility checker that covers images, PDFs, and other website elements, with AI features to make quick changes.
Follow up with an accessibility checklist
Automated tools can speed up your web accessibility strategy. But they’re not infallible. You should always plan in a manual once-over after using accessibility software. This double checks that the software hasn’t missed anything.
Accessibility checklists can be helpful at this stage, as they take you through the steps one-by-one. Recite Me’s downloadable website accessibility checklist is free-of-charge, and includes forms, video accessibility, and other important areas.
Give web users control with an assistive toolbar
Adding an assistive toolbar to your website is another great way to improve inclusivity. Not every person will have the same accessibility needs. So, it’s a good idea to give web users a level of control over how they interact with your Squarespace website. Recite Me’s assistive toolbar includes options to tweak everything from colour contrast to enabling text-to-speech.
Learn more with digital accessibility training
Make sure your team has a strong understanding of digital accessibility through online training. No matter the changes to your website, clued-up developers and content creators will have the knowledge to continuously improve your website accessibility. For example, Recite Me offers free web accessibility training courses that you can get today.
How do accessible Squarespace websites benefit businesses and end users?
Neglecting online accessibility is a poor business practice. Web accessibility comes with a whole host of benefits, for organisations and web users alike.
Achieving digital diversity
At its core, web accessibility is about celebrating diversity. Nearly 1 in 4 people in the UK have a disability, and most will be web users. Accessible Squarespace websites work towards making the net inclusive.
Benefits for businesses: Businesses with a strong moral compass will appreciate the ethical benefits of creating a fair internet for all.
Benefits for end users: Digital accessibility ensures that all web users can enjoy the internet and access websites just as their able-bodied peers do.
Wider market reach
If your website is not accessible, you’ll be missing out on the so-called “purple pound”, which refers to the lucrative spending power of disabled people and their loved ones.
Benefits for businesses: By creating an accessible website, disabled people will be able to use it to buy your products or hire you.
Benefits for end users: You might be surprised at how many disabled people are frustrated at not being able to access their favourite brands or organisations online. Web accessibility helps them to connect with the businesses that matter to them.
Inclusive reputation
Creating an accessible website has the knock-on effect of developing your reputation as an inclusive company.
Benefits for businesses: Ethical, inclusive brands are more likely to foster brand loyalty and positive feedback online. That’s especially important when the alternative is a discriminatory and uninclusive digital footprint.
Benefits for end users: Seeing brands stand up for online accessibility and take real action can have a real-world impact. It can help to encourage discussions about disability rights and accessibility issues in everyday life, and help disabled web users feel supported and valued.
Staying compliant
Meeting web accessibility guidelines such as the WCAG helps you to stay compliant and avoid legal ramifications.
Benefits for businesses: Companies who work to meet accessibility requirements ensure they don’t fall foul of disability protections, such as the Equality Act 2010. In turn, that avoids the loss of money and reputation that comes with a hefty lawsuit.
Benefits for end users: This ensures that disabled web users can use your website, feel valued as a customer/client, and not face additional challenges when accessing content online.
Our 40-page Digital Accessibility & Inclusion Toolkit helps businesses break down online barriers and make a real impact. It offers practical advice on all aspects of digital accessibility, from writing an accessibility statement to accessible website tips and inclusive hiring.
Conclusion: Make your Squarespace website accessible
With several built-in accessibility options, Squarespace is a good place to start for an inclusive website. But it shouldn’t be your finishing point. For true accessibility on your Squarespace website, you need to continuously develop your accessibility practices.
Feeling stuck? Start with a free website accessibility scan to pinpoint any existing inclusivity issues. Alternatively, if you need something more tailored to your company, Recite Me’s experienced accessibility consultants are on hand to advise you.
Squarespace accessibility FAQs
Looking for a recap or quick summary? Here are a few of our most frequently asked questions to help you get to grips with the essentials:
How do I make my Squarespace site accessible?
There’s no one-size-fits-all solution to make your Squarespace website accessible, as all disabled web users will have different needs. As a rule, you should aim to meet the WCAG 2.1 Level AA standards. These include recommendations for web design issues such as colour contrast, font, and webpage structure.
Are all Squarespace websites ADA compliant?
No, not necessarily. Ultimately, it depends on lots of different factors, including the accessibility of the website theme and its elements. You shouldn’t automatically assume compliance, but there are steps you can take to improve the ADA compliance of your Squarespace website.
How to make a Squarespace website more accessible for the disabled?
There are several steps you can take to make your website more accessible for disabled people, including:
- Increasing text colour contrast to 4.5:1
- Adding descriptive alt-text to images
- Adding captions and transcripts to videos
- Adding visible labels to form input fields
- Including an accessibility toolbar
