Accessible websites are parsable by screen readers and other assistive technologies. There are many aspects of your site you can adjust to make it easier for visitors with different vision and movement abilities to access your content.
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 specific accessibility laws, regulations, or standards.
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.
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.
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.
Ensure the purpose of each link can be determined from the link text alone. For example:
“To reach out, visit our contact page.”
|Don't||“To reach out, click here.”|
In addition to social icons, include text links to your social media accounts. Always state the name of the social media platform in the link text to identify the link’s purpose.
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.
You can help visitors with hearing impairments access your audio content, like podcasts, by adding a transcript.
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.
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.
For example, if the chart below was a static image, visitors with color blindness probably wouldn't see which section represents New York. However, since this is a Squarespace Chart Block, we can add section labels on hover so color vision impaired visitors read context about each section of the chart.
Squarespace sites have a built-in focus outline feature that highlights items on a page, like navigation links and form fields, with an outline when site visitors press Tab on their keyboard. This focus outline is standard across all sites and pages, and you can’t adjust the line’s color or thickness.
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 specific web accessibility laws, regulations, or standards.
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're 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.