7 Tips for Squarespace Accessibility (+ accessiBe Plugin Review)
In this post I’m sharing tips for improving your Squarespace website’s accessibility, plus a review of one of the best Squarespace accessibility plugins too.
As a Squarespace website designer of over 8 years, I’m constantly trying to make sure I’m aware of and educating myself about the various compliance guidelines and best practices in our industry - whether that’s for GDPR rules, or requirements around website accessibility.
Table of Contents
Disclaimer: accessiBe have kindly sponsored this blog post, but all opinions are my own and I don’t share anything I don’t personally recommend. This post may also contain affiliate links where I receive a commission for any paid software purchased.
What is website accessibility & why is it important?
Website accessibility is such an important aspect to designing websites - whether you’re a website designer (like me!), or you’re DIYing your own site.
A website shouldn’t just look pretty - it should also be practical and functional - which is why I have my signature 3S approach when it comes to website design (prioritising Simplicity, Style AND Strategy).
This means being functional for ALL people, including those with disabilities, vision impairments, auditory/motor disabilities, or different access needs. Why?
Remove barriers, be more inclusive & make the internet a great experience for all!
Comply with web accessibility regulations such as WCAG
Reach a larger audience with your brand & services
Search engines prioritise accessible websites, so improving accessibility can directly improve your SEO
It doesn’t have to be difficult! A few small changes to your Squarespace website can heavily improve its accessibility…
1. Clearly organise your content
The way you structure your website pages with headings and subheadings really matters, but thankfully Squarespace makes this really easy.
When you’re adding headings to your webpages and blog posts, make sure you use the correct hierarchy of (Heading 1, Heading 2, Heading 3), without mixing up different heading types. This is common on DIY websites where people mix up headings just to achieve a different font style, but it’s better to adjust this in your site styles/design settings!
This structure is important because assistive technologies such as screen readers will use this heading structure to follow the content.
Also prioritising clear page layouts and making sure things like text and buttons aren’t overlapping is really important for anyone using a keyboard only navigation.
2. Make your text accessible
As well as using the correct structure for your headings, below are some additional tips for ensuring the text on your website is readable for all:
Write concisely and avoid jargon
Use subheadings and bullet points to help text be easily scanned (e.g. this blog post!)
Avoid using text embedded into images (it’s better to use actual text blocks)
Using bold, italics and emojis can enhance your content, but don’t let your text rely on these to convey meaning (e.g. don’t replace actual words with emojis)
Choose fonts that are easily readable
PLEASE don’t make your fonts too small! (pet peeve alert)
Use adequate line spacing to improve readability.
3. Optimise images
I’ve written before about optimising images for your website, as this is really important for the performance and SEO of your site as well.
However, the most important thing you need to do to ensure accessibility compliance is to add ‘alt text’ (alternative text) to the settings of your images when you add them to your website pages.
This text is read out by screen readers and other assistive technologies, and is displayed if someone is accessing with slow internet connection too, so it’s really important to describe the image you’ve added in the ‘alt text’ area.
E.g. The alt text for the below image could be: ‘Browsing Pinterest on a laptop’
(It doesn’t need to include ‘an image of…’ within the alt text, and should be less than 250 characters)
4. Choose colours carefully
Making sure there is enough contrast between different colours (for example when adding buttons to your website, or adding text to colour backgrounds) is important to ensure the text is readable.
You can use a contrast checker tool like this to test if your colour palette is suitable!
5. Navigation & links
To allow different assistive technologies to navigate around your website easily, there are a few important things to implement:
Page Titles
Add a ‘Page Title’ to every webpage, as this is the first thing screen readers will read when they land on a page (unless an SEO Title has been added, which will override the Page Title). These should be relevant & clearly explain the purpose of the page, and should also be unique to each page.
Links
As well as making text links visible enough by ensuring they are a readable size, and having some kind of contrast (eg. a different colour or underlined), if you are adding hyperlinks to text, make sure to use descriptive labelling for that linked text.
Eg. Write this: “To learn more, head to my about page.”
Rather than: “Click here to learn more about me.”
6. Videos & media
If you’re embedding video content on your website, and there is speech within the video, always be sure to add captions or a transcript. This is generally good practice for all content (in case people are listening with the sound off, and it makes it easier for many people to consume), but also is essential for making it accessible to those with auditory disabilities.
Try to avoid videos that ‘autoplay’, or content with lots of motion or flashing lights too.
7. Use a Squarespace Accessibility Widget (eg. accessiBe)
There are also Squarespace plugins (accessiBe is an example of one!) that you can add to your website that means a user can land on your website, the plugin’s software automatically adjusts different aspects or elements of the website to their unique needs (it does this within the individual user’s browser, rather than it affecting your website for everyone), helping your website comply with WCAG and the Americans with Disabilities Act (ADA).
This technology is awesome as it means you can create a customisable, accessible experience on your website for everyone!
How to Add accessiBe to Squarespace
accessiBe is incredibly easy to add to your Squarespace website - all you have to do is sign up for a free trial, put in your website url, update it with your brand colours, and it will provide you with a snippet of code to install on your website.
Copy the code, and head into your Squarespace website. Go to Website > Pages, and scroll to the bottom where you’ll find Website Tools > Code Injection.
Paste the copy into the ‘Header Code’ area, and click save!
Now, on your live website you’ll see your accessiBe tool in the corner, where any use can click and adjust their settings to their own accessibility needs.
accessiBe Review
Installation
I couldn’t believe how easy it was to add accessiBe to my Squarespace website - it really was just a case of copying and pasting a few lines of code.
I particularly loved that it was available in different languages, I was able to customise the colours to fit my own brand, preview how the widget would look on desktop or mobile, AND it generates accessibility statements for you too.
Features
This Squarespace accessibility and ADA compliance extension uses a combination of computer vision and AI technology to create user interface and design adjustments for the individual user when they access your website. This tool can:
Run accessibility audits/scans of your website with recommendations
Alters your website’s appearance for visually impaired, and even has an ADHD mode!
Offers multiple color, sizing and content adjustments for a range of access needs
Can auto-generate image alt text, links and form labels using AI
Makes keyboard navigation accessibility adjustments
And more!
Try accessiBe’s Squarespace Accessibility Plugin for Free
accessiBe has a 7 day free trial that you can sign up for, and get installed within just 2 minutes, giving you access to all the features mentioned above and more (including the accessibility audit too).
