52: Website Accessibility Tips for Squarespace
-
[00:00:00] Website accessibility in its simplest form means making sure the information on your website is accessible to everyone, regardless of how they choose to browse the web. Whether someone's using a desktop computer, a mobile phone, or a screen reader, you want your website content to be easily understood and you want your website to be easy to navigate.
[00:00:24] In this episode of Think Inside the Square, we're talking about how you can make your Squarespace website accessible to everyone. Welcome to Think Inside the Square, a podcast full of tips and tricks to help you build a website that you're proud of. I'm your host, Becca Harpain, Squarespace expert and educator and creator of InsideTheSquare.
[00:00:40] co. In this episode, we're talking about the concept of website accessibility and what you can do as a Squarespace user to make sure that the content of your website is accessible to everyone. For a transcript of this episode, along with the links to any resources mentioned, visit insidethesquare.co/podcast
[00:00:57] the term Squarespace is a trademark of [00:01:00] Squarespace, Inc. This content is not affiliated with Squarespace, Inc.
[00:01:04] Before we dive into the hot topic of today's episode, all about website accessibility, I am super excited to share with you a new project that I've been working on that I just launched this week.
[00:01:15] Head on over to insidethesquare.co/tutorials
[00:01:19] That's insidethesquare.co/tutorials
[00:01:22] There you will find my brand new beginner's guide to Squarespace everything. I've written over 30 articles about different content blocks, page types, page sections, and other Squarespace features to help you make the most out of your Squarespace website.
[00:01:37] So if you're not quite sure what design settings are available for an accordion block or how pagination will work in a portfolio, visit insidethesquare.co/tutorials to check out all of my free beginner's guide. I will have a link to it in the show notes, but I was so excited to launch this project this week that I had to talk about it in this episode. Again, this is a beginner's guide to Squarespace. Everything. You'll [00:02:00] find all kinds of articles there, over 30 of them at the time of recording this, and in each one of those articles I've added my pro tips, additional resources, and even some training videos to help you understand the concepts.
[00:02:10] Again, you'll find all of this at insidethesquare.co/tutorials
[00:02:15] Alrighty, without further ado, let's get into this episode about website accessibility, specifically for Squarespace websites. When you have an accessible website, that means the information on your website is accessible to everyone, regardless of how they choose to browse the web.
[00:02:31] Have you ever gotten frustrated trying to decipher a website on your phone with a slow data connection? Or maybe you've encountered a confusing form with unclear instructions and you weren't even sure how to submit the data? Accessible websites eliminate those frustrations. Whether someone's using a desktop computer, a mobile phone, or a screen reader, Accessible websites You want your website to be easy to understand and navigate.
[00:02:53] Website accessibility isn't about catering to one specific group. It's about reaching all of your visitors in the [00:03:00] most effective way possible. It's about creating a welcoming online space where everyone can access your information and have a positive experience. Accessibility features like clear headings and descriptive labels can improve the user experience for everyone.
[00:03:16] And making sure your Squarespace website is more accessible doesn't have to be a huge undertaking. In fact, Squarespace offers quite a few built in features that can help you create a website that is user friendly for all. Now, it's important to think about your website visitors when making accessibility improvements.
[00:03:33] Everyone's audience is diverse, including yours. A potential customer might be browsing your products on their phone while commuting in a subway with spotty reception and slow data. A journalist might be researching your business on a laptop with a screen reader. Maybe a potential collaborator is checking out your website on a tablet in a coffee shop.
[00:03:52] The point is, the people visiting your Squarespace website come from all walks of life and use a variety of devices and [00:04:00] browsing methods. Some of your potential visitors might have visual impairments that make it difficult to read small text or navigate complex layouts. Sure, a fancy sudden side scroll effect could look really cool to an experienced designer, But for someone who's used to websites that have vertical scrolling, that can be really disorienting.
[00:04:18] Perhaps someone has fine motor skill limitations that make clicking tiny buttons or filling out forms really challenging. Using a custom cursor could make it difficult for them to know if they're actually clicking the button they're trying to click. Maybe someone relies on a screen reader that converts your text to speech.
[00:04:35] If you use heading text and paragraph text in an improper format, the content might be read back to them in a way that does not make sense. Here's the bottom line. Website accessibility isn't just ticking a box so you can display a WCAG compliant badge on your website. It's about creating a welcoming online space that's inclusive for everyone.
[00:04:55] It's about ensuring that anyone who wants to find you, learn about your [00:05:00] services, or connect with you has the opportunity to do so. In today's online world, accessibility allows you to reach a wider audience and build a truly inclusive online presence. The good news is that Squarespace comes equipped with several built in features that can help you create an accessible website.
[00:05:16] So let's go ahead and dive into these tools that we have access to. Let's explore some easy to implement concepts that can make your Squarespace website work for everyone. One of the first accessibility pro tips that I want to share with you is about properly formatting your text. Now there are some features built into Squarespace that go behind the scenes, that have a lot more to do with the way your content is structured than you might think.
[00:05:39] Let me give you one of my favorite examples. When you look at a blog post and you see the blog post title, the style of that blog post title is going to match the style of your Heading 1 font settings in your Site Styles menu. That's because behind the scenes, it's actually labeled as an H1. When someone is using a screen reader and they open up a [00:06:00] blog post on their browser window, That screen reader identifies your heading 1, your blog post title, as the title of the page.
[00:06:09] Now Squarespace works behind the scenes for us to make sure that title is the actual title. When someone is using a screen reader and they open up a blog post in their browser window, That screen reader program is going to look behind the scenes and see that Squarespace has actually labeled that title as a heading one, and it will identify that as the very first heading on the page.
[00:06:31] Now, underneath that, when you're adding text to a blog post, it's really important to keep that hierarchy in mind. When formatting the rest of your text, subheadings are going to be read as distinctive parts of a page, like chapters in a book. So it's very important to utilize these in order. When you're working on the content of your site, if directly underneath that heading one blog post title, you have two additional sentences that are also heading ones, and then you have a heading four text, then large [00:07:00] paragraph, then heading two, then heading three, it can get very confusing.
[00:07:04] Someone trying to jump around that content with a screen reader would have a very difficult time understanding the order in which you're trying to convey things. And someone who's just reading it directly on the page visually, could also have a very difficult time understanding the order of the content on the page.
[00:07:20] Each one of those text types has a different font size in our font menu. And when you create your Squarespace website, the standard is to have H1 be the largest. Then H2, then H3, then H4 be the smallest of your heading fonts. And I strongly recommend that you stick with that format. So to recap this first point right here, Heading 1 text is reserved for titles, and subheading text can be considered chapter markers that make it easy for people to navigate through the content of your site, both visually and with a screen reader.
[00:07:52] Next up, let's talk about images. Now I'm sure you've heard it a thousand and one times, add alt tags to your images. Alt tags [00:08:00] stand for an alternative tag and it should describe the image. It'll be used by a screen reader and it will also be displayed if the image has trouble loading.
[00:08:07] But here's another image tip for you that I'm not sure that you've heard yet. Squarespace video blocks offer you the alternative to upload a featured thumbnail image or a featured image. Adding this image above a video content block is a fantastic thing that you can do for your website accessibility and here's why.
[00:08:27] Those larger content blocks, like an embedded video, will take a longer time to load. For a fast load time, a custom thumbnail image will load significantly faster. And for the person who is loading this page on their device, when that image is presented to them, They can interact with that image to then see the additional content and load the larger file.
[00:08:49] But having a thumbnail image there, a featured image uploaded into that content block through Squarespace will help your website load significantly faster, which is a great user [00:09:00] experience and highly recommended to make your website more accessible for people who have slower internet connections.
[00:09:06] Another built in Squarespace accessibility feature that you might not have considered is the ability for you to add descriptive labels to the form fields on your Squarespace website. All of your forms will have a label at the top of the field, and then you can also add placeholder text that'll show up inside the input field.
[00:09:23] But you can also display descriptive text that describes what's supposed to be used for this specific form field. This is a great thing that you can add to make sure people truly understand what content needs to be added to those fields before they submit the form. I also recommend customizing the post submit message.
[00:09:42] When someone submits a contact form on your Squarespace website, it will show them the words thank you as a post submit message, but you can customize this. Inside the form block, if you select post submit options, you can change the message there, customizing the text so it says more than just thank you.
[00:09:59] You can also [00:10:00] redirect them to an entirely new page if you want to, a very cool feature that a lot of people do when they use forms for lead magnets. But that's a more complicated concept that I'll cover in a future episode of Think Inside the Square. In fact, I think I've already covered that in a past episode.
[00:10:14] I'll be sure to link to that in the show notes. I'm sure I have one about using custom forms for lead magnets in Squarespace, but I digress. Let's get back to accessibility. We talked about the importance of using specific text types in order.
[00:10:27] We talked about using featured images for large content blocks for faster loading. And we talked about adding labels to your forms as well as customizing the post submit message. All of those are things that you can do to improve the accessibility for anyone visiting your Squarespace website. I wanted to keep the focus of this episode about important things that we can do using the Squarespace editor,
[00:10:48] aside from those features that are built into every Squarespace website, it's also important to remember the basics. High contrast colors and accessible font size are two very important things that you need to do as the Squarespace [00:11:00] website creator.
[00:11:00] Inside the show notes for this episode, I'll include links to my favorite color contrast checking tools And I'll include links to the current standards for font size for all devices, so you can make sure that the font settings and the color settings on your Squarespace website meet accessibility standards.
[00:11:16] The key takeaway from today's episode is that even small improvements in accessibility can make a big difference in improving the user experience for your website. By taking these extra steps to use Squarespace features and create content with accessibility in mind, you'll be able to create a website that's truly inclusive and user friendly for everyone.
[00:11:35] Again, inside the show notes for this episode, we'll have links to all kinds of additional resources for you, but I want to encourage you to start small. You don't have to tackle accessibility all at once. Maybe this week you focus on adding clear alt text to your images and make sure that you have a featured image for any video blocks.
[00:11:53] Next week, you can explore using keyboard navigation to make sure that you have the appropriate font types in your blog posts. [00:12:00] Every little step counts towards creating a more inclusive online space. And one of my favorite things about websites, they're not permanent.
[00:12:07] You can change them at literally any time. So today I want to encourage you to make one small step towards making your website a little bit more accessible. Check out the links in the show notes for this episode at
[00:12:17] insidethesquare.co/podcast
[00:12:19] thank you so much for tuning into this episode of Think Inside the Square.
[00:12:24] I hope you found it helpful and inspirational. Again, I'll have links to all of those resources in the show notes and links to my brand new training series, A Beginner's Guide to Squarespace Everything, available at insidethesquare.co/tutorials
[00:12:38] Thanks again for tuning in and most importantly, have Squarespace website.
[00:12:42] Bye for now.
-
A Beginner's Guide to Squarespace insidethesquare.co/tutorials
Website Accessibility Resources:
WebAIM Contrast Checker: webaim.org/resources/contrastchecker
WCAG 2.1: A/AA Success Criteria & font info: w3.org/TR/WCAG21/
Setting up a form redirect: insidethesquare.co/tiny/form-redirect
Creating a landing page in Squarespace: insidethesquare.co/squarespace-tutorials/advanced-landing-page
Building your email list (lead magnet strategy): insidethesquare.co/podcast/28
EPISODE SUMMARY
Making Your Squarespace Website Accessible to Everyone
In this episode of Think Inside the Square, we're diving into the world of website accessibility! Ever wonder how to make your site user-friendly for everyone, no matter how they browse the web? That's what accessibility is all about, and the good news is, Squarespace has built-in features to help you achieve it!
What is Website Accessibility?
Think of accessibility as making your website a welcoming space for everyone. This means ensuring your content is easy to understand and navigate, whether someone's visiting on a desktop, phone, or using a screen reader. Accessible websites are frustration-free zones, and that's good for everyone!
Simple Squarespace Accessibility Hacks
Squarespace offers several tools to create an accessible website. Here are a few easy wins to get you started:
Master Your Headings: Headings aren't just for fancy titles! Squarespace uses them behind the scenes to structure your content. Use Heading 1 for your main title, Heading 2 for subheadings, and so on. This helps screen readers understand the flow of your information.
Image Alt Text is Your Friend: Ever seen those little boxes appear when images don't load? That's alt text in action! Add a clear description to each image so screen readers can understand what it shows, and for those with slow connections.
Thumbnail Power! Those big video blocks can take a while to load. Use Squarespace's featured image option to add a smaller thumbnail image first. This lets visitors know there's a video and gives them something to interact with while the main file loads. Faster loading = happy visitors!
Formidable Forms: Squarespace forms have built-in labels, but you can take it a step further. Add descriptive text to each field explaining what information is needed. You can also customize the message people see after submitting a form.
Accessibility Beyond Squarespace
These are just a few Squarespace-specific features, but there's more to accessibility! In the show notes for this episode (check them out at insidethesquare.co/podcast), you'll find links to:
Color contrast checkers: Make sure your website's colors are easy on the eyes.
Font size recommendations: Ensure your text is big enough to read comfortably on any device.
Accessibility: One Step at a Time
Making your website accessible doesn't have to be overwhelming. Start small! This week, you can focus on adding alt text to your images and using featured images for videos. Next week, you can explore using keyboard navigation to test your site's functionality & readability. Every little step counts towards creating a more inclusive online space.
Remember, websites are living things! You can always make changes to improve accessibility. So, take a small step today and check out the resources in the show notes to make your Squarespace website a place where everyone feels welcome.
