Unlocking Website Accessibility: Tips for an Inclusive User Experience
Learn the importance of website accessibility and get six actionable tips to improve your site's inclusivity, benefiting all users and boosting performance.
File
Web Accessibility ADA Compliance Tips to Design for All Users (FREE Checklist)
Added on 10/01/2024
Speakers
add Add new speaker

Speaker 1: According to the World Health Organization, an estimated 1.3 billion people, one in six worldwide, experience significant disability. And that is one of the main reasons website accessibility is so important. You want every visitor to have a great experience on your site, right? This isn't a Dora the Explorer moment where you shout out, yes, I'm going to take that as a rhetorical and assume that you want that to be the case. The good news, website accessibility is easy to get right. So you can make huge improvements fast, especially if you've got a few resources at your fingertips. What's up? It's Jamal from HubSpot. And in this video, I'm going to tell you the what, why, and how of website accessibility, including six tips for improving yours super quickly. And maybe best of all, I'll point you to two amazing free resources to guide you on the path to the friendliest, openest, most accessible website in your market. Not just one, but two resources. We're literally just giving away value at this point. So let's jump in. So first things first. What? Pardon my language here. The heck is website accessibility? Well, I'm glad you asked me. Website accessibility is really all about giving your website visitors the best possible user experience, making sure your site is open, welcoming, and accessible for everyone. That includes people with visual, motor, auditory, speech, or cognitive disabilities. But here's the thing. And if you only take away one thing from this video, I hope it's this. Improving your website accessibility improves the user experience for every visitor. So it improves your overall website performance. The better your accessibility, the better your website. Which brings us to the why of website accessibility. The main benefit of improving your web accessibility is that it makes your website way, way better. Think about it. You invested a lot into creating, designing, and building your site. And you spend even more on marketing to get people to visit it. Well, everything you can do to optimize that web experience makes all that investment pay off. It's just good business. Better accessibility means better SEO, more traffic, higher conversion rates, and faster performance, which Google loves. It's a virtuous circle. Accessibility pays off over and over again. The other reason to raise your web accessibility game, it's just the right thing to do. And it's the law. The American Disabilities Act says that a business must be easy to approach, enter, operate, participate in, and use safely and with dignity by a person with a disability. So this isn't optional. Accessibility is non-negotiable when it comes to websites. Is that a burden? Absolutely not. It's great for your business. It's way easier than you think. And it doesn't have to be more expensive than a less accessible site. So let's get into the how with our six tips for web accessibility. Tip number one, use image alt text. Don't worry. Sounds super technical, but it's actually pretty straightforward. Alt text is simply the words you use to describe an image on a web page. It tells web browsers and search spiders and screen readers what's in the image, making it searchable, findable, and you guessed it, accessible to every visitor, even the ones with visual impairments. In your alt text, you want to use simple words to describe what's meaningful about the image. So if the image is a car, your alt text might say about the product, silver 2.0 liter convertible Ford, manual transmission, 18-inch alloy wheels, or something like that. You don't want to be redundant. Don't just repeat what's already on the page. Alt text is an opportunity to add value. And if the image doesn't carry any meaningful content, don't use alt text. You'll just be wasting the user's time. Only add alt text to images that move the user through the journey, that mean something. Pretty easy. But you'd be surprised how many important images on company websites actually don't end up having any alt text. So they might as well not be there for many users, which is a real waste. If your website has lots of images that are important to understanding your site, you want to get good at alt text. We've made an excellent video on writing alt text for images that we'll link to in the description below. Tip number two, use colors thoughtfully. This is so important, but so many websites overlook it. The World Health Organization estimates that there are 2.2 billion people with moderate to severe vision impairment. And millions more may not have impaired vision, but are using older computers or low quality screens. That means the colors you choose for your website and how you use them are super important, especially when it comes to text and backgrounds. There are two main things to think about, color contrast and color blindness. For example, this might look like a hot pink sweater to you. But to those with color blindness, it looks like boyfriend material. My DMs are closed. For color contrast, you need to be able to find out about your contrast ratios. Luckily, there are lots of resources online, like the color contrast checker on colors.com. Coolers, colors. So make sure the text and background you want to use will be legible. There are also plugins for the design tools that your designers use to help them measure color accessibility. The principle is very simple. You need high contrast between your text color and its background. Light gray on dark gray. Yeah, not so good. Check out the HubSpot website. Dark text, white background. Even if you didn't know how to read, you'd be like, wow, that sure are some, those are some letters and I can tell that they're letters. But what about color blindness? Well, research shows that 3.7% of Americans are colorblind. That's 12 million people in the US alone. If you want them to have a great experience on your website, think about the way that you use colors. If you're using color text or symbols, say a green checkmark or red X, think about backgrounds that will still allow the symbols to be visible to everyone and avoid relying only on color to indicate meaning. Use text indicators to support your symbols. Tip number three, consider text size and style. The principle is very simple. You want as many people as possible to be able to read your text. That means your fonts can't be too small or too low contrast. Here, it's about solid design principles, like clear, consistent type styles with a clear hierarchy. Put important microcopy above your buttons and use meaningful text for CTAs like, click here to download the report, not just more. When you think about accessibility from the start, you make good choices. So when you're designing your web pages, don't just think, hey, that looks cool. Think, hey, will this be accessible to everyone? Tip number four, use your markups well. We all use the hierarchy of type on a page to give us a sense of what's important, to allow us to scan the page and get the meaning. Well, visually impaired people use screen readers to read out your site. So the idea of hierarchy is even more important. And for hierarchy, we use markups, H1, H2, H3, titles, subtitles, and paragraph styles to help readers understand the structure and order of the content. Use markup well, and your users will be able to listen to a list of headings and jump straight to the right content. Whoa, beautiful, fantastic, excellent work. All right, tip number five, make your site easy to navigate by keyboard. Remember, not everyone uses a mouse. In fact, some of us are controlled by a little mouse on our head, pulling our hair, and that's how I'm recording this video right now. He gets hungry up there, so be sure to drop a little cheese nugget in the comments. That means your site should be easily navigated using only the keyboard. And that means paying attention to a thing called focus states. Focus states indicate when something has been selected by hover states, underlining, or highlighting. This is really simple, but only if your designer is actually thinking about it. So make sure that they do. If I can't actually purchase your product on your site, I don't think your sales team or your CFO are going to be pleased as punch about that. You know what I'm saying? Finally, tip number six, be accessible to hearing impaired people. You might not know this, but about 15% of adult Americans have some level of hearing impairment. That means you can't rely on audio only. Use captioning for all videos on your site. Offer transcripts, podcast episodes, and webinars. And make sure the key steps in your web journey aren't reliant on audio alone. All right, let's step back. Are you noticing a pattern yet? All these tips are basically just examples of good UX principles and an inclusive mindset. So really, it's just empathetic marketing. Knowing your audience. Things like gender-neutral language. Sensitivity to your whole audience, not just a part of it. Taking the time to include everyone and making that a priority. And of course, testing like crazy with a truly diverse audience of testers. Web accessibility is an optimization journey. Making your website better and better by including more and more people. So I hope I've convinced you about the importance of web accessibility and showed you it's not hard to improve yours. You just have to want your site to be a great experience for the greatest number of visitors for everyone. And then get to work. So the two resources that I told you about at the top of this video. The first is web accessibility. The ultimate guide. It's packed with everything. Literally everything. You need to make your site accessible to every visitor and to make the business case for accessibility in your company. We've also created a web accessibility checklist for you. The checklist makes it easy to make sure your web pages and digital experiences are accessible before you press publish. How cool is that? Links to the ultimate guide and the checklist are down in the description. So that's pretty much the ins and outs of web accessibility. Now if you'll excuse me, I'm gonna go make myself accessible to my kitchen because I'm making some cookies and they're about to be accessible to my tummy. You know what I'm saying? Until then, I'll see you next time.

Speaker 2: I can't find this client info. Have you heard of HubSpot? HubSpot is a CRM platform. So it shares its data across every application. Every team can stay aligned. No out-of-sync spreadsheets or dueling databases. HubSpot. Grow better.

ai AI Insights
Summary

Generate a brief summary highlighting the main points of the transcript.

Generate
Title

Generate a concise and relevant title for the transcript based on the main themes and content discussed.

Generate
Keywords

Identify and highlight the key words or phrases most relevant to the content of the transcript.

Generate
Enter your query
Sentiments

Analyze the emotional tone of the transcript to determine whether the sentiment is positive, negative, or neutral.

Generate
Quizzes

Create interactive quizzes based on the content of the transcript to test comprehension or engage users.

Generate
{{ secondsToHumanTime(time) }}
Back
Forward
{{ Math.round(speed * 100) / 100 }}x
{{ secondsToHumanTime(duration) }}
close
New speaker
Add speaker
close
Edit speaker
Save changes
close
Share Transcript