Episode Transcript
Monica Pitts 0:00
Hello again, and welcome back to marketing with purpose, or maybe you haven't ever hung out with me before over here. So I'm Monica Pitts. And welcome if this is your first time again, to marketing with purpose, today, I am going to take you through a crash course on ADA compliance for your website. And I can't believe that I have not talked about this before, because I've had multiple people asked me to cover this topic on our podcast, and we talk about it often with our clients. Now, I'm guessing if you chose to listen to this episode, you know what ad a compliance is for a website. But that would be assuming something and so I am not going to do that right now. So first, let's talk about what it is like ADA compliance is short for the American with Disabilities Act standard for assessable design. That act is enforcing that all electronic information and technology like Your website must be accessible to those with disabilities, people are definitely becoming aware of the fact that they are responsible for providing a website for all users to enjoy. And that's a pretty exciting thing. I love it, I love that it gives us some parameters to work within as web designers, because there really aren't any rules to how we do our job, we just we just do it however we want to. And sometimes that's great. And sometimes that's not so great. Like when we get so crazy that the end user can't even use the site without getting a PhD and how to use the site, which is totally stupid. If you have to give people a training video on how to use your website, you have missed the mark, my friends, people should just be able to use it. So I just hope that web developers can embrace ADA compliance as a way to make sure that their website is usable by everybody, and get even more creative within the parameters that they're given. Now, before I get into this crash course, I want to talk with you have about a few myths. All right, there's actually a great website out there. It's called A one one, why myths.com A one one Why myths.com. And it takes you through multiple myths that people have about accessibility. And it debunks them for you. I read through this website months ago, because it came to me in an email newsletter. And I was like, wow, these people are so incredibly right. And I want to share with you some of the things that they address on the website. So the first thing is that creating an accessible website is not just creating a website that is usable for people with disabilities. It's creating a website that is usable for everyone, yourself included. Now, here's the deal. The number of people with disabilities is not small. You think, oh, well, I'm just I'm revamping my website for this, these few people who can't see or they can't hear. But here's the deal friends, around 15% of the world's population, that's like 1 billion people are disabled. That is the world's largest minority. You are making your website so they can use it. But it's not just them. It's you too. Okay. Let me explain. So yes, some people with disabilities, they have to use a screen reader or they have to use a keyboard to navigate. And some of those people do fit into that 15%. But we can all become incapable of using a website the way that we normally would, at any given point in time. So for example, what about if you broke your arm? Or what about if you have arthritis, that's acting up because it's cold out and you can't use your mouse the way that you normally would? So instead, you're using a keyboard to navigate? Or here's one that might hit a little close to home for some of us. What about somebody who is like on a laptop that doesn't have a mouse and is just using the trackpad, to go around the website and the keyboard or any other way that they possibly can to navigate this site? What about if you're a mom holding a crying baby in one arm and trying to navigate a screen on your phone for a website so that you can call a doctor? And that website doesn't work the way it's supposed to work on a mobile phone? Because it wasn't optimized? Or what about if you're in overstimulated interrupted distracted parent just trying to finish their last task of the day? I've been that parent. And you know what? I've also been that parent not finishing my last task of the day, but trying to buy concert tickets and ended up spending $400 on the wrong tickets and never got refunded. Yes. Okay, friends. So these websites that we're building, that I'm asking you to consider making ATA compliant and like holding your web developer accountable, to provide a user experience that's fair to everyone. It's not just for people with disabilities. It's for everyone, everyone, you included because we all end up in these spots. When we're not using the website like we normally would, okay? Here's the challenge, though, you cannot just quickly add all of these things later. You can't. Because accessibility is more than just being able to use a screen reader or being able to navigate with the keyboard, like, and it's not just the pages of your website that need to be accessible. It's the template, there's some certain things that go into the template. But then also like your PDF documents, every PDF that you upload to your website, if you want to have a truly ADA compliant website has to also be ADA compliant. Okay, so do you want to go back and reformat all 1000 of your in accessible PDF documents? No, you do not. So while some things could actually be retrofitted, starting from the beginning with the end in mind, and making sure that you understand the parameters of what you're doing in your website, that's where the magic is my friends, right there. So I'm dedicating this episode do planning with the end in mind, I'm going to take you through 13 tips to make your website more ADA compliant. This is a no way an exhaustive list. Okay, there are so many different things and resources. And I'm going to give you some links on the blog to some of those free resources and Chrome extensions that you can use to boost the compliancy of your site. And of course, share them with you in this episode. All right brands, let's dig into ADA compliance, Let's get to business.
If you're a natural born marketer, You're one lucky son of a gun. If you're like most people, marketing, especially online marketing is about as appealing as standing in a police lineup. The may create team of creatives has transformed websites and digital marketing from craptastic to fantastic since 2005, our podcast marketing with purpose make sense of marketing, so you can make purposeful decisions instead of carrying on with the same old crap you've been doing. And now your host, Monica Pitts, founder of may create with another episode on how to make your marketing not suck. So the first thing that you need to know about ADA compliance for your website is that there are different levels of compliance, there is the base level, which I feel like, if you're doing a good job with your website, you should just be meeting it. And then there's the second level, which is going to require more work. And then there's the third level, which is like, whoa, you went all out, every single thing on your website is compliant from the videos, so the audio, all that kind of stuff, all of it is compliant. Alright. So there are certain types of organizations that have to be compliant all the way across the board. And then there's others that don't have to go nearly as deep into compliance. So who needs to worry about it? Well, under Title One of the ADEA law, any business with at least 15 full time employees that operates for 20 or more weeks every year is covered. So you need to be compliant. Under Title Three businesses that fall into the category of public accommodation, such as hotels, banks, and public transportation are also required to comply. And then, of course, anybody who is a government entity like schools, public transportation, the US Postal Service, they are all required also to comply. But really friends. This just because you're not required to comply, that doesn't mean that you shouldn't, it's literally a moral obligation. All websites should be at least base level ADA compliant, and inclusive to everyone. That's my personal belief. And that is what we always strive for it may create is to get to the point where your website is as compliant as you possibly can have it within your realm of ability, because part of the responsibility of creating an ADA compliant website does fall in the hands of the web developer. But then the next step to make it even more compliant, and user friendly to those with disabilities falls into the hands of the person who's updating the website on a regular basis. So if you're that person, then you really need these tips that I'm going to give you in just a second. Because the things that you do on your website, as you're adding content to the website on a regular basis, it needs to meet these compliance standards, just like your web developer needed to design it also with these compliance standards in mind. Okay, so let's get through those 13 tips. The first thing I want you to be aware of are the colors that you choose for your site. Not all color pairings are ADA compliant. So what the heck am I talking about here? So you pick a background color and then you put a color of words on top of it. They have to have enough contrast that people can see them Regardless of whether they're colorblind, my husband was just complaining about color compliance, like two days ago, because the USGA, US Golfers Association, they just updated their app. And now and so in the past, it had a, I don't know, Matthew had a white background, because he never complained about the colors in the past. But he said, It's really normal when people are over par, to show the numbers in red. And then, and usually, that was okay, and he could totally read it. And he's like, I must be getting old or something, because they put this red lettering on a black background. He's like, I can read the white just fine, but the red, it's like, I just can't read it. So friends read is just a tricky color. I gotta be honest, it doesn't matter if you put red on white. If you put white on red. If you put red on black, it is not always easy to read. So I would actually be surprised if their app is fully ADA compliant from a color perspective. And considering that their audience is predominantly males, and there are more males with color blindness, red green color blindness, mind you than females, it's kind of surprising that they would be making this mistake anyway. Sorry, USGA. If I'm calling you out on something that you didn't already know, and maybe you're fully compliant, I don't know I didn't run your app through the compliance checker. All I know is that my husband was complaining about it. And it made me think, Hmm, people made this mistake all the time. This is a very great example to share color compliance. Also, if you are picking the color of your links, it has to contrast enough with the normal color of your text that someone who's colorblind can actually tell that it's a link, or you could do something crazy, like underline it, which leads me to number two, which is links need to look like links, okay, friends, so make sure that your links look like links regardless of the colors. I am a huge fan of underlining links, I really am I like Okay, so maybe back in the day when I was trying to be like overly creative. I didn't underline links when I did my designs, but I do usually make them some form of blue, and very high contrast for the text. And I am constantly telling my designers, Hey, friends, this does not have enough contrast to meet compliance, and it does not look like a link to me. Because in the design, they're just trying to make it all pretty. And then I'm the person that it comes to next. And I have to be like, Ooh, what is the user going to feel like when they're using this website. So there you go, your first two tips under our belt one, watch those colors, make sure that you optimize them for people who are colorblind. And to make sure that your links look like links and that they are high enough contrast from your text that people know they can click on them. If you are concerned that your colors are not ADA compliant, I have a tool for you. It is called contrast checker. And it is a Chrome extension. We'll link to that from the blog post. But you can also just go out and search Google for contrast checker Chrome extension, this particular tool is actually really good to use while you're designing things. So you use it as you're going along to make sure that everything is compliant, we use another tool at the end of the build, to make sure that things are compliant in the end and overall. And that tool is called wave evaluation tool, which is also a Chrome extension. So wave wa ve evaluation tool. Now this, you would look at the whole page of your website, and it will highlight any compliance issues that it sees. But remember that we are going through this list so that way, you're not retrofitting things, right. And so using tools that allow you to check as you go, that is the money spot. And that's why we love contrast checker. Okay, so the next thing that I want you to make sure you do is add meaningful alt text to your images, if you've ever hovered over an image and there's a little box that shows up and it has words in it describing what the image is, or waited patiently for a page to load and see a box with words in it before an image loads, that is your old text. And at that moment, you're actually experiencing a little bit of what a screen reader would do. It reads the alt text so that way people can find context from the images on the site, even if they can't see the images. Now remember, too, that Google can't see the images either it just reads the alt text as well. So it's good for Google and it's good for anyone with disabilities to put that alt text in there. So just describe what the image is in the alt text of the image. The next thing I want you to stay away from though is having big graphics with words on them because words in general should be typed into a page. And if for some reason you do decide to have a graphic with words in them and I know that we have these on the may create site. Hey, I wanted it to be super pretty. I get it. I'm breaking the rules. Okay. But here's how you make that compliant, you put the words that are on the graphic in the alt text for the image so that way a screen reader can read that graphic to the person on the website without them being able to see the graphic. See, it's magic. There you go. Okay, so that leads me to the next thing that you should be doing as a website. Administrator, right? As you put information into your pages, you need to use logical heading hierarchy.
So what the heck does that mean? Okay, so we've all used Microsoft Word before, and we've seen Heading One, Heading Two, Heading Three, heading four, up at the top of the page, right. So you use those same headings whenever you format the content inside of your website. And if you're not using them, you totally should. And if you want more information about why you totally should head back over to my podcast writing for the web do's and don'ts, I'm going to explain it all for you there. Now another reason that you should use them is because it creates a hierarchy for the screen readers on your website. So it gives a better user experience for those people with disabilities on your website, and a better experience for those people who are normal on your website as well use them. Okay, so the most important information is going to be the title of the page, that's going to be your h1. And then the second most important information will be your H tos. And the third most important information will be your H threes. And these are all headings that you're going to sprinkle in above those paragraphs of text all throughout your page. So think about the content on your page, like it's a bulleted list. And each of those headings would be the next indention in the bulleted list. I hope that's clear as mud. And if not, well, doggone it, maybe I need to do a training over this. But alright, so let's move on from that before I just like beat it to death to my next layer of ADA compliance. As you are updating your site, you don't want to use words like above, below or to the left to describe what you want people to do on the site. Like you've all been on the site before where it's like, click the link below to learn more. Well, here's the deal friends, those links might not be below they, they could be someplace else, because the page adjusts to accommodate different screen sizes. And things move. And so that's just a normal user, right? Now imagine that you've got a screen reader, you're not even seeing the screen and it says below? Well, you can't see below, right. So instead, what we want to do is we want to actually link the words that describe what people are going to get if they click OK. So this leads me also to my next rule. So I'm going to explain that to you. And then I'm going to tell you how to do what five and six are. So don't use the words, click here, and then link the words click here. Because people with screen readers might not know what you're referring to. So instead of saying click here, or click the button below, or click the button at the left, you're going to link the words that tell them what they're going to get. So let me give you an example. If you had a phrase that said, click here, for more information about ADA compatible links, and you were linking the words, click here, you would change and you would not have it say that instead, you would say more information about ADA compatible links. And you would make that phrase more information about ADA compatible links the link, because it's the thing that tells you what you're going to get on the other side of the click. It's magic, right? Okay. So just make sure that you're thinking through that, as you're going through the updates to your website. And as you're building out your pages. Okay, so the next thing number seven, is, okay, so all parts of the website, if you want to reach the highest level of compliancy, all the parts of your website need to be compliant, that that's not just the images and the words and the links and the headers, it's also your PDFs, and your video and your audio, it should all be compliant. So your PDFs should fire follow compliance standards, Your videos should have sub captions on them. Your audio should have a written transcript for it. So it can be read as well. And, well, friends, yep, that's what it means. And so that's those are those are items that are in that higher level of compliancy. Because they do take so much energy to make, but it's not that hard to make a transcript, really. And if you upload something to YouTube, they will automatically put subtitles on it if you enable it. So it's not that hard to reach this level of compliance friends, it's just maybe those subtitles aren't going to be exactly right. Or maybe that transcription isn't going to be exactly right. But it's way better than not offering it to someone on. And then my last point in this too is that like it that those video and those audio like subtitles and transcript options, that's not just for people with disabilities, think about somebody who's at work, and they work in a really quiet office. Or maybe they're at a kids sports practice, and they want to watch your video, but they can't listen to it because they don't have headphones. And it would be disrupting the people around them. Those people, they don't have a disability, they're just in a situation where they can't play the audio, and they could play your video or they could read your transcript, and they can get the information that you need them to have, by the other means. So isn't that fancy, you just make it better for everybody. It's very, very exciting. Okay, so those first seven things that we just talked about, like watching your colors, and making links look like links and adding meaningful alt text to your images, using logical heading hierarchy, not using words like above or below to the left, or click here for your links, and making sure that all of the components of your website are compliant, like your PDFs, and video, and audio. Those are all things that if you are updating your website you are responsible for you can't blame your web developer for the things that you don't know, they could have built you a completely compliant website. But then when you go to update it yourself, it's your responsibility to know how to do these things and make sure that you do them if you need to maintain ADA compliance on your site. Now these next list of things, these are for your web developer, so if you're building a new website, or if you need to go have them retrofit these things for you, here are some big picture items that I want you to discuss with them. Now, once again, this is not an exhaustive list. As a matter of fact, I'm actually look at looking at our ADA compliance checklist that we performed for our clients earlier this year. And there are so many things on this list, I'm not going to tell you all of them in this podcast, you would just be like bliss, Monica, be quiet, okay. But I do want to talk to you about a few things that I feel like are really, really important. So let's start at the top with your menu, because I actually have a couple of items that are relative to your menus. The first thing is that I mean, your navigation needs to be consistent and let users know where they are in the site, either using breadcrumbs for like a big site or highlighted menu items in smaller sites. This is common practice, and most websites do this. Now the next thing that some websites don't do, and that you don't see is it needs to have a skip to the Content link underneath the site navigation. Now it doesn't show it doesn't show whenever you look at a site, or else you guys will be like oh, well, there's skip to the content. But what happens is when people are using a screen reader, they can literally just skip to the content. And then they can skip reading every single navigation link at the top of the site, which is super convenient, and probably keeps them on your site way longer. Now, the other thing that your menu
should not be is a hamburger menu. Yeah. Okay. So at may create, we are like, we've been steadfastly opposed to putting mobile navigation, which is like that hamburger menu, you've seen it before, it's the three lines stacked on top of each other in the corner of a page that will expand out the links to get to the pages within sight. On desktop. So people put the mobile menu on desktop. And they've been doing it for a while now. And they think that they're just so darn clever, and we don't like it. We don't like it because it forces people to make another click, and sometimes another click to be able to find the page that they're looking for. And we want people to be able to find the page that they're looking for quickly without having to click 14 times to get there. All right. And we know that that means there's going to be words up across the top of the page, we know that and we are okay with that. And we guide our clients to do the same thing. And it was very gratifying to note that hamburger menus are not actually ATA compliant. on desktops, you're supposed to be ADA assessable and compliant, you have to have your menu be visible and available. So creating an extra ship for users is just something that like we have not been able to get onboard with, and neither do the compliance people. So don't do it. Just stop it, hop. Okay, so the next thing on your checklist is that your website needs to have the ability to be navigated using just a keyboard. So you need to be able to go through the different elements on the site, either using tab or arrows and friends. I did not realize how handy it is to know how to do this until I really started compliance checking sites. So one of the ways that I became more familiar as to whether a site was ADA compliant or not was I went on our websites and I started trying to use it without my mouse. Yeah. Yeah, it's crazy, right? And so I was just like, Alright, I'm not going to use my mouse, I'm just going to use my keyboard. What does this do? And you know, what I figured out is that sometimes when a website is broken, and it's not acting, right, I can use my keyboard to get around on it. And, and it's awesome. Yes, I was so excited. So excited. Okay, so I'm not going to explain to you all the weird times that I found this helpful, but you should try it sometime. I find that I use it most often when I'm going through forms, like I'm completing a form and I click tab to go to the next form field. Do you know how annoying it is when tab takes you like six form fields down, and then you have to go back up. But you can't get up into the form any other way than using your mouse. That's what's happening to people, my friends. And this is especially important on your PDFs. Because if you turn your PDF into a fillable, PDF, you need to be able to tab through the fields in a logical order. So people can fill them out without having to use their mouse to go back up. Yeah. All right. So there you go need to be able to navigate using a keyboard. And part of that keyboard navigation is making sure that things like your maps have multiple zoom options. And that information that's displayed in sliders have multiple control options, that functions triggered by a mouse can also be triggered by a keyboard like you have to be able to click on a link using a keyboard, not just your mouse. And then last but not least, and this may sound logical to you, if you've used a keyboard navigate a site before, but it won't, if you don't usually use a keyboard, the item that's highlighted when you're navigating with the keyboard needs to be visible and clear like it needs to be in focus, you need to know that that's the thing that you have highlighted, like some developers take that off. And that's dumb, because then you can't use a keyboard navigation because you don't know where you are on the site. So there you go, you if you don't have a mouse to follow around and track with your eyes, and you're using your keyboard, then you don't know where you are in the site if your area is not highlighted for you, so make sure that it is visible and clear where the keyboard focus is. So the last two things that I want you to make sure that you express to your designer, in case they're getting like overly creative with you in this website is that you should not have fast blinking objects on your site. And it's not cool. It's kind of like turning on a ray of light in the middle of a classroom, people are like, Oh my gosh, what just happened. And that's the same effect that it has on people on your website. And some people have disorders that put them into seizures, when they have vast blinking lights or objects in front of them, don't be that person. The same goes with auto playing videos. And that's my final thing number 13. You're not supposed to have auto playing videos on your website. And I know that it is very popular to have headers with auto playing videos in them. We've all seen them. And sometimes they're very ambient and beautiful. And I'm not saying that we don't ever build them. But we also have to take note that to have a truly accessible website, you have to give people the option to play your video in the header of your site. So I'm not saying that you can't have a video up there. Clearly, some of our clients have them. And I am not trying to sway you either way, I just want to give you the information that you need. So that way you can make an educated decision about where you land on this particular area of ADA compliance. So to recap, the things that you need to talk to your designer about are making sure that the menus are consistent, and that they show where you are on the site, that you don't have a hamburger menu on your site, you have a skip menu button, you have the ability to navigate the site using a keyboard using like the arrow or the tab keys. And then you don't have fast blinking objects on your website. And you don't have auto playing videos. Unless that's something that you decide you really want to include, in which case that would be your decision. So hopefully now you know way more about how to make your website ADA compliant than you did before this episode. I hope so that was my that was my point of all this. If you take nothing else away from this, just remember that making a compliant website is not just about serving people with disabilities, it's about serving everyone better, because everyone gets into a position where they're not going to be using their your website in a normal way, like the way that they would normally use it and allowing them other ways to get through the website. That's just being considerate. Okay. It's like holding the door open for someone and we don't just slam doors in people's faces. That's rude. And having a website that doesn't consider opening the door for somebody. That's also kind of rude just calling it out. Okay, so, if you enjoyed this episode, or if you learned a thing or two, you could give me a review And you could say that I'm smart. And then maybe other people could learn about ADA compliance too. Or, I mean, maybe you're on a DIY website journey. I don't know, like if you're trying to build your website yourself, and maybe you're feeling a little stuck and like you might want to have some support, I got a thing for you. We are going to be opening our next session of the better than DIY website program where we help people design their ADA compliant website theme, and onboard you to the system. And we just would train you on how to put the stuff on your pages and launch the site and the whole ball of wax so you can get an awesome professional looking site at a fraction of the price and be completely supported throughout the entire process. It's really awesome. So if you're interested in that, you can go out to me create.com That's ma YEC r e a t.com. Forward slash DIY website. And I would love, love, love to have you in the program if that's what you need. Okay, friends, thank you so much for hanging out with me today. Thank you for getting your learn on and until next time, go forth and mark it with purpose. Thanks again for listening to marketing with purpose head over to May create.com MAYE CR ea t.com Yeah, you heard me right and a y e create.com. For podcast notes and more resources to grow your business. Don't let your marketing suck. Get your pride on market with purpose.
Transcribed by https://otter.ai
