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.
Tip: To create screen reader-friendly headings, use the Heading option in the text toolbar instead of changing the font size.
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.
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.|
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:
- Go to the page where you added the image and edit the page.
- In the editor, switch to HTML mode.
- Scroll to the image and find alt=”” in the image’s HTML.
- Add the image description between the quotation marks.
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. 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.
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.
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.