What does having an accessible website mean?
For your Squarespace website to be considered accessible, it will need to accommodate all visitors and customers, including those with disabilities. To that end, it needs to conform to prominent web accessibility standards. These include specific instructions that, when adhered to, ensure that your Squarespace website is configured and designed so that it provides an equal browsing experience to people with disabilities.
The most important set of web accessibility guidelines are the Web Content Accessibility Guidelines (WCAG), which also have a deciding impact on the way global web accessibility policy is shaped. Created by the World Wide Web Consortium (W3C), WCAG is a complex protocol that consists of numerous sections (or success criteria) your Squarespace website should conform to. As a whole, WCAG is based on four fundamental principles:
- Perceivable: Your website visitors need to be able to perceive content on your Squarespace website with their senses of sound, sight, and touch
- Operable: People need to be able to operate your Squarespace website regardless of their ability. An operable Squarespace website needs to be navigable entirely by keyboard, sight-assisted navigation, and numerous other mouse alternatives
- Understandable: Your Squarespace website needs to be easy to understand. It shouldn’t contain complex jargon or overly technical terms, and should be free of complicated instructions that are difficult to follow.
- Robust: A robust website is one that is compatible with assistive tools, such as screen reader technology, and which uses HTML and CSS according to specification
WCAG versions and levels
Throughout the years, there have been a number of WCAG iterations:
WCAG 2.0 was released in 2008, while WCAG 2.1, an updated version of these guidelines and the most up-to-date, was released in 2018. The first draft of the next version of these guidelines, WCAG 2.2, was initially released in February of 2020, and was officially published on October 5th of 2023.
WCAG 2.0 and 2.1, along with the soon to be published WCAG 2.2, all have three levels you can conform to:
- Level A - the lowest level of conformance
- Level AA - the conformance level referenced in most accessibility regulations around the world
- Level AAA - the optimal and most difficult level of conformance to achieve
It is recommended that your Squarespace website conforms to WCAG 2.1 Level AA.
To conform to WCAG 2.1 at that level, your Squarespace website needs to meet a number of technical and design-based requirements.
These include, but certainly aren’t limited to:
- Keyboard only navigation
- Compatibility with screen reader technology
- Responsive design
- Proper contrast between text and background colors
- Online documents that are accessible to people with disabilities
We will dive deeper into these requirements next.
How do you make your Squarespace website accessible?
Ensuring your Squarespace website is accessible is a multi-step process. You need to address various technical and design-based elements within your website and tweak them so that they accommodate every one of your website visitors. Let’s dive deeper into this process:
Use a proper headings hierarchy
Headings play a vital role in organizing web content. You can think of them like chapter titles and subheadings in a book — they help break down the sections and subsections of a web page. They go from H1 (the most important or main title) to H6 (the least important), creating a clear structure for your content.
For people using screen readers (like JAWS and NVDA), it's really important to apply headings correctly. These tools explain to users where specific headings are throughout the page, allowing them to understand the way content appears and flows within a page.
It is important to use headings in the correct order. A H2 heading should appear before a H3 heading, and you shouldn’t skip straight to a H4 header. Additionally, you should avoid using headings to style your text, as this can be confusing for screen reader users.
Add alt text to meaningful images
Alt text, or "alternative text," plays a vital role in making websites more accessible. It involves adding a short description to an image's HTML tag on a web page. This description is then read aloud by screen readers, allowing users to understand the image, the information it conveys, and its context within a web page.
It's worth noting that alt text should only be used for meaningful images. These are the images that provide important information to website visitors.
Meaningful images include pictures of products and services. Images that appear purely for decorative reasons, on the other hand, should be hidden from assistive technologies and shouldn't have alt text assigned to them.
When writing alt text for product and service images on your Squarespace website, it's important to go beyond simply stating the item's name. Instead, focus on describing what the item is or what it looks like.
Press here to learn about the various ways you can add alt text in Squarespace.
It is recommended to keep your alt text at eighty characters or less. You can use this character calculator to see exactly how long your alt text is.
Select contrasting colors
People with color blindness and other vision impairments can have a hard time accessing and understanding text that doesn’t contrast sufficiently with its background color. Whatever creative choices you take with your Squarespace website, you need to account for visitors of all abilities.
The color contrast between text and its background color on your website should be 4.5:1. A contrast ratio of at least 3:​1​ is enough for large-scale text and images of large-scale text.These are the color contrast ratios required under WCAG 2.1 Level AA.
You can use color ratio testing tools, such as WebAIM’s Contrast Checker, Coolors, and Adobe’s Contrast Checker to make sure your website adheres to these ratios.
Color contrast for non-text elements
Color contrast requirements under WCAG 2.1 Level AA — which is the level of WCAG conformance you should aim for — apply not only to text and its background, but also to other visual elements within a website.
Such elements include graphical objects, interface components, and significant icons that are instrumental in website visitors’ ability to consume and understand information.
Examples of significant icons you will need to ensure contrast sufficiently with their background include, but are not limited to:
- Home icon: The home icon, often represented by a house silhouette, is commonly used to signify the homepage or main landing page of a website. It serves as a visual cue for website visitors to return to the starting point or navigate back to the main content
- Menu icon: The menu icon, typically represented by three horizontal lines stacked on top of each other (resembling a hamburger), is used to indicate the presence of a navigation menu. When selected, it expands to reveal additional options or pages, allowing users to easily navigate through the website
- Magnifying glass icon: The magnifying glass icon is a recognizable symbol for search functionality. It is often placed in the header or navigation area of a website and allows users to search for specific content or information within the site
- Envelope icon: The envelope icon, resembling a sealed envelope, is widely recognized as a symbol for email or messaging. It is commonly used to represent a "Contact Us" or "Send a Message" feature, enabling visitors to get in touch with the website owner or send inquiries
- Input fields: Input fields, typically appearing within online forms, need to be distinguishable from surrounding content. One method is to provide borders that offer a sufficient contrast between the color of the border and their background.. This will highlight the exact dimensions of the input field and enable users to quickly identify, and distinguish, each control within the form
You can read more about selecting accessible color contrasts in this blog.
Use legible fonts
For your Squarespace website to be accessible to everyone, you will need to consider the kind of fonts you incorporate within it. Fonts have a significant impact on the readability of a website, particularly for individuals with vision and cognitive impairments.
There are a few factors to keep in mind when selecting an accessible font:
- Font weight: Fonts that are too light may be challenging to read, while overly bold fonts can be overwhelming. Striking a balance between legibility and aesthetics is key
- Font size: A font should be large enough so that all website visitors can easily read the text. Small font sizes can make reading difficult, especially for those with visual impairments who may require larger text for better readability
- Font style: Simple and clean fonts are often the best choice for accessibility. Elaborate or decorative fonts can be harder to read, particularly for individuals with cognitive impairments or reading difficulties. Prioritizing clarity over intricate styles can enhance inclusivity
You can check out our guide on selecting accessible fonts here.
Use descriptive anchor text
Anchor text is interactive text that is tied to a hyperlink. For website visitors with vision impairments who rely on screen readers, this anchor text relays essential context about the hyperlink's destination. As the screen reader vocalizes this text, users can discern if engaging with the link is relevant to their interests.
Anchor text should be informative, substantial, and should offer a clear depiction of the target page's content.
For instance, instead of using a generic and less descriptive anchor text like "Click Here," a more suitable example would be "Read Our Recent Blog Post on Sustainable Living." This gives those who rely on screen readers a clear understanding of what they will find if they decide to use the hyperlink.
Add captions, transcripts, and audio descriptions for meaningful video content
Videos are commonly used in Squarespace websites to display products and to showcase various features.
If you feature meaningful videos on your Squarespace website, it is crucial you add captions, transcripts, and audio descriptions to them.
Captions are the on-screen text descriptions that display a video's dialogue or sounds, and are vital for individuals with hearing impairments. They allow these website visitors to follow along and understand the content conveyed in the video.
Transcripts, which are the textual representation of everything said and any meaningful sounds in the video, serve a similar purpose. They also offer an alternative way to consume the content for people who prefer reading or are in a situation where they can't watch the video with the audio on.
Finally, audio descriptions are additional narrations that describe the visual elements of a video. These descriptions provide information about actions, settings, gestures, facial expressions, and other important visual details that are essential for a complete understanding of the video's content. Audio descriptions are typically inserted during pauses in the audio track, ensuring that individuals with vision impairments can fully comprehend and enjoy the video without interrupting the flow of the content.
How to add captions, transcripts, and audio descriptions to video content on Squarespace
You can use one of four video players with Squarespace: YouTube, Vimeo, Wistia, and Animoto. Let’s break down how you can add captions, transcripts, and audio descriptions to each of these:
- YouTube: YouTube offers built-in closed-captioning features. However, these can often prove incomplete or wrong, so it is highly recommended to create your own captions. These can serve as transcripts, as well. YouTube doesn't have a built-in tool for audio descriptions. Therefore, you need to create a separate audio track describing the video's visual elements and upload it
- Vimeo: Vimeo offers automatic closed captions for videos in which the preferred language is set to English. However, here too, it is recommended to upload a file with the captions you have written manually. You can press here for further instructions on how to do that. You will need to integrate with a 3rd party plugin to add audio descriptions. Alternatively, you can create a separate a video that includes the audio description and then link to it beside the main video
- Wistia: Wistia’s closed captions are fairly accurate (they claim a 92% accuracy rate). However, to ensure you meet caption requirements under WCAG, you should upload an SRT file with manually edited captions. You can press here to learn how to add audio descriptions to Wistia videos
- Animoto: For the most part, Animoto videos do not showcase spoken word. Therefore, much of your efforts here will be focused on adding audio descriptions. You can do that using Animoto’s voice-over feature. If your Animoto video features spoken word, you will need to add captions and a transcript
Make sure your online documents are accessible
Online documents, such as PDFs, are sometimes linked to from Squarespace websites. Whether it is an eBook, digital brochure, product catalog, or any other document you feature on your Squarespace website, you need to ensure everyone can properly access them.
For the most part, for online documents to be considered accessible, they need to be compatible with screen readers. Users of such tools need a PDF and Microsoft Office document to be properly tagged, a process that you can read about in more detail py pressing here.
Besides tagging, your online documents should also feature the following elements to be considered accessible:
- Readable, large font
- Adequate color contrast between text and background
- Alt text for meaningful images, if those are featured
- Descriptive link text
You can read about testing PDFs for accessibility in this blog.
If your online documents aren’t fully accessible, you will need to remediate them. Remediating online documents can prove challenging, time-consuming, and costly for website owners. Therefore, many Squarespace website owners rely on expert service providers, such as accessServices, to remediate their online documents for them. With an intimate familiarity with relevant web and PDF accessibility guidelines, expert service providers are better equipped to handle these projects in a timely and cost-effective manner.
Learn how accessServices can help you with your document remediation needs.
What built-in accessibility features does Squarespace offer?
Squarespace is a destination platform for those looking to create stunning websites with minimal effort. The website builder offers thousands of stunning templates that you can lightly modify and go live with quickly. However, for the most part, these templates do not automatically include ARIA labels. A core element of an accessible website, WAI-ARIA is critical for keyboard navigation and screen reader users.
You can add ARIA labels manually to your Squarespace website. However, knowing where to and how to apply them requires significant technical expertise.
It is therefore recommended you use a web accessibility tool, like accessWidget.
accessiBe’s flagship tool, accessWidget can be easily integrated into your Squarespace website to automatically audit your website’s code and detect accessibility issues existing within it. Once these are identified, accessWidget will automatically remediate the code, ensuring your website is accessible.
accessWidget also empowers your website visitors to adjust your Squarespace website themselves. When added to your website, people with various disabilities can use accessWidget’s interface to tweak design elements to fit their own unique needs. These include, changing font types and sizes, stopping animations, adjusting color contrasts, and enabling a text-only mode, among other cool options.
Learn more about how accessWidget can help make your Squarespace website accessible.
Why you should care about making your Squarespace website accessible
16% of the world’s population has some form of disability. However, the disability community is still met with significant barriers when attempting to access websites.
It is our responsibility, as website owners, to ensure that we accommodate every type of visitor, including those who have disabilities.
It is worth noting that when your Squarespace website is accessible, you expand your audience base considerably, allowing a group with a collective spending power of over 13$ trillion to spend money on your goods and services.
Web accessibility legal obligations
If you are a business operating in the United States of America, Canada, or the European Union, you may be legally obligated to make your Squarespace website accessible.
Several U.S. courts have applied the Americans with Disabilities Act (ADA) to the online domain, referencing WCAG as the standard to which websites need to conform to in cases involving web accessibility. You can read more about that in our ADA website compliance checklist.
Under Section 508 of the Rehabilitation Act, governmental bodies, federally-funded organizations, and service providers to such organizations must ensure that their websites conform to WCAG 2.0 Level AA. You can read more about that in our Section 508 website compliance checklist.
If your business is registered in the province of Ontario, Canada, you will likely need to comply with the Accessibility for Ontarians with Disabilities Act (AODA). Under the AODA, your Squarespace website must conform to WCAG 2.0 Level AA. You can read more about AODA compliance requirements in our AODA website compliance checklist.
How to test your Squarespace website’s level of accessibility
To examine whether your Squarespace website is accessible, you can use automated testing tools, such as accessScan, and rely on expert service providers, like accessServices.
To use accessScan, you will need to submit your Squarespace website’s URL, after which accessScan will run a quick, automated audit of your web page and check whether it conforms to WCAG 2.1 Level AA. After the test is complete, you will be presented with detailed results that will help you address website elements that are non-accessible (if any exist).
