Tips and Tricks to Make Your Squarespace Website More Accessible

Compliance with web accessibility regulations is super important these days. The accessibility compliance of websites built on Squarespace varies depending on which template you’re using. Here are some tips and tricks to fix the accessibility errors that you might find in various Squarespace templates.

As part of my testing, I use the WAVE browser extension to find accessibility errors. It’s far from perfect, but it is what trolls use to shake down site owners for money.

Make Keyboard Navigation Visible

A key component of web accessibility is the ability to navigate to every link on your website using the keyboard tab key. When you navigate using the tab key, the element that you’re currently on is supposed to be outlined. If this isn’t happening for your Squarespace template, try adding this code to the site’s custom CSS (go to Design -> Custom CSS):

/* KEYBOARD ACCESSIBILITY */
:focus {
  outline-style: solid!important;
    outline-width: 2px!important;
}

Add Content to Mobile Menu Buttons

In the template I was using, the mobile menu open and close buttons were triggering WAVE errors because they had to text content (only SVG content). To fix that, I wrote some vanilla JS to add a span containing text to these buttons, along with some CSS to make it invisible. Add this code at Settings -> Developer Tools -> Code Injection -> Footer.

<script>
 window.addEventListener('load', function () {
  
  // ADD CONTENT TO EMPTY MOBILE MENU BUTTONS
  var button_span = document.createElement('span');
  button_span.textContent = 'open mobile menu';
  var mobile_buttons = document.getElementsByClassName("Mobile-bar-menu");
  mobile_buttons[0].append(button_span.cloneNode(true));

  button_span.textContent = 'close mobile menu';
  var mobile_buttons = document.getElementsByClassName("Mobile-overlay-close");
  mobile_buttons[0].append(button_span.cloneNode(true));
 });
</script>

After you add that code, you should see visible text under these buttons. To hide that, add this CSS at Design -> Custom CSS:

/* HIDE MOBILE BUTTON TEXT FOR ACCESSIBILITY */
.Mobile-bar-menu span,
.Mobile-overlay-close span {
  display: none;
}

The buttons should now pass the WAVE test.

Add Background to Main Menu

If your main menu sits on top of a full-screen video or image, it might not have enough contrast to be visible. I added this CSS to add a background to my menu to make the menu items visible in front of a full-screen video:

/* ADD BACKGROUND TO HEADER NAV TO PASS WAVE TEST */
.Header-nav--primary .Header-nav-inner {
  background-color: rgba(0,0,0,0.5);
}

Adjust the opacity according to your needs.

Fix WAVE Text Contrast Errors in Dark Sections

I found that in my Squarespace 7.1 site, the text in sections with dark backgrounds were failing the WAVE accessibility test even though there was more than enough contrast between the white text and dark background. That’s because the background color in these sections was set using an absolutely-positioned background overlay instead of a simple CSS background color on the section.

The solution is to apply a dark background color to these sections using CSS. Here are some examples:

section.dark-bold,

section.dark {
  background-color: black;
}

Even though this won’t be visible to humans, it will make the WAVE test pass on these sections.

You’ll have to use the inspector on your site to get the specific class names.

Add Alt Tags to Instagram Video Thumbnails

If you use the Instagram block, you might notice that the regular images do have alt tags (great!), but thumbnails of Instagram videos do not (doh!). Truly fixing this would require back-end changes to the block that only Squarespace can do. However, we can add some JavaScript to place a generic alt tag on these thumbnails to at least get rid of the WAVE errors that they trigger. Add this code at Settings -> Developer Tools -> Code Injection -> Footer.

<script>
 window.addEventListener('load', function () {

  // ADD ALT TAGS TO INSTAGRAM VIDEO THUMBS TO PASS WAVE TEST
  var instagram_block = document.getElementsByClassName("instagram-block");
  var instagram_images = instagram_block[0].getElementsByTagName("img");
  var l = instagram_images.length, i, image_alt;
  for(i=0; i<l; i++) {
    image_alt = instagram_images[i].alt;
    if ( image_alt.length == 0 )
    	instagram_images[i].setAttribute("alt","Enter your generic alt text here");
  }

 });
</script>

This code checks to see if the Instagram block image already has any alt text. If not, it adds a generic alt text message. Again, not great for true accessibility but it does eliminate errors from automated checkers that trolls use to sue website owners.

Conclusion

I’ll continue to add Squarespace accessibility tips and tricks as I discover and develop them, so bookmark this page! Let me know of any Squarespace accessibility solutions that you know of in the comments! – Brian

Brian Shim

I am a freelance web developer and consultant based in Santa Monica, CA. I’ve been designing websites using WordPress and from scratch using HTML, CSS, PHP, and JavaScript since 2010. I create websites and web applications for businesses, nonprofits, and other organizations. I have a degree in Electrical Engineering (BSEE) from California Institute of Technology and a degree in Engineering Management (MSEM) from Stanford University.

brianshim.com