Note: While our most popular guides have been translated into Spanish, some guides are only available in English.

Making your Squarespace site more accessible

Accessible websites are easier for people with disabilities to experience when using screen readers and other assistive technologies. You can customize many aspects of your site to make it easier to navigate.

Use this guide to learn best practices for designing and structuring your content. 

Note: This guide is available as a resource to help you get started, but shouldn't be construed or relied upon as legal advice. Squarespace can't provide advice about making your site compliant with any specific accessibility laws, regulations, or standards.

Page titles

The first thing screen readers communicate when users go to a new webpage is the page title. Since page titles are important for orientation, ensure every page has a title that introduces the page's topic or purpose, and differentiates it from other pages on your site.

Text

Headings

Screen readers use HTML code instead of visual elements to understand a page's structure. When using a screen reader, visitors can navigate pages more easily when each section of the page has a heading. Use the text toolbar to format text as headings.

To learn more about page structure and headings, visit the Web Accessibility Initiative.

Do
  • Use headings based on the importance of the text. For example, use Heading 1 (h1) for the most important headings. 
Don't
  • Rely on text embedded in images to convey meaning unless you also add alt text.
  • Rely on bolding, italics, or other design formatting to create structure.

Links

Ensure your visitors can find the purpose of each link solely from the link's text. This formatting benefits screen reader users who may want to jump between links without losing the context. Properly formatting links also helps improve SEO. You don't need to Include the word link in the link's text. Most screen readers say link before each link. For example:

Do “To reach out, visit our contact page.”
Don't

“To reach out, click here.

Spacing

Ensure your text has adequate line spacing. This way visitors can override your line spacing to suit their needs and improve their reading experience if needed. You can control letter spacing and line height in Site Styles.

Images

The Internet is a visual medium where images can play a significant role in the presentation of your site. Ensure your images are accessible to your visitors, regardless of their abilities. Elements like alt text and how you format animated images or .gifs are important to keep in mind.

Alt text

When scanning a page, screen readers identify images and read the descriptive text (alt text) to visitors. When adding alt text, take a moment to consider why you’ve used the image in the first place. For example, is it to convey information, or is it decorative? What do visitors with vision impairments need to know about the image to access all the information available to sighted visitors?

A best practice is to briefly describe the image as you would to a friend over the phone. Purely decorative images, like graphics separating content or abstract background images, don't require descriptions.

Do
  • Consider the purpose of the image and try to convey that meaning in 125 characters or less.
  • If the image has a clickthrough URL or any other functional use, describe the function. For example, alt text for an image of an engaged couple laughing that links to a page with engagement photos could be Engaged couple laughing. Links to engagement photos.
  • For images that require detailed descriptions, like charts, graphs, or complex graphics, include a description of the image nearby in the text of your site. As an alternative, you can add a separate page containing a description of the image, then add a clickthrough URL from the image to that page.
Don't
  • Include phrases like “an image of” or “a picture of” in your alt text. Assistive technologies automatically identify them as images.

Animated .gifs

You can add animated images or .gifs to most areas of your site. Ensure your animated .gifs don't flash three or more times in a one second period. This type of content is known to cause seizures or other physical reactions.

Colors

Avoid relying solely on color to convey information to your visitors. Color differences can be missed by people with low vision or color deficiencies, and color alone doesn't convey meaning to blind visitors using screen readers. To change your site's colors, use Site Styles.

You can use Google Chrome's Developer Tools or Firefox's Accessibility Inspector to simulate how your pages appear to people with common color vision impairments. Note these are third-party tools that fall outside the scope of Squarespace support. 

Do
  • Group colors with high contrast.
Don't
  • Pair colors that are difficult to differentiate, like blue and purple.

Videos

Add synchronized captions using the integrated closed captioning features for YouTube and Vimeo. This way, viewers can enable or disable captions from in the Video Block. Visit YouTube and Vimeo for more information on adding captions. Avoid content in your video that flashes three or more times in a one second period.

Audio

You can help visitors with hearing impairments access your audio content, like podcasts, by adding a transcript. To keep your pages organized, you may want to include transcripts on Not Linked pages.

FAQ

Is my site accessible?

Accessibility requirements differ around the world. You're responsible for ensuring your site complies with applicable laws, including local accessibility requirements. One way to understand your site’s accessibility and identify areas for improvement is to consult an accessibility specialist. You can also review this preliminary web accessibility checklist. Squarespace Customer Support can't provide advice about making your site compliant with any specific accessibility laws, regulations, or standards.

Is Squarespace working to improve accessibility?

Yes. Squarespace takes accessibility seriously. We're always looking to improve, and this work is ongoing. We’re committed to making our services more accessible to users of all abilities. We're in the process of reviewing our services to improve user experience and to make it easier for our customers to make their sites accessible. 

Can I customize the focus outline?

Squarespace sites have a built-in focus outline feature that highlights items on a page, like navigation links and form fields. The outline appears when site visitors press Tab on their keyboard. This focus outline is standard across all sites and pages, and it's not possible to customize the line’s color or thickness.

Page navigation header with an outline around one of the menu items

Was this article helpful?
189 out of 234 found this helpful
Making your Squarespace site more accessible