Web Accessibility Made Simple: 5 Easy Ways to Make Your Website Inclusive

Can everyone - and I do mean everyone - use your website? 

What a lot of business owners don’t understand is that there are common website trends that make it harder for some individuals to use their websites.

That means you’re excluding a potentially huge chunk of your target audience - up to 27%. That’s the exact opposite of what you want to do right?

The good news is that having an accessible website is not only possible, it’s easy to make your website more accessible for everyone.

Today, we’re going to cover 5 easy ways to make your website more accessible, including:

• Writing good ALT descriptions and how to add them
• How to make links clear to everyone
• Choosing the right color combinations
• How to simplify your website copy to be readable
• And making video and audio content accessible

MENTIONED RESOURCES:

• Captain Coder Website Audit for Accessibility
• Rev.com
• WebAim Contrast Checker
• Wordcounter.net
• Grammarly

FREE RESOURCE: Get more leads from your website

Follow me on Instagram: @captaincoder

Transcript

0:00

Can everyone. And I do mean everyone. Use your website when your website is accessible to anyone, no matter their abilities. You're building a much more inclusive business. What a lot of business owners don't understand is that there are common website trends that make it harder for some individuals. Here's a website that means you're excluding a potentially huge chunk of your target audience up to 27%. That's the exact opposite of what you want to do, right? Pretty sure. Now, the good news is having an accessible website is not only possible. It's easy to make your website more accessible for everyone. So let's dove into five easy ways to make your website more inclusive. Number one, we're going to add alt descriptions to images. Now, this is the lowest hanging fruit on our list today. But the first place anyone can start with web accessibility is by adding descriptions to your images. Now you do this through something called the all tech within HTML. Let's get technical for 5 seconds. You have a space to describe what's in an image. So those who are exploring your website suit through a screen reader, usually those who are blind or have visual impairments can still understand and get the context of the image on your images, on your pages. Now you place this description, this alt tag or alternative text tag. Now a screen reader reads that description back to the user so they can understand what it what the impact of that images on the rest of the content. Now, as a super simple example, say that you have a headshot that you've uploaded to your website. You can make the alt description picture of Sally Smith sitting on a brown couch holding her arms. You want to keep this description short and to the point, but provide some context. Now here's the cool thing about all tags. Something that's a nice little side benefit. Google can't see your images either, so by adding a good alt description, you're also improving your ACL. Now most of what you do to improve your web accessibility actually has a positive impact on your ACL, so there's really no point to not do this. Now, if you want to know how you can add alt text, you can actually easy and easily add descriptions to almost any website builder. You just may have to google it for your own personal one. Now in WordPress there's a spot for alt text right there. When you upload an image to the media library and Squarespace, you can add it either as the file name or through the image. BLOCK There's a spot for alt text and show it has a description box. Literally, this is just a quick Google of how do I adult text to a blank website? So whatever type of website you have and there should be some help articles for you to make this easy. Now almost every single image on your website should have some kind of description. The points where you don't need to is when there are background images or maybe patterns or things that are just there for some kind of visual element. But pretty much every image you can't go wrong with adding an alt description to it. Now, something that you want to think about here is not putting text in an image. If someone who has visual impairments can't see your images, you might be wondering about the graphic you uploaded to your website with text in it. Yeah, just. Just don't do that. Okay. Now, when you put text in images, you're making it difficult for many people to read and get the context of that information. Anything important for your dream client to understand needs to be written. An actual text, actual copy, never in an image. Now how do we make info graphics? How do these factor and how do we make those accessible? Now, any large infographic that you use should include a detailed description below with the important information like the statistics, the findings, etc.. The number two we need to make our links clear. Now, our next item might require some time to go through the pages of your website, but any links on your website need to be clear and very easy to understand that they are in fact links. When someone is looking at your website, is it obvious that they can click that thing? You might be too close to it, so ask a friend if they understand how to navigate your website. We want people to dig through our website. Look at our services pages, get to our contact page and fill out a form or head over to our blog. We have to make this easy by making links super clear. Not only is this a great user experience, it also helps everyone, no matter their abilities. For action links where you're telling something, somebody to go and do this at the end of, say, a block of text or a section, make it a button, and then keep that button style consistent throughout your entire website. This makes it so easy for people to know that they can click that thing and it will help them move thier website and actually work with you. Now if you want to link a bit of text in a paragraph, we call this a text link. You need to make it a different color and adds in styling to its what stands out. For instance, on my website my main font is black and my links are blue and bolded. You can also add an underlying which is a very clear link indicator or set a different style so that when you hover over it, it's also clear that it's something clickable. Now you might want to might wonder what text do we actually link? Because this does have an impact on our accessibility. You don't want to link something simple like click here or learn more. That doesn't say anything to your dream client about what they're going to get when they click that link. So instead, use descriptive link text. That can mean having a button that answers an implied question that you asked in the text above, i.e. learn how which is better than learn more, or telling them that the page they're going to go to. So like see our services, view our portfolio, read testimonials in a text link. It should reference where they're going to go and when they click that. So you can either reference an article title or relevant extract depending on what it is, or just link the most relevant part of the sentence that matters. Where are they going to end up? Just please. Just don't ever link. Click here. Now, number three, color contrast. Now, before you create any graphics or update your website, you need to think about color contrast. Now, the combination of the font color on top of the background color matters a lot to someone who has low vision or colorblindness suit. I have neither, and I still have a hard time reading some graphics that I see all over social media because the contrast is all way off. So while you're designing, you think that a certain color like this is just going to look really nice, this color combination, before you actually put that out into the world. Run that through an accessibility tool. First. First, though, I love webcams contrast checker. It is free and it is quick and easy to use. Now, the one color combination that we are not initially always seems to come back as a fail. Never, never fails. Look, this is going to feel like you're limiting your design, but what you're doing is you're actually making things better for everyone. When you're a font color and your background color do not have a high enough contrast, not everybody is going to be able to read it. Some of that font is going to actually look like it disappears to somebody who has colorblindness. Now I am pretty sure that you do not want to prevent people from reading the copy on your website. So use web aims tool before you start designing anything before you ever go into Canada and create a graphic for social media. Check. The hex codes are the font color you want to use and with the background color you plan to use. Just to make sure that's actually legible. Now, some color combos that I see all the time that are fails are like white on a lighter blue. We think it looks nice, but nobody can read it. Red on pink or pink on red. That's a tough one. I see it a lot. Yellow on basically. Any background? All color combos. I see. These are things I see fail all of the time. What's happening for a lot of the people that I see, especially on social media, is you're uploading what you think are great graphics. Now I can actually read them. Not only will checking your color contrasts help improve your website's legibility, it'll also extend to all of your marketing materials if you follow a simple process. Now, when we start working with clients and we get brand information and we create a color contrast guide, we test each color combination and list out which hex codes work with each other. That way, we're always choosing a safe combination down the line that won't affect legibility of your all too important copy. Which number four? You want to simplify your copy? Now, this is coming from an English major who actually has a master's in literature, who loves to write and loves being creative. But all too often we're creating content that not everyone can understand and connect with beyond the accessibility of our words. Your dream client doesn't likely understand all of your technical jargon anyway, and they want to be able to skim your websites. So what does simplified website copy look like? It means shorter sentences, a paragraphs, simple vocabulary, bulleted lists where applicable and even bolded important sections of paragraph. It also means using your headline sizes appropriately so. One each one per page. Introduce new sections with a heading to you. Want to make sure that people understand where are the thought changes as they scroll down the page? Now all of those things will help your website copy to be read faster or to be more easily read by everyone who visits your website. You want to aim for about a high school reading level, so like they say about 11th grade, 10th or 11th grade, and focus on the outcomes you're providing your clients, not the steps you're taking. I mean, they don't really care about the house anyway, just the what. So you can use online tools like grammarly or word contract not to help you parrot on your writing and make it more succinct. Full disclosure All of my blogs are improved through both of these tools. They help catch my overly superfluous writing. Mostly. Now number five, captions and transcripts. Now, do you a podcast or do you upload YouTube videos? I mean, like this podcast and YouTube video that you're literally listening to right this second. Do you put any of those on your website? You need to include alternative options so anyone can access your content. Now, if you're creating videos with any kind of narration, any kind of voiceover, you need to include captions ones so that everyone can access the information in the video. Now, thankfully, this has become quite popular to provide captions. Hall Saluja so many platforms have automatic captions already built in Instagram and TikTok. Tok used several options for captioning, including styles, which lets you have a little bit of fun with it. You can use apps like captions to make them even more stylized and more unique. YouTube is adding captions automatically now. They just tell you it might not be there immediately when the video is loaded, but they will do automatic captions. Now, if you have longer form videos, I recommend some videos longer than 30 seconds to a minute. I recommend services like Bravocon because it'll help you create captions that you can upload to your YouTube or Vimeo videos. They're going to be a little bit more accurate. You're able to edit them a little more easily before you upload them. And it's especially useful when you're creating videos for lead magnets, online courses or say, a welcome video for your website so that, you know, the captions are spot on. Now, if you have just audio on your website, you'll want to ensure that you also have some kind of transcription option available to. My blogs are actually basic transcriptions of many of my podcast episodes. This allows me to reach everyone and they can get value for my podcast even if they can't listen to it. All righty. Now it's time to ensure that your website and the other content you're putting out there are as inclusive as possible. Now, as business owners, it is so easy to get overwhelmed with everything that we need to know and do. And the goal posts feel like they move all of the time. But now that you know how to be more inclusive, it's time to put it into practice. Now, before you go get overwhelmed and you think I can't possibly do all these things. Just know that something like 0.02% of websites on the internet are fully accessible. That doesn't mean that you can make it doesn't mean you can't make some strides to make your own more accessible and offer a better experience to than many of your competitors are offering. Right. We want to be better than the people who we are competing against, even if that person is just ourselves. Now, if you don't want to do that yourself and you're overwhelmed by everything that you're seeing here, even though these are things that you can do consistently to keep your content accessible, I get it. And if you don't know where to start with your own website, I also get it. My team and I actually offer full website audits where we test your website and give you the action plan, but can also perform the remediation and make your website more accessible with our website on it. So it's time to invest and a good experience for everyone, and you can do that by clicking the link below in the video description. Now, thank you all for tuning in. I'll see you again next week.