When you’re building a new website, you need to make dozens of decisions. Choosing the right font, color scheme, and layout can help to ensure the success of your brand — but if you don’t have much experience with web design, you may look for a simple alternative.
Squarespace offers one such alternative. With ready-built templates, the service has quickly become one of the most popular website builders, particularly for small businesses.
However, even if your site uses a professionally designed template, you’ll still need to think about accessibility. Webmasters have an ethical and legal responsibility to accommodate users of all abilities, and if your site ignores the best practices of the Web Content Accessibility Guidelines (WCAG), you risk non-compliance with the Americans with Disabilities Act (ADA) and other non-discrimination laws.
And since accessibility benefits every user, prioritizing WCAG will help you provide a consistent experience for your visitors. If you’re a Squarespace user, here’s what you need to know.
Avoiding Common WCAG Issues When Designing in Squarespace
WCAG is the international standard for accessibility for a reason: It provides straightforward guidance for creating online content that accommodates many disabilities. Published by the World Wide Web Consortium (W3C), WCAG covers common accessibility barriers including:
- Improper use of headings (or h tags), which are intended to define the structure of a page
- Missing captions and transcripts for multimedia
- Using color or visual appearance alone to convey meaning
- Keyboard accessibility issues
- Forms with missing labels and instructions
- Low-contrast text
Many Squarespace templates meet basic WCAG requirements — but the company doesn’t claim that every template and plugin meets WCAG, and you shouldn’t assume that your template is accessible by default. As the site owner, you’ll need to evaluate templates and plugins carefully and change them as needed to prevent potential compliance issues.
Related: The 5 Most Common Website Accessibility Issues (And How To Fix Them)
A Quick Overview of Squarespace’s Accessibility Features
Before discussing some of the accessibility challenges of Squarespace, let’s discuss some of the platform’s benefits.
If you don’t know much about web development (and you’d prefer not to learn), Squarespace has quite a few features that improve accessibility. For example:
- All Squarespace websites are responsive, which ensures that they function as expected on screens of different sizes.
- Squarespace offers numerous options for changing colors and resizing text.
- Squarespace supports (and encourages) the proper use of headings, which are important for people who use certain assistive technologies.
- Squarespace supports keyboard accessibility with built-in focus outlines and “Skip to Content" links that appear the first time the visitor presses Tab on their keyboard.
However, some templates and plugins may not fully conform with WCAG by default, which is why research — and accessibility testing — are extremely important.
Squarespace’s features are limited, which may make some WCAG fixes more difficult
From an accessibility perspective, the main drawback of Squarespace is that users have limited control over certain aspects of their sites. The site builder doesn’t support third-party plugins or extensions, and some templates only offer limited customization.
When writing your content in the site builder, you’ll have access to a few options for changing your font, adjusting the size of your text, and making other basic changes. To make more significant changes, you’ll need to use custom CSS (Cascading Style Sheets), which can provide more control over colors, fonts, and backgrounds.
CSS is a powerful tool for accessibility, as it allows designers to change the visual appearance of a page without changing its structural markup (HTML). However, writing CSS requires some coding knowledge.
If you’re comfortable working with CSS, review Squarespace’s guide for its CSS Editor. Note that custom CSS won’t transfer if you switch to a new template.
Related: How CSS Benefits Accessibility
Even on Squarespace, accessibility requires commitment
Ultimately, whether you’re using Squarespace or any other site builder, it’s your responsibility to make your content accessible. Before making any changes to your website, you should consider how those changes might affect your users.
For example, if you change the background colors of a page, you might not meet WCAG’s requirements for color contrast. This can impact users with color vision deficiencies (sometimes referred to as color blindness), who might not be able to read the text.
Likewise, Squarespace provides tools for adding alternative text (also called alt text) to images, but if you don’t write accurate descriptions for your images, people who have vision disabilities won’t be able to enjoy your content.
If you’re not designing for accessibility, you’ll probably make mistakes — regardless of the quality of your template. Fortunately, WCAG provides a simple way to avoid those mistakes.
Find (and fix) accessibility barriers by testing your content regularly
The Bureau of Internet Accessibility’s free website analysis tests your website against WCAG 2.1 Level AA guidelines, and it’s an excellent first step towards accessibility compliance. While automated tests have limitations, they’re useful for checking color contrast, image alt tags, and other common issues.
Finally, when building your website, remember the four foundational principles of digital accessibility: Content should be perceivable, operable, understandable, and robust. If you’re new to digital accessibility, read about the four principles of WCAG and keep them in mind when designing.
For guidance with your Squarespace website, send us a message to connect with our accessibility experts or download our Ultimate Guide to Web Accessibility eBook.
