9 Tips to Make Your Squarespace Website More Accessible
A designer’s guide to website accessibility
Creating a website is extremely easy these days. With all-in-one tools like Squarespace, you can have a website up and running in minutes.
But creating an accessible website? That’s a whole different story. Unfortunately, most websites out there don't cater to the needs of the over 1 billion people with disabilities around the world. This makes their online experience tough, and it's definitely a challenge that needs addressing.
Today, we’ll go over the concept of website accessibility and discuss some tips to make your Squarespace website more inclusive.
What is website accessibility?
Simply put, website accessibility refers to the design and functionality of a website that allows anyone who visits the website to navigate and interact with its content easily. An accessible website takes into account the diverse needs of users, making everyone feel welcome and included.
Making your website accessible is not just about avoiding legal issues and complying with regulations — like the Web Accessibility Directive in Europe or the Americans With Disabilities Act in the United States. It’s also about improving the overall user experience for everyone, committing to inclusivity, and making the internet a better place.
On top of that, an accessible website can also help you reach a wider, more diverse audience, strengthen your brand, and build trust around your business. Improving accessibility also helps your search engine optimization (SEO). So, it's essential to make sure your Squarespace website is accessible to all.
Top 9 tips to make your website more accessible
Now that you know why you should strive for accessibility when designing your website, let’s go over some tips that will help you achieve it.
Choose your color palette carefully
Colors are used to convey your brand identity, but that’s less important than making sure everybody in your audience is able to go through your content.
So, the first step to building an accessible website is to choose a high-contrast color palette. This will allow individuals with low vision or color deficiencies to see the text on your website clearly. You can start by picking a dark color for your text and a light color for your background, or vice versa.
Mind that the low contrast between the background and the text is hard to read and tiring for everyone.
If you want to verify the color contrast on a Squarespace website, you can use WebAIM’s Color Contrast Analyzer tool. This tool will ensure that there’s enough contrast between the background and the text.
2. Choose the appropriate fonts and sizes
Using fancy fonts can add a touch of personality to your website, but it may not be the most user-friendly choice. While serif fonts may be aesthetically pleasing, reading them can be challenging for people with dyslexia or visual impairments.
To make sure your Squarespace website is accessible, you should use clear and easy-to-read fonts — that is, fonts that are sans serif and have a high-contrast ratio. Some of the best fonts for website accessibility are Arial, Tahoma, Verdana, and Trebuchet MS.
Font size is also essential. To improve readability, you should use a minimum size of 16 pixels for Serif fonts and 14 for Sans Serif fonts.
If you want to check if your font meets accessibility standards, you can download the WhatFont Chrome extension.
The decorative script fonts are growing in popularity among the website DIY’ers. If you choose to use them, do it only for embellishment, for example for some short headings (1-3 words). Long sentences and large chunks of text in script fonts are absolutely unreadable.
3. Add alt text to images
Alt text provides a written description of an image that assistive technologies can pick up. It's not just people with visual disabilities who benefit from alt text, but also those with cognitive disabilities who may have an easier time understanding spoken language than visuals. Additionally, individuals using voice assistants, who may not be able to see the web page, can also take advantage of alt text.
When it comes to adding alt text to your images, it’s best to keep it short and sweet — preferably 250 characters or less — and to be as descriptive as possible. Also, there’s no need to use formulas such as “An image of…” or “A picture of…” because assistive technologies identify images for users.
It is easy to add alt text to images on Squarespace. In the page edit mode, click an image, click the pencil icon, and fill out Image alt text.
4. Caption your videos, add transcripts, and limit auto-play
When it comes to making your video and audio content accessible to all, captions and transcripts play a crucial role. Captions help those with hearing disabilities by providing visual context for what is being said in the audio. Transcripts, in turn, allow visitors to get all of a video’s information even if they aren’t able to view or listen to it. You can add a transcript as a downloadable file, as text on the page, or on a separate page.
Another best practice around video accessibility is to avoid having many moving images and rapidly changing effects on your website, as they can have a negative impact on people with motion sensitivity or sensitivity to flashing lights. To improve your video accessibility, limit auto-play and avoid background videos that are too flashy.
5. Include page titles
On Squarespace, you can add a page title to every page on your website. That title is the first thing assistive technologies, like screen readers, will announce to visitors when they land on a page. Including an accurate, descriptive title on each of your pages can guide visually impaired visitors and help them determine if they’ve reached the right page and want to keep reading.
To add or edit your page titles on your Squarespace website, open the Pages panel, hover over the page, and click the settings (little gear) icon next to title. Then, in the General tab, add or edit the Page Title. Remember that your page titles must be 100 characters or fewer, and they have to be as descriptive as possible.
6. Organize your content
How you organize the content on your website matters, especially for users relying on assistive technologies. To make it easier for them to access your content, aim for simple and consistent page layouts. Most Squarespace templates are built with accessibility in mind.
Also, don’t forget the structure of your blog content is crucial. Make your pages easy to follow by using header hierarchy (e.g., H1, H2, H3), and avoid relying on bold or italic text to distinguish different sections or convey meaning. Another good practice is to limit each page to one H1, as it represents the title or headline, and use heading levels in sequence.
7. Make navigation seamless
Using a keyboard or a mouse to navigate a website is not an option for some users. Many people rely on speech recognition software, head wands, adaptive keyboards, and other technology to browse the internet. So, your website needs to be designed to support them.
Here are a few simple steps you can take to help people navigate your site:
Make sure your whole website is keyboard-friendly, this will allow users to access every part of your site with ease.
Use visual indicators to help users know where they are on each landing page.
For pages that are quite content-heavy, split the content into small digestible sections and use lists whenever possible.
Ensure your website layout is easy to navigate and intuitive.
Making navigation seamless and intuitive can provide all visitors with a better user experience, regardless of how they consume the content on your website.
8. Make links accessible
When adding links to your website, it's important to use descriptive language instead of generic phrases. Screen readers and other assistive technologies rely on clear and descriptive language on links to help users understand the content they're navigating to. Writing a descriptive link, such as "Learn more about Squarespace accessibility," is more helpful than using a generic phrase like "Click here."
Another good practice when it comes to accessibility and links is to make them stand out by underlining them or using a color contrast with the background. This helps increase visibility for users with visual impairments. Also, make sure that links are large enough to be easily clickable for those with mobility difficulties.
9. Work with a designer who understands accessibility
If you want to cover all the bases and make sure your website is fully accessible, you should consider working with a Squarespace website designer who understands website accessibility.
Accessibility standards and regulations provide guidelines for creating user-friendly websites that are easy to navigate and understand for everyone — and your website should comply with them. A designer with experience in website accessibility will understand these guidelines and know how to implement them.
Working with a Squarespace designer who understands the importance of website accessibility will give you peace of mind by ensuring your website is an open book to all visitors and that you are meeting the appropriate standards. Moreover, it will help to establish your brand as a responsible and forward-thinking business that values the needs of all its customers.
So, there you have it! By implementing these tips and building with accessibility in mind, you’ll be able to create a website that everyone can enjoy.