Make your site accessible with inclusive design practices

Make your site accessible with inclusive design practices

false

Last updated September 23, 2026 15:02

Improve your site's usability for people with impairments.

You can customize many aspects of your site to make it more accessible and easier to navigate for all visitors, including those with disabilities, or using screen readers, and other assistive technologies.

Use this guide to learn best practices for designing and structuring your content.

Also try: Make your site accessible with built-in features

Note: This guide is a resource, but it’s not legal advice. Squarespace doesn’t give advice on specific accessibility laws or standards applicable to your site or business, as stated in our Terms of Service.

Layout

Creating your website with a clear layout and design is helpful for those with low vision, or cognitive impairments. However, a straightforward and consistent layout can also benefit visitors who aren’t confident with computers, or visitors who are viewing your site on a smaller screen, such as a mobile device. Different parts of your website, such as navigation menus, links, and text sections, should be clearly identifiable.

Keyboard navigation

Some visitors may use a keyboard to navigate your site instead of a mouse. Keyboard accessibility is also important for certain assistive technologies, such as voice recognition and screen readers. You may want to consider testing your site's accessibility by trying to navigate it using only your keyboard.

Customizing focus outline

When visitors navigate your site by pressing the Tab key, a focus outline automatically highlights interactive page elements, like navigation links and form fields.

Pressing Tab for the first time opens a Skip to Content link. Press the spacebar to bypass the site header and jump directly to the main content, or press Tab again to move through other elements on the page. You can't customize the focus outline's color or thickness.

To ensure the focus outline works as expected, update your browser to the latest version.

Squarespace keyboard shortcuts

Learn more about the keyboard shortcuts you can use when managing and editing your site.

Fluid Engine

When editing Fluid Engine sections, keep these best practices in mind:

If blocks overlap, ensure the content of all blocks is still visible and usable by visitors.
Consider how different block elements might interact. For example, if you have a form block, you may not want to place a button block on top of it, because visitors might be unsure which button is for submitting the form.
If you're placing text over other kinds of content, ensure it's readable. This might mean adding a color background to a block, changing the color of text so it stands out on an image, or moving the text to a place where it's still readable.

Clear and concise language

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. 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.”

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.

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

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).

Links

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.”

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.

Was this article helpful?

Yes No

45 out of 95 found this helpful

Yes No

Make your site accessible with inclusive design practices