Squarespace Accessibility: 10 Steps to Improve Your Site
Have you ever had a bad website experience?
Texts were hard to read, navigation options were confusing, images wouldn’t load. You felt frustrated and unwelcome by the whole experience.
Here’s the bad news:
Your website may feel easy to use for you. But to a disabled person, it may feel exactly like your worst website experience.
There are 1.3 billion people with significant disabilities in the world. That’s 1 in every 6 of us. Yet, only 2.6% of websites are accessible.
Web accessibility is not only important for ethical reasons. There’s a strong business case for it with benefits such as improving SEO, creating an overall better user experience, and protecting your business from accessibility lawsuits.
In this post, we’ll share 10 easy steps to improve accessibility for your Squarespace site.
Are Squarespace Websites ADA Compliant?
Squarespace websites are not ADA-compliant by default.
While Squarespace provides a solid foundation with built-in features, the responsibility primarily lies with you. How you design your website, structure content, and add media determines the overall level of accessibility.
For example, some common ADA compliance issues on websites are:
Insufficient color contrast between text and background.
Missing alt-text for images, making them inaccessible to screen readers.
Confusing navigation.
Complex forms or layouts that are difficult for people with disabilities to navigate.
Videos lacking captions or transcripts.
Let’s look at simple actions you can take to improve your website’s accessibility.
Squarespace Accessibility Tips
1) Sufficient Color Contrast Between Texts and Background
Without enough contrast, people with color blindness and reduced visual function can’t read your content.
The contrast ratio between the text and its background should be at least 4.5 to 1. You can check your color contrast ratios with WebAIM Contrast Checker.
If you have a live website, use Toptal’s Colorblind Simulator to view what it looks like to people with color blindness. Other tools with similar functions are Google Chrome's Developer Tools and Firefox's Accessibility Inspector.
2) Don’t Rely on Color Alone to Convey Information
Always combine color with other visual cues like text labels, shapes, or patterns. When highlighting important information, don't just change its color – also make it bold, italicized, or underlined. This way, people with color blindness, low vision, or other visual impairments don't miss out on crucial information.
3) Multiple Navigation Methods
Users with low vision may prefer using search over reading a large menu. Meanwhile, users with cognitive impairments may prefer a site map over clicking through many pages. To give everyone a good experience, give multiple ways to locate a page:
Navigation menu
Search bar
Footer’s site map
Breadcrumbs
Table of contents
Links to important pages on homepage
4) Indicate User’s Current Location On The Site
People with short attention spans or those arriving directly on a specific page may need help understanding where they are within your website. Make navigation effortless with these techniques:
Breadcrumb trail: Provide a visual path showing their location within the site's hierarchy.
Active link styling: If you have a small website and all the pages can be accessed from the navigation bar, add a styling element to indicate the active link (eg. underline, bold).
Sitemap: Have a sitemap page that contains links to all webpages on the site and add a link to this page on the footer.
5) Same Label for Same Destination
We often use creative calls to action to entice clicks. However, using different labels for the same function can create confusion and potential errors for users who rely on screen readers or have cognitive disabilities.
To ensure a seamless experience, interactive elements (like buttons) that lead to the same destination should always have identical labels on every page. This eliminates guesswork and enhances usability for everyone.
6) Descriptive Link Text
Vague link text like "click here" or "learn more" is bad for SEO and usability. They offer little context about the destination. This experience is especially awful for screen reader users who navigate by links.
Instead, write descriptive link text that clearly indicates where the link will lead.
Here’s an example:
Bad: For more information, [click here].
Good: Learn about our [sustainability initiatives].
7) Use Image Alt-Text Correctly
Alternative text (alt-text) is essential for users who cannot see images, whether due to visual impairment, slow internet, or browser settings. Here's how to write effective alt-text:
Be descriptive, but brief: Aim to accurately convey the image's content and its purpose within your page, ideally in under 250 characters.
Avoid redundancy: No need to add "image of..." or "picture of...". Screen readers will announce that automatically.
Focus on context: Describe only the part of the image that is relevant to the information you’re trying to convey.
Alt-text for links: If an image acts as a link, the alt-text should describe what clicking the image will do (e.g., "Learn More," "Download Brochure," etc.), not the image itself.
For graphs and diagrams, include the detailed description in texts near the graph/chart, or provide a link to a separate page with the data table.
8) Provide Captions And Transcripts For Videos And Audio
Providing captions and transcripts not only assists individuals with auditory disabilities, but also enhances the experience for all users in situations where sound isn't possible. For optimal accessibility:
Include both captions and transcript. Captions are the synchronized text displayed within the video itself. Transcripts are a separate text document with spoken words and descriptions of non-speech audio/visual cues.
Prioritize accuracy. Auto-generated captions are helpful, but often contain errors. Review and edit them carefully, especially for technical or specialized content.
Consider offering transcripts in multiple formats (plain text, PDF) for broader accessibility.
9) Headings Represent the Content Structure
Headings (H1-H6) do more than just style your text. They provide a clear outline of your content. Proper headings dramatically improve navigation for screen reader users and help search engines understand the organization of your content.
Here’s how to use headings effectively:
Focus on structure, not appearance: While headings influence visual appearance, prioritize their role in accurately outlining your content's structure.
Indicate importance: H1 for your main page topic, and H2s for major sections. Use lower-level headings (H3, H4, etc.) for subtopics within those sections.
Maintain hierarchy: Don't skip levels. An H4 should be nested within a relevant H3, and so on.
10) Page Title Describes Topic or Purpose
Screen reader users heavily rely on page titles within sitemaps and search results to navigate content. Clear and distinct page titles make it easier for screen reader users to find the right content quickly.
To ensure your page titles are accessible, review your sitemap for identical and overly similar titles. Revise these to differentiate the content of each page clearly.
Next, check each page individually. Does each title accurately summarize the main topic of the page? Avoid generic titles that could apply to multiple pages.
For longer titles, place the most descriptive keywords toward the beginning so screen readers can hear these words first.
Accessibility is an Ongoing Journey
Accessibility isn't a one-and-done checklist. It's an evolving process best approached with empathy and a commitment to continuous improvement. To learn more, check out the Web Content Accessibility Guidelines (WCAG) 2.0 which provides the internationally recognized standard for web accessibility.
