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.
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.
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.
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.”|
“To reach out, click here.”
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.
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 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.
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.
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.
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.
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. The first time you press Tab, a Skip to Content message appears. Press the spacebar to skip the site header and navigation and go directly to the site's content or continue pressing Tab to navigate to other content. This focus outline is standard across all sites and pages, and it's not possible to customize the line’s color or thickness.