ADA Compliance for Websites: A Quick Guide to Accessibility

April 7, 2023

How does it affect web design?

It gives web designers parameters to work within in an effort to accommodate all web users. Which is actually a good thing in my opinion. See, as web designers there aren’t many rules to how we do our job. We just do it however we want to. 

Sometimes that’s great. Sometimes that’s not so great, like when we get so crazy the end user can’t even use the site without getting a Ph.D. in how to use the site. If you have to give people a training video on how to use their website, you have missed the mark, my friends. People should just be able to use it. 

It’s our responsibility as web developers to embrace ADA compliance to make sure the websites we build are usable by everybody. ADA challenges us to stay creative even within the given parameters and in the end it doesn’t just make better websites, it’ maks us even better designers and developers. 

Addressing ADA Compliance for Websites: Myths

Before I get into this crash course, I want to go over a few myths. There’s actually a great website covering and debunking multiple myths about accessibility if you’re into this check it out: a11ymyths.com.

I read through this website months ago because it came to me in an email newsletter. Reading it, I was like, “wow, these people are so incredibly right.” I want to share with you some of the things they address on the website. 

Myth – Creating an accessible website is just creating a website for those with disabilities.

That’s not true. Creating an accessible website means creating a website that is usable by everyone, yourself included. 

Here’s the deal. The number of people with disabilities is not small. You may think you’re just revamping your website for a few people who can’t see or can’t hear. Friends, around 15% of the world’s population (roughly 1 billion people) are disabled.

That is the world’s largest minority, and you are making your website so they can use it, and you can use it too. 

Accessibility features can help anyone for any reason.

Let me explain. Yes, some people with disabilities have to use a screen reader or need to use a keyboard to navigate a website. Some of those people do fit into that 15%, but we can all become incapable of using a website the way we usually would at any given time. 

For example, what if you broke your arm, or you have arthritis that’s acting up, and you can’t use your mouse? Wouldn’t it be nice if you could use your keyboard to navigate the Internet?

Maybe you’re working remotely on a laptop and don’t have a mouse. Maybe you’re a parent holding a crying baby in one hand and trying to find the doctor’s phone number on your cell phone with the other. But you can’t, because the website wasn’t optimized for mobile use. 

Think about the overstimulated, interrupted, distracted parent just trying to finish their last task of the day. I’ve been that parent. And I’ve also been the distracted dinner making parent trying to buy concert tickets who ended up spending $400 on the wrong tickets and never got refunded. 

Provide a user experience that’s fair to everyone. 

These websites we’re building, which I’m asking you to consider making ADA compliant, are not just for people with disabilities. They are for everyone, you included, because we all end up in these spots when we’re not using a website like we usually would. 

Plan ahead to make your site ADA compliant.

Here’s the challenge, though, you cannot just quickly flip your site into a compliant site later. Accessibility is more than just being able to use a screen reader or being able to navigate with the keyboard. 

It’s not just the pages of your website that need to be accessible. It’s the template and your PDF documents. Every PDF you upload to your website, if you want to have a truly ADA compliant website, has to also be ADA compliant. Do you want to go back and reformat all 1,000 of your inaccessible PDF documents? No, you do not. 

So while some things could be retrofitted, starting from the beginning with the end in mind is where the magic is.

ADA Compliance for websites: Requirements

This is in no way an exhaustive list. There are so many things that go into making a website 100% ADA compliant. But I will give you some links to free resources and Chrome extensions you can use to boost the compliance of your site. 

There are different levels of compliance. 

1. Level 1 – This is your base level. If you’re doing a good job with your website, you should be meeting this, no problem. 
2. Level 2 – This level requires a bit more work, time and elbow grease to accomplish.
3. Level 3 – This is all-out. Every single thing on your website is compliant. 

Different organizations and businesses are required to meet different levels of compliance. 

Under Title One of ADA, any business with at least 15 full-time employees operating for 20 or more weeks every year is covered and needs 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. 

Any government entity like schools, public transportation, the U.S. Postal Service is all required to comply. 

Strive to meet compliance requirements, whether required to or not.

Just because you’re not required to comply, doesn’t mean you shouldn’t. Consider it a moral obligation and an opportunity to support your fellow humans. All websites should be at least base-level ADA compliant, and inclusive to everyone. 

That is what we strive for at MayeCreate. Our goal is to make each website as compliant as we possibly can within our realm of ability. 

13 Tips to Make your Website More ADA Compliant

Part of the responsibility of creating an ADA compliant website falls in the hands of the web developer. 

Maintaining that level of compliance falls into the hands of the person updating the website on a regular basis. If you’re that person, then you need these tips because what you do needs to meet these compliance standards. 

1. Choose the Right Color Pairings

Not all color pairings are ADA compliant. What does that mean?

When you pick a background color and put words on top of it in a different color, they have to have enough contrast so that people can see them. 

An example from the USGA

My husband was just complaining about color compliance, like two days ago, because the USGA, United States Golf Association just updated their app. In the past, it had a white background, and when people were over par, the numbers were displayed in red. That was okay; he could totally read it. Yesterday he reported he must be getting old, because he can’t read the red lettering on the black background in the new app.

Don’t tell him I said so…he is getting old but that’s not why the app is hard to read.

Red is a tricky color. It’s tough to find a background color other than white that doesn’t impair the readability of red text. Black, gray, yellow, blue, doesn’t matter what color you switch the background to, it kind of feels like the red text is vibrating. It is not always easy to read.

Makes me wonder if the USGA app is fully ADA compliant from a color perspective. Considering that their audience is predominantly males, and there are more males with red/green color blindness than females, it’s kind of surprising that they would make that mistake. 

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. 

How to check your colors for ADA compliance

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. This particular tool is really good to use while you’re designing things. 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 overall. It’s also a Chrome extension called Wave Evaluation Tool. It looks at a whole page of your website, and highlights any compliance issues it sees. 

Remember, though,we are going through this list so you’re not retrofitting things, so using tools that allow you to check as you go is the money spot. Which is why we love Contrast Checker.

2. Make Your Links Look Like Links

If you are picking the color of your links, it has to contrast enough with the color of your normal text that someone can tell it’s a link. Or, you could do something crazy, like underline it. 

Friends, make sure that your links look like links regardless of the colors. I am a huge fan of underlining links. I am constantly telling my designers that links aren’t “linky” enough. Make it painfully obvious.

3. Add Meaningful Alt Text to Your Images

If you’ve ever hovered over an image and seen a little box with words, or waited for a page to load and saw text instead of images, that is alt text. In those moments, you’re experiencing a little bit of what a screen reader would do. It reads the alt text so people can find context from the images on the site, even if they can’t see the images. Be sure you’re describing what is in the image in your alt text.

Remember, too, Google can’t see your images. It just reads the alt text and image name. So alt text is good for Google and good for anyone using a screen reader.

Stay away from using big graphics with words

Words, in general, should be typed into a page. If for some reason you do decide to have a graphic with words in them, put the words from the graphic in the alt text. That way a screen reader can read the graphic to the person. It’s kind of like magic. 

4. Use Logical Heading Hierarchy

What the heck does that mean? 

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. You use those same headings whenever you format the content inside of your website. If you’re not using them, try ‘em out – you’ll thank yourself! 

If you want more information about why, check out my podcast, The Do’s and Don’ts of Writing for Your Website. I’m going to explain it all for you there. 

Another reason that you should use them is because it creates a hierarchy for screen readers on your website, creating a better user experience.

How to use a basic heading structure

The most important information is going to be the title of the page, and will be your h1. Then the second most important information will be your h2s. The third most important information will be your h3s. These are all headings you will sprinkle in above those paragraphs of text all throughout your page. 

Think about the content on your page like it’s a bulleted list. Each of those headings would be the next indention in the bulleted list. I hope that’s clear as mud. 

5. Don’t Use Directional Words on Your Site

As you are updating your site, don’t use words like above, below or to the left to describe what you want people to do on the site. You’ve all been on a 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 could be someplace else, because the page adjusts to accommodate different screen sizes. 

Imagine you have a screen reader, you’re not even seeing the screen and it says “below.” Well, you can’t see below. Instead, what we want to do is link the words that describe what people are going to get if they click. 

6. Don’t Tell People to “Click Here”

Relatedly, don’t use the words, “click here” and then link the words click here. People with screen readers might not know what you’re referring to. Instead, link the words that tell them what they’re going to get if they click. 

If you had a phrase that said, “click here for more information about ADA compatible links,” instead of linking “click here,” you would link “more information about ADA compatible links.” 

7. Make All Parts of Your Site Compliant

If you want to reach the highest level of compliance, all the parts of your website need to be compliant. That includes not just your images, text, links and headers, but also your PDFs, video and audio on the website. It should all be compliant. 

• PDFs should follow compliance standards.
• Videos should have captions. 
• Audio should have a written transcript. 

These are not required for Level 1 compliance. They take some extra effort, but aren’t necessarily hard to do. It’s not that hard to make a transcript. And if you upload something to YouTube, they will automatically put subtitles on it if you enable it. 

It’s not that hard to reach this level of compliance, friends. Those video and audio subtitles and transcript options are not just for people with disabilities. Think about somebody at work in a quiet office, or at a kid’s sports practice who doesn’t have headphones. Those people are in a situation where they can’t play the audio, but they could read your transcript and get the information they need.

What We’ve Covered So Far

These first seven items are all things that are your responsibility if you are updating your website. 

• Choose the Right Colors
• Make Your Links Look Like Links
• Add Meaningful Alt Text to Your Images
• Use Logical Heading Hierarchy
• Don’t Use Directional Words
• Don’t Tell People to “Click Here”
• Make All Parts of Your Site Compliant

When you go to update your website, 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. 

The next half of the list is for your web developer. 

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 to discuss with them. 

Again, this is not an exhaustive list. I’m actually looking at our ADA compliance checklist we cover for our clients, and there are so many things on this list, I can’t cover them all. But I do want to cover the ones I feel are really important. 

8. Keep Your Navigation Consistent

Your navigation needs to be consistent and tell users where they are on your site. This can be done either using breadcrumbs for a big site, or highlighted menu items in smaller sites. This is common practice, and most websites do this. 

9. Add a Skip to Content Link

A Skip to Content link doesn’t show when you look at the front end of a site. However, having this link means when people are using a screen reader, they can skip to the content of your site. 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. 

10. Avoid Hamburger Menus on Anything but Mobile

At MayeCreate we’ve been steadfastly opposed to putting mobile navigation, also known as the hamburger menu, on desktop. Some people put the mobile menu on desktop, and they’ve been doing it for a while now. We don’t like it because it forces people to make another click. 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. 

11. Make Your Site Navigable Using a Keyboard

You need to be able to go through the different elements on your site, either using tab or arrows. 

Friends, I did not realize how handy it is to know how to do this until I really started compliance-checking sites. One of the ways 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. Crazy, right? 

What I figured out is sometimes when a website is broken, and it’s not acting right, I can use my keyboard to get around on it, and it’s awesome. You should try it sometime. 

Using keyboards to navigate forms

I find I use my keyboard regularly when completing forms. 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, if your site isn’t optimized for keyboard navigation.

This is especially important on your PDFs because if you turn your PDFs into a fillable PDF, you need to be able to tab through the fields in a logical order. 

Moving content and keyboards

Part of keyboard navigation is making sure things like your maps have multiple zoom options, and information displayed in sliders have multiple control options. Essentially, any functions triggered by a mouse can also be triggered by a keyboard.

Presenting items in logical order

The item that’s highlighted when you’re navigating with the keyboard needs to be visible and clear. It needs to be in focus. You need to know that’s the thing that you have highlighted. 

Some developers take that off, which is dumb, because then you have no clue where you are when using keyboard navigation. 

12. Avoid Fast-Blinking Objects

In case your designer is feeling overly creative, remind them you should not have fast-blinking objects on your site. It’s not cool. It’s kind of like turning on a disco light in the middle of a classroom without warning. 

Some people have disorders that put them into seizures when they see fast-blinking lights or objects in front of them, so don’t be that person who triggers those reactions. 

13. Remove Autoplay from Videos on Your Site

Don’t have auto-playing videos on your website. I know it is popular to have headers with auto-playing videos in them. We’ve all seen them. Sometimes they’re ambient and beautiful. 

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. I am not trying to sway you either way, I just want to give you the information that you need so you can make an educated decision about where you land in this particular area of ADA compliance. 

Why Having an ADA Compliant Site Matters

Hopefully, now you know way more about how to make your website ADA compliant than you did before. I hope so or I totally failed at this blog post.

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 being considerate and best serving everyone. Because all of us get into positions when we can’t use a website the way we normally would. 

Maybe this now has you a little stressed out because you’re on a DIY website journey and you might need some guidance. If you need support, I have 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 them to the system. 

We 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. So check out the Better than DIY Website Program and give me a shout if you’re interested!