What ADA Compliant Website Advice Should You Adopt To Make Your Podcast Website Surprisingly Better?

Want your podcast and videocast to be seen, heard, found, and rewarded in this noisy digital world, you are not alone. Join the nonprofit community at Podcasters United and podcast industry experts Tom Hazard and Tracy Hazard as they debunk all that outdated and bad advice you've been getting from the podcast gurus and find out what actually works. Today, get ready to finish feed your brand with smart cut tactics proven to cast your original voice to the world.

Hey, everybody. Welcome to feed you'd brand. I'm Tom Hazard along with my co host, Tracy. Today, we've got a very different kind of a topic to share with you, Tracy. You want to let everyone know what it is?

Yeah. So we're going to talk about accessible websites, ADA websites, ADA compliance with websites. So this is a controversial topic that's sort of been coming up and in the news for a while because there's been some organizations going out there and suing websites for being not as accessible as they could be. And what that means is accessibility. So the American Disabilities Act, ADA has Title 3, which says that if you have a location for your business, it needs to be accessible to people with disabilities. And that is a law in place. What we're seeing is a broader application of that. It was already applied to local and state governments had to have accessible websites, by a definition already established because they have to provide information for all people. Right. But we, as private website owners, haven't had to comply with that very frequently. Right. That hasn't come up before, but all of a sudden, there's been a lot of lawsuits, a lot of companies being sued because their websites aren't accessible. And the reality is, is then whether or not you want to get into the legal tangles of it, we don't. We're not lawyers here, so we don't want to get into that at all. Right. No, none of those legal weeds. But whether or not you want to do it, let's talk about the spirit of what that means. Right. I want my website, I want my podcast to be seen and heard by as many people as possible. Right?

I definitely do. And I have to tell you, Tracy, when you first brought up this subject that we're going to record it, I didn't really have awareness that the Americans with Disabilities act treaded into websites. I was like, really? I always thought of that as physical disabilities. And I remember when that act was passed, all kinds of buildings had ramps put in and other features. Right. I didn't know that your website was a part of that.

Well, here's the reason why they're starting to more broadly apply this and why people are suing over, trying to change, expand this law, right, to cover websites. Because most of us do not have a brick and mortar store anymore. We only have a website. So if you're only web based, that is your presence and the title 3 talks about your presence to the broader community, to the people that you're looking to serve. So theoretically that means that if your podcast only has a podcast website, you know, only has a website for the podcast show. The website itself is its storefront. It is its place that people access it. So do I want to be the kind of company, do I want to be the kind of podcast host who has the most accessible show as possible? Absolutely, we do. You know, one of the things is, is that we have all of our videos have captioning on them. Why do they have captioning on them? Because that's great for the hearing impaired, right? We want to have that and we have video, audio, blog, right? Why do we have all three of those things in everything we do? Because we want to be seen, heard, found. We want it all to be able to see, nerd read, right? We want it all to be there for as many people in the way that they want to consume it. But what about the way they need to consume it? Right?

And so what I'm going to talk about today, I had my team do so. We spent three months exploring this out, figuring out all the different pieces and all the different things that we might need to make our websites more compliant and what do they look like now? There are a bunch of websites out there, accessible metrics and accessible.com, like there's a whole bunch of them out there that offer these things. I'm not going to make a commentary about it, about which ones are better than others. Clearly we used a couple of different ones and we were testing it out to see and try to get the broadest look at what could happen. But here's what happened to us that's so surprising. It looks better.

I was shocked. I have to tell you, I heard that, oh, we're going to make our website ADA compliant. Okay. I didn't know what that meant. Did that mean all the text is going to be huge? Because people that can't see as well need big type and we're going to have to scroll more. And I mean, I really didn't have a good concept of what this meant, but I have to tell you, I was shocked, pleasantly surprised and shocked at actually how much better it did make our website feel.

And so is our web team. I have to tell you, they were very surprised. So the whole spirit of ADA is to make full and equal enjoyment of goods, services, facilities, privileges, advantages, or accommodations of any place of public accommodation. Right. And so take that to mean of any place of public consumption. Right. Like, so I think about it that way. So that was the spirit of what we were trying to do. So we said, okay, so we don't know what kind of disability someone who might be trying to go to our website has, or we can assume they might have seeing issues, they might have hearing issues that might be some of the most predominant. So that's part of what I think it takes a look at most prevalently. But here's what I know. Colorblindness.

Oh, right.

It's a form of seeing issues that we don't know. Did you know that there are 300 million people worldwide that are colorblind.

A scientific standard? 300 million. That's almost the entire population of the United States.

I was just thinking that.

Right. Wow. And so, and this is what we found when we used to do a lot of work in China is that the normal prevalence of colorblindness in men is much, much higher. In women, it's 1 in 12 men. So about 8% of men have this problem and it's 1 in 200 for women. So it's big difference. So more men have this issue. And there are different types of colorblindness. So they could be red, green, colorblindness. There's all different types of. They can't see patterns in certain areas. There's also true, absolute full colorblindness. Right. That. That happens as well. It's a lower percentage of the population. But so by any definition of being able to undersee one color in the spectrum, you would be defined as colorblind. So we're talking about 300 million people who we may not be accommodating by what we're doing with our color selections for our website, because we're choosing colors based on our brands and our. What we like, what we want, you know, what we want to convey. We're not thinking about the readability and the viewability of. Of what we're doing. So color was the most significant thing that we did first, and that had the biggest impact visually on what we created. And it actually started solving some problems that I was complaining about about our website, because sometimes on the mobile device I have trouble seeing the text and I'm always like, blowing it up. Right. And so I kept complaining to my team, I think your text is too small. I think this is happening. But what we discovered is we didn't always have to raise the size of the text. Sometimes we just had to clarify the color contrast between the two parts to be able to get that to go. So colors. Some of the findings that my team has given me, I'm going to read a few of them to you. So if you see me looking down occasionally, that's what I'm doing. But they said never use light gray as a text. Do you know how many websites I come across that actually use a light gray for their text?

Tons of.

And it's not just light gray on white, it's like light gray on a darker color. Right. That's the typical conversation. So instead of using white as the contrast, they use a light gray. Huge problem there. So never use light gray for text. Don't use color as the only instructions. So in other words, if you say required fields in red, but it just shows the color and the word red is in red, people with red color blindness can't see that. They can't see the word. So we don't just do that. So we describe it and we don't color it. And that's the best way to get around that. So the foreground and background colors have to have a color contrast test. That's where some of these accessible metric sites and other things can come in handy because they can tell you about the color contrast. This is the time I want to show you what we did do.

We want to do that because there are, you know, we're giving you sort of an overall view and trying to raise awareness for what it means to create a website that's ADA compliant. But fortunately, you don't have to take our word for it. We do have a resource for you where you can actually have a site that reads your website, gives you a score, and gives you suggestions for improvement.

Right. And that's what you're going to see here. You're going to see the side by sides of where we had it, like before and after. Right. And so you'll see that I have.

These all loaded up here and I'm not. Did you really?

Because I don't see them.

Oh, there, that's it, that's it, that's it.

There you go.

Okay, so we start probably with the homepage, right?

Yep. So this is the homepage.

The old one.

The old homepage.

And I've blown it up. And we're gonna have to scroll side to side Tracy, otherwise they wouldn't be.

Able to see it. So you're. What you're seeing is, is that as the accessibility metrics of 72, we weren't horrible. We weren't like down at 20 or anything. So. But you can see we had a white background, blue letters. Like, we thought we were doing pretty well in how we were viewing it. We weren't using gray. Thought we were pretty good here. But now let's look at what it looks like.

Well, do you want to go over anything about what it says?

No, I won't go into those details.

Old website. And then as I move over here is the new version that is 100% accessibility according to the measurement of what is this tool, Tracy, that we use?

So this tool is one of those accessible metrics tools. So we used a couple of different ones, but this one has a clearer like chart, so we could show it side by side for you. So we actually just ran it through one of the ones we didn't actually end up using to do all of the exact changes to everything. But we used it as a gauge, if you want to call it that. So I will link to this and to some of the other tools that we use. I will link to them in the blog post for this episode, and that will be@potterties.com under the Feed your brand blogs and for this podcast.

So you have to do this one page at a time on your website, Tracy.

You do it one page at a time. But there are some overarching things that once you change them, it's going to happen on all. So if you look at that top bar up top, you see how much darker that is. So it's creating especially over to the left side. So we still got our color styling going. So our creative team still had a little say in it, but it used to be that light blue all the way across. But then the white letters were harder to read. So go back to the other side again and you can see, see, it was a little harder to read. Not as much contrast, but by creating a gradation from that darker color, we put the dark of the color over where all the white text was, and we still got the gradation. So we got a little bit more fun into our lettering. And so we did the same with the other letters. As you see, there's a gradation around it. What it's done is it's putting a heavier, darker blue to make it seem to make it seen and more visible by doing that. Super simple. This is just the Most basic one. This is not even one of the more dramatic pages, but you can see it just made a change. And actually it kind of looks more fun and better.

I thought it was more lively. It's refreshed. I really liked and appreciated it.

Yeah. So let's go to the other ones we've done here. And so this one was just. We have our video on here where we tell people about how to use our ad mixing system on our productize hosting platform. Right. So we tell exactly how to do this. Again, we got about a 75% score. And this is just the section of it with this score actually applies to the whole page. Keep that in mind. And let's go and look at what it does again. We switch to that brighter blue. We got more of the darkness. The letters are running in bright or white and they're instead of black on blue. And they're running in this place where you can see what we're saying a lot better. And then if you notice that anything that's underlined, anything that's a link through, we actually haven't changed its color. So if it was a link through, it will click. This actual word is just underlined to be struck, you know, as to.

For emphasis.

Yeah, but if it was, we would have left it. That's one of the things, especially in the headlines. We never put a link through in an alternative color. So then let's go on to the last one and just so you can see what you know, some of our most important information are our services page. Right. This is where we want impact. We want to make people want to buy. Right. And you can see we have this light color palette that was going through the system and just by switching the color palette over to that darker color palette we've already now been using, which we applied globally across our site. Right. We didn't have to change everything on every single section, but now you can read our tagline better start broadcasting your message to the world. Want to record, upload and be done. It's easier to read all of those things. So we're going to also be going through and creating a little bit, taking a look at all of our icons from that perspective. Because what's in your image and what's on your icons don't always show up in the accessibility score because it's what's actually on the page, not what is displayed as an image section.

So there may be different things you need to look at more carefully. And by the way, for those of you listening to the podcast, you Definitely want to go to the blog post for this episode and look at. We'll have the screenshots of this and also you could look at the video if you wanted to.

Right. And we'll have them side by side. They're broad panorama view of the two things side by side. So even if you are watching this on the video, you might want to go to the website and check that out because you can look at them side by side and you can also use them for when you're communicating with your team about the changes that you'd like to be making as well. So. So anyway, these are just some of the changes and talk about some of the rest of the things. So as we went globally through it, I mentioned this briefly. Links are a big thing. So you know we have these what we call hot links or HTML links, right? The links where when we click on them it's going to take us to an extra page or it's going to pop us up into something. Right. Those links are really important and we get really used to them being switched to blue. But if the surrounding text, if all the other things makes it difficult both for us to read that color and for it to be seen by someone. So we want to never make links in red, green. We've got to be careful about different colors that we might use for those links, right? So we need to have a contrast between those links color and the surrounding text color. And it would be better to have no changes to them than it would be to have a bad contrast or a bad color choice. But the accessibility wants us to have a contrast so that we know clearly the difference between something that's linkable and something that's not. Right. So that's why that bright blue that is typically used in the link. So many people like to branding people like to change that on their website and get like fancy with it. And I have a purple website, I'd like to have purple links. It's not a good idea if the colors are not in high enough contrast between it. So maybe your color palette is purple, but if your text is black and then you put this dark purple as your link text, you may not be able to distinguish the difference between the two pieces. You might have to go and use a lavender, a bright lavender, you know, to make that work in your format, in your styling, in your brand guide. So keep that in mind. They have to be visually distinguishable from the non linked text so that people know I can click here, right. The other thing is that we got to be Careful with what we're saying, because click here and not having clearly where they're going to go is actually a really bad practice. It's a bad SEO search engine optimization practice. But it's also really against accessibility because I'm not telling someone where they're going. It just says click here and it's brightly colored. Instead, I want to say click here to go to and clearly define where it is going. And the text of where it is going is what I want to make that bright underlying color that's contrasting everything. That's the most accessible view of telling people this is where you're going to go when you click on this from my website. Right. So we're being clear and more forthcoming with our audience. That's safer, that's better, it makes a richer experience. And because we're hot linking and doing backlinks or cross links, because I might be linking to somebody's website who's been my podcast guest. Right. And so if I'm defining that now, I have actually a better link. Otherwise I'm linking the word click here to a page out there instead of linking the keywords or the person's name or their website and having that be a clickable link.

So that has an SEO impact.

Has an SEO wow. At the end of the day. So you can do yourself a benefit by not doing that as well. Right. That different, though. If you want to also have a button, have the text link, but then have a button somewhere, that's okay. That's a little different model because a button just makes it easier for somebody to click and see it. So if you're asking them to go buy now or do something, that's a totally different model.

Well, that would be more of an internal link.

That's an internal website. Yeah, we're not really going external. So there's some other technical things like skip links and some other things. For those of you who are out there who know stuff about websites and technical. Those are all in there. There's some guidance for that in the ADA accessibility. I'm not going to go into them because that's more complicated. But what it does is those types of things help people to navigate a website without using a mouse or without using some things. So if I'm unable to use my hands, I'm able to utilize those skip links and other things. So having them built into your system for navigational purposes is actually an accessibility thing as well.

Content structure. This is good structure for SEO as well. It's something that we do every time in our blogs, for all of our clients and everything we do, a title is required on every single page. The page titles use an H1 tag. Like, there's a clarity in the hierarchical sections of how things go. But here's where most people go wrong. They skip the hierarchical links. They go from headline one, headline two, and go down to, like, headline five, because they like the style better. Instead, make your headline three the different style you would like it to be. Keep in your hierarchical order helps with the order of how things flow through the website, but it also helps Google track through your website as well. So you're going to get a double benefit from doing that.

Boy, Tracy, it would seem to me there probably are a lot of web designers out there or brand designers, graphic designers, that are not going to like a lot of the restrictions or the realities of making a website ADA compliant. I mean, I think we've shown in the case of our website how it can actually improve your website, make your website better. But that's easy for us to say in the context of our own site. It may not be true for others. And I wonder how many are really aware and are paying attention to these things.

So this is what I'm going to say to that, Tom, is that the reality is you should give it a chance. You should take a look at it. If you're going to break the rules, you better break the rules knowing what you're going to break.

Right, That's a good point.

And so there are things that you could do. You could make some choices that are different, but you can make them for the right reasons. And so at the end of the day, if you understand what's not working on it, you can make some design choices that make a difference. So, like, our designers could have changed everything to dark blue, and it kind of would have been boring, but instead they created this gradation because it solved the problem, but it had a creative look to it that they felt would be strong. And it honestly refreshed our website. I think it gave it a new, fresh look to it. So those are the choices that a brand designer should be making. They can make them in the right areas, make them for the right reasons, and make more creative decisions within the restrictions that are there, because they're there for a really good reason. Because at the end of the day, no matter how fancy and cool your website looks, if the people can't read it, then it's not useful.

Or if really your goal is to get people to take a certain action on your website and they don't take.

That action because they can't find the button.

What's the wrong color?

Right? Yeah, exactly. So, you know, obviously we want all texts to be readable and everything. But here's the one thing that I thought was really interesting, and this happens so often. I go to a lot of websites and they center the text everywhere. Like they do that on blog posts all the time. It kind of bugs me as a writer. Like I want to have everything. But left aligned text is extremely important for dyslexic users.

Really?

Yep. And users with poor eyesight also need that. So if you've got a failing eyesight, it will help them read through, it'll help them move through your website better. Move through everything. And that's why the headers and the subheaders can still be centered, but the actual body text needs to be left aligned. Now you can do, decide to do justified, you know, making both sides aligned, you know, stuff like that. Fancy. But left alignment is a key criteria.

Regardless of what you're doing on the right. On the left, you want that straight line.

That's right. And it helps people move through your website better. And it's also a better utilization of space on mobile devices. So just keep that in mind.

You know, that is true. I've been on some sites on, on mobile and when I'm blowing it up, because on mobile a lot of times I do that. I'll blow it up. If something is center justified, I'm going to have to be scrolling left and right a lot, whereas otherwise I might not.

That's right.

So.

So now let's talk images, video and audio. Right? Because those things matter to us here, right? We've got all that. All images need to have an alt text. We always do that in everything that we do that alt text usually includes your keyword. It'll have something about your podcast. It describes the image too, or the purpose of the image.

All right, so for those that may not be aware, let's talk about just briefly what alt text is. So it's actually metadata. It's a part of the image when it's put on your website, you don't see it, but the images are files and those files have metadata and the keywords which like Tracy said, for our clients, when we're putting images in their blog posts on their website, we always have alt text that has the most important keyword, phrase or phrases that that episode is about. And that image gets associated with that alt text in Google Image search.

Right. So again, this has a search Engine optimization application to it. But it's also extremely important for someone who can't see it, because a lot of the visually impaired websites and assisted devices read that alt text to them. So it's helping them understand what the image that they cannot see is there. So it's extremely important. And then what if your image doesn't load that alt text will show? So like, that's also.

I would imagine that those softwares for the visually impaired are not only reading the alt text, but also the captions.

They will read both. Yep, absolutely. Because we do use captions as well. But alt text is more important to make sure that you're covering all of that, of what they're missing, of what they cannot see. Alt text needs to be short. Do not pack your whole paragraph into that 250 characters. It needs to keep it short, concise and to the point. And don't try to cram it. I mean, one set of keywords in it, we found if you do more than that, Google actually will degrade your value with them and so you lose points. So keep that pretty simple. The other thing is that there's something called ARIA A R I A and it means accessible rich Internet applications. And they are standards for imagery and how you tag things and what you do. So there is a whole description of the destination of the image link, like it's how it's found. Right. And so that's extremely important that you follow those guidelines as well. You should never use the words image of, graphic of, picture of. It's just redundant. You don't need it. Like it's not important. It is obviously going to be that just because it's an alt tag and then avoid using images as the text. So as your only text. Right. That's why you want to have a headline as well.

So because I would imagine for visually impaired people, those programs are not reading text that's a part of a graphic.

Right, right, right. And so here goes back to some choices that you can make as podcasters. And that's why I thought this might conversation might take just a little bit longer to discuss. That is that you have some choices here. You could skip and not use what we call header images or episode art. Right. Whatever you might want to call it, you may not want any titles on there because the titles are on your blog, because the titles are there. Otherwise you might just want to be using the imagery itself to create that impactful message. We have a few clients who are out there doing that because they clearly understand that the text and the image behind it can compete for your visual space. Right. It confuses your mind. So there is a lot of thinking about this that says we may want to make a separated now, not using that episode art, using that image with the text on it. It's something you should really use in social media, though, and share. Right? There's a place for it.

Yeah, that was something I was going to mention, Tracy, because I know we have clients that have some websites where, yes, the header image for the graphic is right at the top of the image and the title is within the image. But some clients don't like the idea that the title of the episode of the blog post is also in text above that image or just below that image. Here we can understand why it's important to have that title in the actual text of the blog post, even if it's in the image, because I would want it in both places for my podcast. I just want to say that because when I share the URL for the blog post on social media, it pulls that header image and populates it. That's the first thing people see. And having that title in it, I think is a good thing. It's like you said, more important on social for people to see it visually than it is on your website.

Right. And that's why some people use featured image structures or other ways to draw it into social media that way. The use of these things, like what we call ego bait or your, like imagery of your quote of what you're saying about your guest and anything like that, all of that being utilized, the episode art being utilized in social media, it's a different model than what we're talking about here. We're only talking about websites because the website usage is someone trying to use all your data, all your information, get more from you. It's a different model than just capturing their visual attention on social media so that they will click through and go to your website and find out more. Right. Different model of how we do things. Instagram is not made for accessibility and just the whole way that it's done. So just think about that. Is that where is your audience and what does that matter for you? But for the website purposes, this is why we're kind of going over these things. Because the website is different. It is serving your community and. Or it is selling things in your business. Right? It is selling you and your business, and that's important.

And the videos and audiograms, I kind of just mentioned them briefly. Like those things all need captioning and subtitles. We do that automatically for all of our clients when we do that. But these things need to happen. You can turn them on. Like there's setting in YouTube and there are settings on social media. You can turn these things on. They can auto generate for you, you can have them generated. We prefer to be in control of it so that it's right.

Well, especially with the audiograms, which are these 30 second to one minute clips. For that we're not using an auto captioning, you know, like you said, we do that to make it right. But for a full length video, that's a lot of work. So using the feature available on YouTube makes a lot of sense there.

Right. And here's some of the big things going on. The industry, Spotify, Google, lots of other places are providing auto transcriptions, which are awful, let me tell you. Auto transcriptions of your podcast for accessibility. Spotify just made the announcement that they're doing it on all their own original shows. So a limited subset of the shows that they run, right, the ones that they create originally themselves, they're controlling and they're putting out transcripts for all of those within their apps so that they can be audio books style, read to people by their bot. I believe that's what's going to happen with it. I don't know why you need it with a podcast, but that's beside the point. They've decided that they're going to do this with everything that they have out there. So these things are going on. But not having a transcript for your podcast is an accessibility disservice. And so be thinking about that, that if you are not utilizing that already, now is the time to start thinking about it before some Autobot does it for you. And then it's really bad having a method to pause, stop, go back. Being able to control the audios and the videos is extremely important. There are some players out there, some of those cheap players, the free players that come from various places for your podcast, audio files that don't give you controls. They meant once you start it, you got to like quit the page to do that. It's important to control the speed. Let me slow it down for myself. And so having the most rich player that allows you to do that is extremely important for you to utilize on your website. Some of these plugins do not cost a lot to get good players. I mean, we love the fuse box player, both from the player standpoint and the track player that it has. So they call that the archive player, which blazer has all of your episodes in one. And the track player on the website, we're such a proponent of it because it has full controls. It's also styled really beautifully so you can create that good contrast like you're doing in the rest of your website. So I can say that we did this now through three of our websites. We've rolled them out, all the ADA changes and everything, and what we've seen is that nothing had to change with attrack players. They were all doing what they needed to do. Nothing needed to change in the settings that we had already provided in there. But you do have a lot of controls over the Fuse box one, which is why we're a big proponent of it. And it's not expensive to provide something that's so valuable to the users of your site. So those are just some of the basic areas. So we talked about, you know, images, videos, audios, the content side of things, the content structure itself, like how your blogs are reading. Right. The links that you're using and the colors, the most important, impactful things. I mean, these are all really good, important things. And so whether or not we're in a debate whether or not you need to have an ADA compliant website, I'm going to say I think you should have one because it's in the best interest of your listener, your viewer, your reader out there to be able to consume you, your business, your content in the most accessible way to them. That's in the spirit of why we do what we do here. And so I think you should go ahead and take the leap, take the changes and check it out, see how your website changes.

All right. Well, I would agree with that, Tracy. I think from everything I've seen, no reason not to. Maybe there is an extreme case. There is a reason not to follow all of them, but it's definitely worth trying. All right, well, hey, hope everyone enjoyed that. Remember, you can go to the blog post@potatoes.com for this episode to see the images that we were talking about side by side, before and after images and. Or watch any part of the video that you might want to watch. And I guess that's it for today. We'll be back next time. Thanks for being with us on an episode of Fuse.

Your brand heard something valuable today, but didn't get a chance to write it down. No worries, we've got you covered. We partnered up with podcasters united.org where podcast hosts like you can get free resources, free masterclasses, the largest podcast tip library assembled, and free promotion opportunities while you're there. Don't forget to follow us on YouTube and on social at United We Pod so you can get feed your brand live. Until next time, keep podcasting.