In its simplest terms, The Americans With Disability Act (1990) expressly forbids the discrimination of any American due to their disability. But what’s that got to do with your website and how do you address it? That’s what we’ll cover in today’s blog post.
Should Your Website Should Be ADA Compliant?
Um yeah… it’s looking more and more like your website should be ADA compliant for the blind and visually impaired. Federal courts are enforcing the ADA compliance, particularly on major retailers as recently as October 2019 when the federal courts upheld one man’s complaint that Domino’s pizza website failed to comply with the ADA laws. His inability to effectively utilize the online ordering was considered discrimination.
Okay, fine… Dominos is a huge corporation and of course they might get picked on, but what about you.. the mid and small size organization who isn’t a global brand? You might be thinking “Am I really going to be in trouble if I’m not ADA compliant? I don’t think so.”
Well…. you’re kind of right. The odds (as of October 2019) are pretty slim that you are going to run into trouble. But on the other hand, do you want to comply with ADA on your website if not in whole but maybe parts of it? Sure! Maybe you want to instill a welcoming sense for those with disabilities (great PR and could be good for sales). Maybe you want to do the right thing if it’s not going to break the bank. If you don’t want to comply or do the PR thing, then remember… it only takes one annoyed person with some tenacity to create problems for your organization. You can roll the dice if you want.
One more thing… many visually impaired people will adjust their browser settings for fonts and colors that are easier for them to read. So they are already doing some of the work for you. But IMHO, it’s not enough that they make adjustments. You’ll need to make some too.
Wait, wait, wait… how does a website get compliant?
Well… this is where the tricky part comes in. Despite what some may have told you, there is no such thing as a definitive checklist to comply against. In fact, this was part of Dominos argument to the courts.
Without a defined set of standards, how does one comply? Truthfully, we don’t have a bulletproof answer, but after designing many websites to meet internally regulated ADA compliance, what we believe to be true is that if you can show how you’ve made effort to comply, that will go a long way in the hearts and minds of those with disabilities and of course make it easier for them to access your content. A win-win, eh?
Scan Nation – How the disabled use websites & Apps
Let me try to make this as simple as possible to help give you some perspective. If I have difficulty seeing or am blind, I will be utilizing software that tries to parse through all that coding and find the content of the website. It will then read it to me.
Now this is where good structure comes into play. Your website should be relatively well organized to help these scanners read through your content in the most optimal way. So… you are now trying to keep this in mind as you start going through your checklist of ADA compliance.
A Few Good Tools
Here are a few good tools to check out online to see how you can better comply.
- Wave Web Accessibility Scanner. This is a free tool. Just pop in your URL and it overlays your website with warnings and errors. At first blush it’s going to seem overwhelming like you are totally not compliant. Once you get an understanding of the messages, you’ll see patterns you can clean up relatively easily.
- axe – Web Accessibility Testing – This is much more for technical people like programmers to use on the fly as they build. It’s a Chrome Plugin that scans the pages you are on as you are on them. There is a free one and a paid one. We have yet to use the paid one.
- WP Accessibility – This is a great WordPress plugin to help your site with some of the basics of accessibility. It’s easy add and set up. Some of the heavy lifting is done for you. You’ll need to be running wordpress (which we specialize in) if you are going to use it.
These are the two we found to be the most helpful with our projects. There are dozens if not hundreds of tools and services out there, so please comment with your favorites.
With all that said… here is Right Here Interactive’s 5 key areas to [try to] address ADA compliance (did we mention we’re not lawyers and this does not guarantee compliance? Okay, good). These five points are designed to get you the marketing pro or executive up to speed in a non-technical manner. Your internal technical team or agency partner (like us if you’d like to chat) has a ton or resources to guide them.
1: Images & Video
This is a relatively easy one and hopefully one you are already doing since you are optimizing for SEO. For all your imagery, simply use “Alt” tags. Alt Tags should describe your images in textual terms that support the content you are using.
Alt Tags may be a little bit tricky because you have one alt tag per image and maybe your SEO is different than what you might actually do for an image description for ADA. Until there is a better way, try to just balance between the two objectives as best you can.
With video elements, our feeling is that the video should be transcribed and the text transcript available. YouTube has a setting to insert your transcription and the meta data should br readable when you embed it in your site. If you run video in the background of your design and it has no audio, there isn’t much of a solution that we’ve found (comment if you have solutions), so just leave it as is.
2: Contrast
Yep… you need a little contrast in your life…. and your website. Contrast is something that designers think about all day long. Any design where two objects are stacked needs to have contrast in order to differentiate between them. For many visually impaired, contrast is extremely difficult. This is particularly true with text and background colors. The highest contrast ratio is black on white (expressed in ratios as 21:1).
With your content, you wind up compliant with a contrast ratio of 4.5:1. That’s the minimum and should only be acceptable if nothing higher can be achieved. If you really want to go for it, I recommend you shoot for a contrast ratio of at least 7:1 whenever possible. There are a lot of nuances to this theory you can read about in the WebAIM article (as well as doing the free scan on your website, which will include information on contrast ratios).
3: Skip Nav
So think about this for a moment… you’re listening to the website being read to you by your screen reading software and as it starts every single page, you hear “home… about us… services… contact” and so on. It’s reading the navigation of the website. If you’re like me, you probably don’t want to here the nav being read to you while you wait for the main content.
Fortunately, your developer can insert some “skip navigation” code to let the screen readers know that the section is going to be navigation and they can skip right over it. For more details on how you can implement skip navigation code, please read the article on WebAIM.
4: Accessible CSS
Nerd with me for a second please. Your CSS (Cascading Style Sheets) is code that helps to separate between the content on your page and the presentation (design) of that content. CSS can be structured in many different methods, some more favorable to accessibility than others.
You may not know this, but any user on any browser has the last say over styling, even over your CSS coding. The simplest example of this is how people will turn fonts larger on mobile devices through their settings. People with visual impairments often create a styling system that works best for their particular situation.
All that said, your job is to help the visually impaired by structuring your CSS in an accessible manner such that end-user styling can be effective as possible. Tell your coder to read this article on WebAIM to help them get started.
5: Label Fields On Forms
This is a little bit like the whole labeling images we discussed earlier. Feedback forms are used to collect information, take orders, submit data and more. Often, the text that is used in the forms is very small and hard to read. As a screen reader is helping a visually impaired person to fill out your feedback form, it needs information on what should be inputted in. Your fields must be labeled at the code level to help them process this information and provide you with the information you’re looking for.
Your technical team can read another great WebAIM article about forms (we promise, we’re just fans of WebAIM and not paid contributors lol). If you happen to be using WordPress on your website, then check out some feedback form accessibility plugins for Gravity Forms and for Contact Form 7 that might lend your team a hand.
Bottom Line
Until a universal set of laws governing compliance are signed into legislation, you’re just going to have to decide which of the myriad of guidelines you will follow and to what extent. We’ve heard feedback before saying that complying fully to all the ADA guidelines that exist will end up making my site super ugly. I don’t think that’s necessarily true, but it might increase the budget related to development. We think you should focus on these five key areas. If you want to dive deeper into these concepts, then please read the “Creating a POUR Website” article at WebAIM that goes into far greater detail than we do here.
We’d love to read your feedback on these tips and what else you think should be included. Leave hem in the comments below.