While it may seem like a bit of a hassle at first, making an ADA-compliant website has many benefits, both for you and your customers. It may take some work and some reconfiguring, but the rewards are definitely worth it. In this episode, Tom Hazzard and Tracy Hazzard look at the recent push for ADA compliance in web pages and what it means for many web-only businesses. Tracy and Tom also look at a few critical areas where accessibility is key and where ADA compliance reaps benefits. Tune in and learn more about ADA compliance and what it can mean for you.

—

Watch the episode here

Listen to the podcast here

 

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

We’ve got a very different kind of topic to share with you. Tracy, do you want to let everyone know what it is?

We’re going to talk about ADA compliance with websites. This is a controversial topic that has been coming up in the news for a while because there have been some organizations going out there and suing websites for being not as accessible as they could be. What that means is accessibility. The American Disabilities Act or ADA has Title III which says that if you have a location for your business, it needs to be accessible to people with disabilities. 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 to have accessible websites by a definition already established because they have to provide information for all people.

As private website owners, we haven’t had to comply with that very frequently. That hasn’t come up before but all of a sudden, there had been a lot of lawsuits and companies are being sued because their websites aren’t accessible. The reality is 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. None of that legalese. Whether or not you want to do it, let’s talk about the spirit of what that means. I want my website and podcast to be seen and heard by as many people as possible.

When you first brought up this subject, I didn’t have an awareness that the Americans with Disabilities Act treaded into websites. I always thought of that as physical disabilities. I remember when that act was passed, all kinds of buildings had ramps put in and other features. I didn’t know that your website was a part of that.

Here’s the reason why they’re starting to more broadly apply this and why people are suing over trying to change and expand this law to cover websites. Most of us do not have a brick-and-mortar store anymore. We only have a website. If you’re only web-based, that is your presence. Title III talks about your presence in the broader community, to the people that you’re looking to serve. Theoretically, that means that if your podcast only has a website for the podcast show, the website itself is its storefront. It is the place that people access it.

Do I want to be the kind of company and podcast host who has the most accessible show possible? Absolutely, we do. One of the things is that all of our videos have captioning on them. Why do they have captioning on them? That’s great for the hearing impaired. We want to have that. We have video, audio and blog. Why do we have all three of those things in everything we do? We want to be seen, heard and found. We want it all to be able to be seen or read. We want it all to be there for as many people in the way that they want to consume it. What about the way they need to consume it?

If your podcast only has a podcast website, the website itself is its storefront. It is the place that people access it. Click To Tweet

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

I heard that we’re going to make our website ADA compliant. 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 a big type and we’re going to have to scroll more? I didn’t have a good concept of what this meant. I was pleasantly surprised and shocked at how much better it did make our website feel.

Our web team was very surprised. 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. Take that to me as any place of public consumption. I think about it that way. That was the spirit of what we were trying to do. We said, “We don’t know what kind of disability someone who might be trying to go to our website has. We can assume they might have seeing or hearing issues. That might be some of the most predominant.” That’s part of what it takes to look at most prevalently.

Here’s what I know, color blindness. It’s a form of seeing issues that we don’t know. Did you know that there are 300 million people worldwide that are color blind by a scientific standard? That’s almost the entire population of the United States. This is what we found when we used to do a lot of work in China. The normal prevalence of color blindness in men is much higher than in women. It’s 1 in 12 men, so about 8% of men have this problem. It’s 1 in 200 for women. It’s a big difference. More men have this issue.

There are different types of color blindness. They could be red-green color blindness. There are all different types. They can’t see patterns in certain areas. There’s also true, absolute and full color blindness. That happens as well. It’s a lower percentage of the population. By any definition of being able to only see one color in the spectrum, you would be defined as color blind. 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. We’re choosing colors based on our brands, what we like and what we want to convey. We’re not thinking about the readability and viewability of what we’re doing.

The color was the most significant thing that we did first. That had the biggest impact visually on what we created. It started solving some problems that I was complaining about our website. Sometimes on the mobile device, I have trouble seeing the text. I’m always blowing it up. I kept complaining to my team, “I think your text is too small. I think this is happening.” 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 feel.

 

There are some findings that my team has given me and I’m going to read a few of them to you. They said, “Never use light gray as a text.” Do you know how many websites I come across that use light gray for their text? It’s not just light gray on white. It’s light gray on a darker color. That’s typical. Instead of using white as the contrast, they use light gray. There’s a huge problem there. Never use light gray for text.

Don’t use color as the only instructions. In other words, if you say, “Required field is in red,” but it just shows the color and the word red is in red, people with red color blindness can’t see the word. We don’t do that. We describe it and we don’t color it. That’s the best way to get around that. 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.

We’re giving you an overall view and trying to raise awareness for what it means to create a website that’s ADA compliant. Fortunately, you don’t have to take our word for it. We do have a resource for you where you can have a site that reads your website, gives you a score, and suggestions for improvement.

That’s what you’re going to see here. You’re going to see the side by sides of where we had it before and after.

We start with the homepage.

This is the old homepage. What you’re seeing is the accessibility metrics of 72. We weren’t horrible. We weren’t down at twenty or anything. We had a white background and blue letters. We thought we were doing pretty well in how we were viewing it. We weren’t using gray. Let’s look at what it looks like.

This is our old website. As I move over, here is the new version that is 100% accessible according to the measurement. What is this tool that we use?

It's not expensive to provide something that's so valuable to the users of your site. Click To Tweet

This tool is one of those Accessible Metrics tools. We used a couple of different ones but this one has a clearer chart so we could show it side by side for you. We ran it through one of the ones. We didn’t end up using it to do all of the exact changes to everything but we used it as a gauge if you want to call it that.

Do you have to do this one page at a time on your website?

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. If you look at that bar up top, you see how much darker that is, especially over to the left side. We still got our color styling going. Our creative team still had a little say in it. It used to be that light blue all the way across but then the white letters were harder to read. Go back to the other side again and you can see it was a little harder to read, not as much contrast.

By creating a gradation from that darker color, we put the dark of the color over where all the white text was. We still got the gradations so we got a little bit more fun into our lettering. We did the same with the other letters. There’s a gradation around it. What it has done is it’s putting darker blue to make it seen and more visible by doing that. It’s super simple. This is the most basic one. This is not even one of the more dramatic pages. You can see it made a change. It looks more fun and better.

I thought it was livelier. It’s refreshed. I liked and appreciated it.

Let’s go to the other ones we’ve done here. We have our video on here where we tell people about how to use our Ad Mixing System on our Podetize hosting platform. We tell exactly how to do this. We got about a 75% score and this is just the section of it. This score applies to the whole page. Keep that in mind. Let’s go and look at what it does. We switched to that brighter blue. We got more of the darkness. The letters are running in brighter white in there instead of black on blue. They’re running in this place where you can see what we’re saying a lot better. If you notice, anything that’s underlined, anything that’s a link through, we haven’t changed its color. If it was a link through, it would click. This actual word is underlined to be struck for emphasis. 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.

 

Let’s go onto the last one. Some of our most important information is our services page. This is where we want an impact. We want to make people want to buy. We have this lighter color palette that was going through the system. By switching the color palette over to that darker color palette, we’ve already been using which we applied globally across our site. We didn’t have to change everything on every single section. 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. We’re going to also be going through and creating a little bit and taking a look at all of our icons from that perspective. What’s in your image and on your icons don’t always show up in the accessibility square because it’s what’s on the page, not what is displayed as an image section.

There may be different things you need to look at more carefully.

These are some of the changes. I’ll talk about some of the rest of the things. As we went globally through it, links are a big thing. We have these hot links or HTML links. When we click on them, it’s going to take us to an extra page or pop us up into something. Those links are important and we get used to them being switched to blue.

If all the other things make it difficult both for us to read that color and for it to be seen by someone, we never make links in red or green. We’ve got to be careful about different colors that we might use for those links. We need to have a contrast between those links’ color and the surrounding text color. It would be better to have no changes to them than it would be to have a bad contrast or a bad color choice. 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.

That’s why that bright blue that is typically used in the link, so many branding people like to change that on the website and get fancy with it, “I have a purple website. I would like to have purple links.” It’s not a good idea if the colors are not in high enough contrast between them. 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 bright lavender to make that work in your format, styling and brand guide. Keep that in mind. They have to be visually distinguishable from the non-link text so that people know, “I can click here.”

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 a bad search engine optimization or SEO practice, but it’s also against accessibility. I’m not telling someone where they’re going and 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. The text of where it is going is what I want to make that bright underlined 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.” We’re being clear and more forthcoming with our audience. That’s safer and better. It makes a richer experience. We’re hotlinking and doing backlinks or cross-links because I might be linking to somebody’s website who has been my podcast guest. If I’m defining that, I have a better link. Otherwise, I’m linking the word “Click here” to a page out there instead of linking the keywords, the person’s name or their website, and having that be a clickable link.

Not having a transcript for your podcast is an accessibility disservice. Click To Tweet

That has an SEO impact.

You can do yourself a benefit by not doing that as well. What’s different though is if you want to also have the text link but then have a button somewhere, that’s okay. That’s a little different model because a button makes it easier for somebody to click and see it. If you’re asking them to go buy now or do something, that’s a totally different model.

That would be more of an internal link within your own website.

We’re not going external. There are 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. What it does is those types of things help people to navigate a website without using a mouse or some things. If I’m unable to use my hands, I’m able to utilize those skip links and other things. Having them built into your system for navigational purposes is an accessibility thing as well.

Content structure is a 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. There’s clarity in the hierarchical sections of how things go. Here’s where most people go wrong. They skip the hierarchical links. They go from headline 1, headline 2, and go down to headline 5 because they like the style better. Instead, make your headline 3 the different style you would like it to be. Keeping your hierarchical order helps with the order of how things flow through the website. It helps Google track through your website as well. You’re going to get a double benefit from doing that.

It would seem to me that there probably are a lot of web designers, brand designers and graphic designers out there that are not going to like a lot of the restrictions or realities of making a website ADA compliant. We’ve shown in the case for our website how it can improve your website and 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. I wonder how many are aware and are paying attention to these things.

 

This is what I’m going to say to that. The reality is you should give it a chance and 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. There are things that you could do. You can make some choices that are different, but you can make them for the right reasons. 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.

Our designers could have changed everything to dark blue and it would have been boring. 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 refresh our website. They gave a new fresh look to it. Those are the choices that a brand designer should be making. They can make them in the right areas for the right reasons and make more creative decisions within the restrictions that are there because they are there for a good reason. At the end of the day, no matter how fancy and cool your website looks, if people can’t read it, then it’s not useful.

If your goal is to get people to take a certain action on your website and they don’t take that action, what’s the point?

We want all texts to be readable and everything, but here’s the one thing that I thought was interesting. This happens so often. I go to a lot of websites and they center the text everywhere. They do that on blog posts all the time. It bugs me as a writer. I want to have everything. Left-aligned text is extremely important for dyslexic users. Users with poor eyesight also need that. If you’ve got failing eyesight, it will help them read through, move through your website, and better move through everything. That’s why the headers and the sub-headers can still be centered but the actual body text needs to be left-aligned. You can decide to do justified, making both sides aligned, fancy stuff like that, but left alignment is a key criteria.

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

It helps people move through your website better. It’s also a better utilization of space on mobile devices. Keep that in mind.

At the end of the day, no matter how fancy and cool your website looks, if people can't read it, then it's not useful. Click To Tweet

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

Let’s talk about images, video and audio because those things matter to us here. We’ve got all that. All images need to have an alt text. We always do that in everything that we do. The alt text usually includes your keyword. It will have something about your podcasts. It describes the image too or the purpose of the image.

For those that may not be aware, let’s talk briefly about what alt text is. It’s 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. Those files have metadata and keywords 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. That image gets associated with that alt text in Google image search.

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. It’s helping them understand what the image that they cannot see is there. What if your image doesn’t load? That alt text will show.

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. We do use captions as well but alt text is more important to make sure that you’re covering all of what they’re missing of what they cannot see. Alt text needs to be short. Do not pack your whole paragraph into those 250 characters. You need to keep it short, concise and to the point. Don’t try to cram it. I mean one set of keywords in it. We found that if you do more than that, Google will degrade your value with them and so you lose points. Keep that pretty simple.

 

The other thing is that there’s something called ARIA. It means Accessible Rich Internet Applications. They are standards for imagery, how you tag things and what you do. There is a whole description of the destination of the image link. It’s how it’s found. 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 redundant. You don’t need it. It’s not important. It’s going to be that just because it’s an alt tag. Avoid using images as your only text. That’s why you want to have a headline as well.

I would imagine for visually impaired people, those programs are not reading texts. That’s a part of a graphic.

Here goes back to some choices that you can make as podcasters. That’s why I thought this conversation might take a little bit longer to discuss that. It’s that you have some choices here. You could skip and not use what we call header images, episode art or whatever you might want to call it. You may not want any titles on there because the titles are on your blog. 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. It confuses your mind. There is a lot of thinking about this that says, “We may want to make it separated.” Not using that episode art, using that image with the text on it is something you should use in social media and share. There’s a place for it.

We have clients that have some websites where their header image for the graphic is right at the top of the image and the title is within the image. Some clients don’t like the idea that the title of the episode of the blog post is also in the text above or 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. 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. Having that title in it is a good thing. It’s more important on social for people to see it visually than it is on your website.

That’s why some people use featured image structures or other ways to draw into social media that way. The use of these things like what we call Ego Bait™, the imagery of your quote of what you’re saying about your guests or anything like that, the episode art is being utilized in social media. It’s a different model than what we’re talking about here. We’re only talking about websites because website usage is someone trying to use all your data and information to get more from you. It’s a different model than just capturing their visual attention on social media so that they will click through, go to your website and find out more. It’s a different model of how we do things. Instagram is not made for accessibility in just the whole way that it’s done. Think about where is your audience and what does that matter for you?

For website purposes, this is why we’re going over these things because the website is different. It is serving your community and/or selling things in your business. It’s selling you and your business and that’s important. The videos and audiograms all need captioning and subtitles. We do that automatically for all of our clients, but these things need to happen. There’s a setting in YouTube and on social media. You can turn these things on. They can auto-generate for you or you can have them generated. We prefer to be in control of it so that it’s right.

Especially with the audiograms which are these 30-second to 1-minute clips. For that, we’re not using auto-captioning. We do that to make it right but for a full-length video, that’s a lot of work. Using the feature available on YouTube makes a lot of sense there.

Your website is selling you and your business, and that's important. Click To Tweet

Here are some of the big things going on in the industry. Spotify, Google and lots of other places are providing auto-transcriptions which are awful. Let me tell you. It’s auto-transcriptions of your podcast for accessibility. Spotify made the announcement that they’re doing it on all their original shows. It’s a limited subset of the shows that they run. The ones that they created originally by themselves. They’re controlling and putting out transcripts for all of those within their apps so that they can be audiobook-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.

These things are going on but not having a transcript for your podcast is an accessibility disservice. Be thinking about that. If you are not utilizing that already, now is the time to start thinking about it before some auto-bot does it for you and then it’s really bad. Having a method to pause, stop, go back, and being able to control the audios and videos is extremely important. There are some players out there, some of those cheap and free players that come from various places for your podcast audio files that don’t give you controls. Once you started, you got to quit the page to do that. It’s important to control the speed, “Let me slow it down for myself.”

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. We love the FuseBox Player, both from the player standpoint and the track player that it has. It’s what they call the Archive Player, which 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 beautifully so you can create that good contrast like you’re doing with the rest of your website.

I can say that we did this through three of our websites. We’ve rolled them out, all the ADA changes and everything. What we’ve seen is that nothing had to change with the track 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 Fusebox one, which is why we’re a big proponent of it. It’s not expensive to provide something that’s so valuable to the users of your site. Those are some of the basic areas we talked about, images, videos, audios, the content side of things, the content structure itself like how your blogs are reading, the links that you’re using and the colors, the most important and impactful things. These are all good important things.

Whether or not we’re going to debate, whether or not you need to have an ADA compliant website, I think you should have one because it’s in the best interest of your listener, viewer and reader out there to be able to consume you, your business and your content in the most accessible way to them. That’s in the spirit of why we do what we do here. You should go ahead, take the leap and make the changes. Check it out and see how your website changes.

I would agree with that, Tracy. From everything I’ve seen, there’s 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. I hope everyone enjoyed that. That’s it for this episode. We’ll be back next time. Thanks for being with us.

 Important Links:

• Title III  – American Disabilities Act
• Accessible Metrics
• AccessiBe.com
• Podetize
• FuseBox Player

Love the show? Subscribe, rate, review, and share!

• Here’s How »

Join the Feed Your Brand community today:

• FeedYourBrand.co
• Feed Your Brand Facebook
• Feed Your Brand Instagram
• Feed Your Brand LinkedIn
• Feed Your Brand Pinterest
• Feed Your Brand Youtube