Creating accessible site content

Tips on creating clear and concise content for your site.

Last updated July 15, 2024

When creating site content, it’s important to keep accessibility in mind. This includes the language you use, the structure of your text, and the way you organize your content.

This guide provides tips on how to create content, and organize your site, with accessibility in mind.

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.

Clear and concise language

Well-organized, brief, and clear text is helpful for all visitors, especially those with impairments. When writing text for your site, consider the following tips:

  • Use clear language and formatting.
  • Write in concise sentences and paragraphs.
  • Avoid using jargon and unnecessarily complex words and phrases.
  • Expand acronyms on the first use. For example, Top-level domain (TLD).
  • Use bulleted lists when appropriate.
  • Consider using images, video, and audio, to help clarify meaning.

Titles

The first thing screen readers communicate when visitors go to a new webpage is a title. If the page has an SEO title, screen readers will read it and skip the page title. If a page doesn't have an SEO title, screen readers will read the page title.

Providing a short, specific, and unique page title helps users navigating via assistive technology quickly understand a web page’s content and purpose.

Title best practices

When writing your titles, you may want to consider the following:

  • Introduce the page’s topic and purpose.
  • Each page's title should be unique and differentiate the page from other pages on your site.
  • Put the unique, and most relevant information first. For example, “Accessibility guide” instead of “A guide on accessibility.”
  • For pages that are part of a multi-step process, include the current step in the title. For example, “Choose the color of your product (Step 2 of 3) - ABC company.”

Text

Headings

Screen readers use HTML code instead of visual elements to understand a page's structure. When using a screen reader, visitors can better navigate pages when each section of the page has a heading. Search engines also use headings to better understand your content, so using headings is a great way to give your site an SEO boost.

Do
  • Use headings based on the importance of the text. For example, use Heading 1 (H1) for the most important headings.
  • Create one title/Heading 1 per page.
  • Use short headings to group related paragraphs together and clearly describe the sections.
  • Use the text toolbar to format text as headings.
Don’t
  • Use headings out of sequence. Your headings options range from H1-H6, and screen readers read them in order.
  • 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.
  • Use headings with no associated content only to style text. Doing so makes the structure of the page unclear and harder to understand. 
  • Style text to look like a heading if you don't intend it to be a heading. Doing so may confuse visitors, and prevent those who use assistive technology from quickly navigating your site. 

To learn more about page structure and headings, visit the Web Accessibility Initiative.

Clearly describe the purpose of each link in the link text so visitors using assistive technology can jump between links without losing 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.”

Lists

Organize the layout of your text using lists and headings. Lists help to show when pieces of content are related to each other, such as a group of links or a set of examples. Formatting your text as a list will:

  • Make it easier to navigate your content.
  • Help visitors with cognitive disabilities understand your content.
Do
  • Use numbered lists when the order of the content matters.
Don’t
  • Use lists for non-list content (such as a table of data or for styling purposes only).

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 Site Styles.

Colors

You can customize your site colors using site styles. However, avoid relying solely on color to convey information to your visitors. Color differences can be missed by people with low vision or color deficiencies. Also, color alone doesn't convey meaning to blind visitors using screen readers.

You can use Google Chrome's Developer Tools, or Firefox's Accessibility Inspector, to simulate how your pages may be experienced by 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.

Forms

Forms can be challenging for some visitors. It’s important to ensure each field is clearly labeled, and that the form is easy to navigate. Use a text block to include brief instructions that inform visitors exactly what they need to know to appropriately complete the form.

You can include placeholders with text that appear in the form fields as an example for visitors. This way, visitors have a better idea of how they should complete the form. Keep in mind that placeholder text shouldn't replace the label text. You can read more about placeholder text in our forum.

Note

Custom code modifications fall outside the scope of our support. This means that we’re unable to help further with setup or troubleshooting. Additionally, with a code-based solution, we can’t guarantee its functionality or full compatibility with Squarespace. This includes how it functions with our responsive design, particularly its appearance on mobile devices, and if it functions on all templates. Custom code can also cause display issues with future updates to our platform. While we can't help further, there are many resources that can point you in the right direction:

Footer Image
  • Get help from our community

  • Get help from our community on advanced customizations.

  • Hire a Squarespace Expert

  • Stand out online with the help of an experienced designer or developer.