How to Build a More Accessible Website

The more people visit a website, the better. Making a site that works for—and is accessible to—as many people as possible is not just good for business, it’s also the right thing to do.

Web accessibility involves designing websites that are optimized for everyone, including those with physical and cognitive disabilities, as well as people with technological or situational limitations like low bandwidth. Building accessible websites shows both consideration for others and an awareness of professional norms and standards.

Keeping accessibility top of mind while building your sites will result in the greatest number of people enjoying your web designs. There are many advantages to accessible web design that extend beyond the obvious. For instance, clear text and adequate font contrast can help make content accessible to a larger audience, not just those with visual impairments. Meaningful text alternatives that complement images (i.e., alt text) don’t just help those using assistive technologies like screen readers, they also help search engines effectively crawl and index web content—something that can improve overall SEO performance. 

Accessibility is a place where good business, effective design, and inclusivity align. There are international web standards that detail the requirements for web accessibility, which are worth reviewing in full. In addition, depending on their location or jurisdiction, some of your clients may have particular legal obligations around accessibility. In this guide, we’ll share some of the best accessibility practices for web professionals to keep in mind while building Squarespace sites.

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

Building a more accessible website on Squarespace

A good starting point to create accessible websites is designing the site’s default display to meet accessibility standards and constructing the site thoughtfully and accessibly to interact well with assistive technologies. There are several other aspects to accessibility, but these two serve as a strong starting point. 

Visual accessibility

One of the first steps in designing an accessible website is optimizing its default display settings. It’s crucial that different site visitors can read your site’s text and view its content on a range of devices. You can control many of the variables that impact the visual readability of a site through CSS and on Squarespace using site styles.

• Text size

  Text size is a vital component of accessibility. Minimum text size should be 18–20px. If you change the base font size in Squarespace, other fonts on your page will adjust accordingly.

• Spacing

  When changing letter spacing, it’s crucial to use values rather than inputting extra spaces between letters. The latter practice may cause screen readers and other assistive technologies to read out your paragraphs as a string of letters, rather than a meaningful sequence of words. 

• Paragraph width

  Excessive paragraph width can also cause issues in legibility. Ideal paragraph width is 65 characters, or within the range of 45 and 85. Both width and spacing can be controlled in site styles under spacing. 

• Text alignment

  When text is to read from left to right, ensure that the alignment is either to the right, left, or center aligned–rather than justified. Justified text is spaced to align with the width of the text box, which can lead to both spacing and readability issues. 

• Line height

  Many platforms will default line height to 1.2, but the minimum recommended line height for accessibility is 1.5. The process for changing line height varies slightly depending on the version of your Squarespace website.

• Contrast

  Adequate contrast between text and its background is vital. A ratio of at least 4.5:1 for normal-sized text is usually an acceptable baseline. You can determine your contrast ratios using an accessibility checker. 

  Text size and other factors impact contrast ratios. Other considerations include avoiding bright colors that can cause issues for people with dyslexia. Learn more about the finer points of contrast and luminance ratios.

• Links

  Links should always be informative. Instead of saying, “click here,” let site visitors know where the link will take them. For instance, replacing “click here” with “check out our strategy toolkit for more information” provides ample context for site visitors.

• Navigation

  Consider that some people may only use a keyboard or other controller to navigate a website. Responsive visual cues, like highlighting selected navigational elements, can be essential for those site visitors. Squarespace sites built on version 7.1 have a built-in focus outline feature that highlights items on a page, such as navigation links and form fields.

• Language

  Avoid cryptic language or verbiage that’s dense with idioms and other features that may be difficult for non-native speakers, or those learning the language, to understand. 

Structure your website to be accessible

When building accessible websites, it’s important to anticipate how assistive technologies like screen readers will interface with your web content. These assistive technologies generally interact directly with the webpage’s HTML, as opposed to the page’s visual elements. 

• Semantic versus non-semantic HTML

  It’s best to write HTML semantically. This means that, where possible, tags and other elements should provide information about their associated content. Elements like <div> and <span> don’t provide any context about the information between the tags. Elements like <header> or <article>, by contrast, indicate their type of content. Writing HTML semantically can improve accessibility, SEO, mobile browsing, and more, since the tactic provides more ways for people and agents to interpret it. It’s also helpful for those who interact with the source code in the future. 

  Version 7.1 websites built on Squarespace will attempt to optimize tags like <h1> and <h2> automatically, doing some of the work for you.

• Perform a basic structure check

  Sometimes, a webpage’s default appearance and its underlying HTML structure are completely at odds. Some site visitors won’t see anything wrong, while others will be completely unable to interact with the website. Ensuring there’s alignment between the way your site is structured and the way it displays visually will go a long way to enable those using assistive technologies to understand your website.

  It’s ideal to have someone with screen reader experience review your website. However, viewing your pages in a linearized orientation with visual elements turned off may give you a sense of how your content will translate in these contexts. Each element from the header to the footer should follow a logical and coherent progression. 

• Check your Fluid Engine designs 

  Fluid Engine offers a lot of flexibility while designing, but you should always confirm that your accessible structure remains intact after editing. In addition to performing a basic structure check, verify that any overlapping blocks don’t visually or functionally obstruct elements of your website.

Inaccessible websites exclude certain people from the web. Developing your accessibility skillset is rewarding in itself, but can also make you a more well-rounded web professional. While accessibility is a professional and social obligation, it’s also a great way to create stronger user experiences and enhance your client’s brand.

---

Want more?

Check out Squarespace Circle, Squarespace’s program for professional web designers, developers, digital entrepreneurs, and creatives. Along with exclusive content, discounts, and other perks, Circle brings professionals together from all across the globe to exchange advice while connecting with new clients and collaborators.

---