6 Simple Steps to Creating a More Accessible Website
I've been studying websites lately as I look into the best practices of web design and what trends are popping up for 2021 and I've noticed something disheartening.
So many websites look beautiful, but they aren't accessible for the hearing or visually impaired or people with other types of disabilities. Not only does this hurt your search engine ranking, but more importantly, it leaves out whole groups of people who might benefit (and like to buy) your product or service.
Plus, not being accessible can actually get you in legal trouble because it’s considered discrimination.
As I’m digging more into accessibility for website design, I'm on a mission to learn more about how we can make websites more accessible to all, starting with my own site and my design process with clients.
There is actually an entire group of guidelines outlining what website accessibility includes called the Web Content Accessibility Guidelines (WCAG 2). It lays out how to make your website content more accessible to people with disabilities “including visual, auditory, physical, speech, cognitive, language, learning, and neurological disabilities.”
The WCAG addresses things like text sizing, use of color, use of screen readers, and reading level. But it’s full of technical language and may be difficult to implement on certain website platforms (yes, even Squarespace isn’t doing great here).
Even though you might not be ready to implement all the WCAG guidelines, you can still take little steps today to improve your website’s accessibility and (and maybe even find some new clients). If you want make your website easier for everyone, here are 6 simple things you can do that will make your website more accessible to all your website visitors and potential clients.
Legibility
Legibility is focused on how easy your website is for someone to visually read and understand. There are lots of pieces here, but these two are easy things to change without greatly altering your website’s design.
Font Sizing
Font sizing makes a huge difference in how accessible your website is and is usually an easy change. While I’ve found that many people prefer to use the smallest font size possible because they think it looks cleaner, you’re actually doing yourself and your site visitors a disservice. Larger text is easier to read, which means people will stay on your website longer (and not miss so many important details).
Your font size should be at least 14 pixels to be legible. 16 pixels is preferable and I recommend going up to 19 for blog posts and other content-heavy pages. This makes it easier to read for everyone.
On Squarespace, you can actually use CSS to increase the font size of your blog posts without affecting the rest of your website. Just add this code to the Design > Custom CSS section of your site.
.BlogItem p {
font-size: 19px;
line-height: 1.4em;
font-weight: 500;
letter-spacing: 0px;
}Color Choices
Make sure that your font color stands out enough from the background of your website so it's legible for everyone.
Many times, our brand’s color palette doesn’t lend itself to an easy-to-read website design. On my own website, I used a yellow button with white text. While it looked nice and fit with my brand aesthetic, it was difficult to read for many people because there was not enough contrast between the background color and the text.
Instead of just going with what looks good to you, make sure your website has enough contrast, especially for smaller body copy. To meet with minimum standards of WCAG, text smaller than 18pt should have a contrast of 4.5:1 and text larger than 18pt or bolded text should have a contrast ratio of 3:1.
This might not mean much to you, but basically, your text needs to stand out against the background color and the larger the text, the less contrast you need. If you want to use gray for the paragraph text on your website, it should be at least #767676 (on a white background) or darker. I actually prefer to use text that’s almost black (#373737 is one of my go-to options).
You can test out the contrast of your website with WebAIM. Simply input the background and foreground colors of the section you’re interested in and it will tell you if you’ve met the minimum and enhanced contrast standards.
Accessibility
Metadata
While we love website filled with beautiful imagery and find image choice to be an important step in design, it’s vital to remember that not everyone actually sees the images on your website. Someone might be visually impaired and can’t make out the details of an image or using a screen reader or they may have slow internet that doesn’t load images. No matter the reason someone can’t see the images on your site, you need to consider what they do see.
This is where metadata comes in. Metadata is a brief description that reflects the content of an image. It tells someone (and Google) what an image looks like if they can’t actually see it.
Metadata descriptions for images should be short, but descriptive, not stuffed with keywords.
The easiest way to add a meta description when using Squarespace is to rename the image before you upload it. But if you’ve forgotten to do that, you can change the image name by editing the image and updating the Image Name section.
It’s also important to use actual text instead of adding text over an image before uploading it as much as possible. If your headline is built into your background image, people may not be able to read it (and it might be cut off when resizing for different devices).
Bonus tip – you can also do this for your social media posts by adding an image description in the caption.
Captioning
This one is something most of us will be familiar with (I watch everything with closed captions), but it’s an extra step that’s easy to overlook in you’re not intentional.
If you include audio or video on your website, include a transcript or captions.
For audio, create a transcript and then add it to the content of the page (if it’s in a blog post) or link to it with a button under the audio player.
For videos, caption your video and add a transcript for those who won’t be able to load the video.
I recently started using Otter.ai to create transcripts for my previous podcast episodes and I love it! If you’re on the Business plan, you can also use it to add live captions to Zoom calls.
Bonus tip – on social media, you should caption your Stories and videos either by typing everything on the Story or by using an app like Clipomatic.
Usability
Buttons
In addition to making sure you have enough contrast when creating buttons on your website, you also need to consider a few other design changes.
Your buttons should stand out from the rest of your content (this is good for sales and clicks as well as accessibility). Use bright colors like red, orange, or yellow, with easy-to-read text.
Buttons should also change on hover so users know that it’s a clickable element. Generally this is done with a color change, but you can learn other ways to customize your buttons in this post.
You should also choose a specific call-to-action for each button on your site. Instead of saying “Click Here,” your button text should tell a visitor what will happen when they click (like “Download the guide” or “Subscribe now”). This is good practice anyway, so it may not be something you need to change, but double-check that someone reading your website will know what a button does based on the context and button CTA.
Purchase Flow
Want someone to buy something (or book a call with you) instead of abandoning their cart halfway through the checkout process? Make it easy to navigate your website and buy from you with a few clicks as possible.
When someone lands on your website, it should be easy to find the product or service they are interested in, read out it, add it to the cart, and checkout.
Not sure how to make the purchase flow simpler?
Allow people to sort products by who they are or what they’re looking for
Let people checkout on your website unless you need to have a call first (usually for high-end services)
Include images of what they will get after they buy (with meta descriptions)
Eliminate extra links
If you have a few options for something like a course (a payment plan or 1-on-1 coaching add-on), make it easy to find the differences and choose the best one
During checkout or when asking someone to complete a form, you should only ask for the info you need. This means that if you don’t need someone’s phone number, don’t ask for it (or at the very least, don’t make it required). It’s also best if they can skip entering payment information for a free item when possible (Squarespace does this automatically, but some services where you later upsell do not).
It’s also helpful to accept a variety of payment methods. Standard payment methods are PayPal, credit card, and Venmo. If you’re using Squarespace, you can connect all these payment methods under Commerce > Payments. (Stripe is used to take credit card payments.
These six simple changes will make a big difference in how people with disabilities can use your website. And they’re just good design practice too. If you’re overwhelmed by this list and not sure where to start, just chose one item to work on and finish that before moving onto the next. It’s about progress, not perfection, and working towards a more accessible online world for all people.
P.S. Some of the links above are affiliate links. That means I get affiliate credit if you sign up using the link (plus you get some freebies). I only share things I use and love in my own business.
