Making your Squarespace 5 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.

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 the Format options in the WYSIWYG editor to create different sized headings. To learn more, visit Adding and formatting text.
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.

Tip: To create screen reader-friendly headings, use the Heading option in the text toolbar instead of changing the font size.

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 Style Mode.

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.

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.

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.

You can add alt text tags to images using custom code.

Note: Adding code to your site is an advanced modification that falls outside of the scope of Squarespace support. To learn more about using custom code on your site, visit Adding custom code.

To add alt text to an image:

1. Go to the page where you added the image and edit the page.
2. In the editor, switch to HTML mode.
3. Scroll to the image and find alt=”” in the image’s HTML.
4. Add the image description between the quotation marks.

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 Engagement couple laughing. Links to engagement photos. For images that require detailed descriptions, like charts, graphs, or complex graphics, include a text description of the image nearby. 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. You can change your site’s colors in Style Mode.

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.

Audio

You can help visitors with hearing impairments access your audio content, like podcasts, by adding a transcript. To keep your pages organized, add a text link to a hidden page containing the transcript.

Video

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.

Squarespace 7 comparison

Our current version of Squarespace has some built-in features to help create an accessible site, including designated fields for alt text and a focus outline to help visitors navigate a site with a keyboard. To learn more, visit Accessibility resources at Squarespace on our Squarespace 7 Help site.

To learn more about switching to Squarespace 7, visit Squarespace 5 vs. newer versions.