Squarespace Accessibility Tips
Accessible websites are parsable by screen readers and other assistive technologies. While some aspects of your site’s accessibility are controlled by your template’s underlying code, there are many things you can do to make it easier for visitors with a different vision and movement abilities to access your content.
Use this guide to learn best practices for designing and structuring your content. For a more comprehensive overview of your site’s accessibility, consult with an accessibility specialist.
Note (From Squarespace): 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 specific web accessibility laws or acts.
Page Titles
The first thing screen readers dictate when users go to a new web page is the page title. Since page titles are so important for orientation, ensure every page has a title that introduces its topic or purpose and differentiates it from other pages on your site. You can also add a page description that provides more context. These fields also help with your site’s SEO.
Text
Headings
Screen readers scan pages for html tags to understand their structure and allow visitors to navigate quickly between sections. Use the heading field in the text editor to structure your text. To learn how to format text with headings, visit Styling and formatting text.
Do
Use structured headings and a linear format.
Don't
Rely on text within images to convey meaning.
Rely on bolding, italics, or other design formatting to create structure.
Spacing
Ensure your text has adequate line spacing. You can control letter spacing and line height in Site Styles. Here are some guidelines:
Line spacing should be at least 1.5 times the font size.
Spacing following paragraphs should be at least 2 times the font size.
Links
Ensure the purpose of each link can be determined from the link text alone. For example:
Do
“To reach out, visit our contact page.”
Don't
“To reach out, click here.”
Images
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. 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.
To learn more about alt text, visit Adding alt text to images.
Do
Consider the purpose of the image and try to convey that meaning concisely using text.
Keep your alt text under 125 characters. Many braille displays only present up to 40 or 80 characters at a time, so it's best to be concise as possible.
If the image has a clickthrough URL or any other functional use, describe the function. For example: "A laughing couple. 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. Many assistive technologies automatically identify them as images.
Audio
You can help visitors with hearing impairments access your audio content, like podcasts, by adding a transcript.
Videos
Add synchronized captions using the integrated closed captioning features for YouTube and Vimeo. This way, viewers can enable or disable captions from within the Video Block. Visit YouTube and Vimeo for more information on adding captions.
Do
Provide enough time to read captions.
Don't
Add flashing content known to cause seizures or physical reactions. As a general rule, avoid content that flashes three times in any one second period.
Colors
Pair colors that maximize contrast, and avoid grouping colors that are difficult to differentiate with color blindness, like blue and purple. Color Oracle is a useful tool that simulates how people with common color vision impairments see a page. Note that this is a third-party application that falls out of the scope of Squarespace support. You can change your site’s colors in Site Styles.
If you can’t change the color scheme, use text, alt text, and other contextual information to help visitors with color blindness understand content explained through color.
Do
Group colors with high contrast.
Use Color Oracle or similar tools to see a simulation of how people with common color vision impairments experience your content.
Don't
Pair colors that are difficult to differentiate with common color blindness, like blue and purple.
FAQ
Is my site accessible?
Accessibility requirements differ around the world. You are responsible for ensuring your site complies with applicable laws, including local accessibility requirements. The best 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 can't provide advice about making your site compliant with specific web accessibility laws or acts.
Is Squarespace working to improve accessibility?
Yes. Squarespace takes accessibility seriously. We are always looking to improve and will never be done. We’re committed to making our services more accessible to users of all abilities. We are currently in the process of reviewing our services to improve user experience further, and seeking to make it easier for our customers to make their sites as accessible as possible.