An overview of the Americans with Disabilities Act and Web Content Accessibility Guidelines and what they mean for websites and the different levels of compliance, as well as resources you can use to check the accessibility of your own website.
We all take things for granted. A Starbucks on every corner. Warm socks in the winter. Browsing the Internet with access to all the knowledge in the world via a small hand-held electronic communication device that fits in our pocket or purse. Y’know, the little things. But the reality is that there are much larger things most of us take for granted without even knowing it. Like the ability to see, hear, speak or move our hands. By comparison, warm socks feels quite small and insignificant. But there is another thing I think all of us, on some level, take for granted. And that’s access to the Internet and websites. Just because somebody can’t see or hear, doesn’t mean they can’t or shouldn’t be able to enjoy all the things we watch, read and listen to on the Internet, right? But the ins and outs of how that’s done can be pretty complicated. So, let’s start at the beginning.
The Americans with Disabilities Act
In 1990 the Americans with Disabilities Act was signed into law. The Americans with Disabilities Act of 1990 or “ADA” is a civil rights law that prohibits discrimination based on disability. So not only can you not discriminate based on race, religion, sex, or national origin, but it requires employers to “provide reasonable accommodations to employees with disabilities and imposes accessibility requirements on public accommodations.” This is where something like requiring wheelchair ramps at offices or stores comes from. But if you were to read all the documentation, you would see that it doesn’t mention the Internet or websites at all.
The ADA and Websites
So then why would we be talking about websites and ADA compliancy? Well, Title III of the ADA says “no individual may be discriminated against on the basis of disability with regards to the full and equal enjoyment of the goods, services, facilities, or accommodations of any place of public accommodation by any person who owns, leases, or operates a place of public accommodation.” And recently, through litigation, some courts have begun to interpret this section of the ADA as it relates to websites and their need to provide effective communication to everyone. Take a company like Orbitz whose business only exists as a website. In this regard, they need to be ADA compliant. In other words, their website needs to be accessible by everyone. This means being able to be used by someone who is blind or deaf or lacks use of certain motor functions. But how exactly do you do that?
Web Content Accessibility Guidelines
Luckily a set of guidelines has been in motion since 1995 and was published in 1999 by the World Wide Web Consortium (W3C). According to their website, “W3C’s primary activity is to develop protocols and guidelines that ensure long-term growth for the Web.” In other words, they ensure the world wide web isn’t the wild, wild west. And what they recommended was known as the Web Content Accessibility Guidelines or WCAG. Version 1.0 was published in 1998 and was later updated to version 2.0 in 2008. Basically, they are a set of guidelines to follow to create websites and web experiences that are accessible to everyone in some manner. And now that there have been some legal repercussions to not being ADA compliant, it’s something everybody with a web presence should be thinking about and doing on some level. But what does it actually mean to be compliant and accessible?
Right about now, I need to tell you that I am not an expert in this. I’m not a lawyer. And, Rattleback is not providing any legal advice in publishing this post. I have found compliance can be quite complicated and I definitely don’t want to mislead anyone thinking I know the rules from top to bottom. But I will share my opinion as a Creative Director loosely what is needed to meet certain levels of compliance.
Understanding the Four Principles of Accessibility and Success Levels
The WCAG organizes compliance and success around four principles that lay the foundation for anyone to access and use web content. Those principles are perceivable, operable, understandable and robust. And this is how they are directly defined:
- Perceivable – Information and user interface components must be presentable to users in ways they can perceive.
- This means that users must be able to perceive the information being presented (it can’t be invisible to all of their senses).
- Operable – User interface components and navigation must be operable.
- This means that users must be able to operate the interface (the interface cannot require interaction that a user cannot perform).
- Understandable – Information and the operation of user interface must be understandable.
- This means that users must be able to understand the information as well as the operation of the user interface (the content or operation cannot be beyond their understanding).
- Robust – Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.
- This means that users must be able to access the content as technologies advance (as technologies and user agents evolve, the content should remain accessible).
- Perceivable – Information and user interface components must be presentable to users in ways they can perceive.
Benchmarking against these four principles, a set of criteria was created to meet certain levels of accessibility. Those levels are labeled A, AA and AAA. Simple enough. There are 25 criteria that you have to meet to reach Level A. If you meet another set of 13 criteria added to that, you will reach level AA. Meet another set of 23 on top of that and you will reach level AAA. The first 25 are meant to be easier with the next 13 being a bit more intermediate and the next 25 being very strict and difficult to meet.
Now I’m not going to list off everything you need to do to meet certain levels of compliance—the list would be too long and I’d probably do you a disservice by not putting enough detail around it. But I found this really great resource with the full list, a simple summary, and a full page with all the detail you would need to meet each piece of criteria. Take a look here: https://www.wuhcag.com/wcag-checklist/
Compliance and Accessibility Examples
Instead, let’s talk about some of the simpler things you can do (and may already be doing). Let’s say a website visitor is deaf, how would they go about being able to access everything you have on your website? The reality is that most things are probably already fine, unless you have some sort of audio content like a video or a podcast. In order to be compliant, you would need to ensure all videos have subtitles or that there is a written component that pairs with the video. Same for podcasts, they all would need to have written transcripts. But these fall under Level A. To achieve Level AAA compliance you would need to have a completely separate video alternative that would include a sign language translation so the user can still get the enjoyment of a video experience and not a written transcript.
Another more common challenge would be making your site accessible to someone who is color blind or with some sort of visual impairment (but not blind altogether). Here, things you wouldn’t normally think about become challenges. Let’s take a simple graphic of a pie chart. If each segment is separated by color, someone that was color blind might not be able to distinguish between the sections of the chart, rendering it useless. So, adding lines or patterns to distinguish the sections are helpful. Another example might be having text on a form that says “required fields are in red.” This breaks compliance because not everyone can see red. But if you add another visual indicator like an asterisk, it’s fine. This would all be Level A compliance. Level AA includes having a contrast minimum between your text and your background of at least 4.5:1. Or making sure all dark backgrounds have high contrast light text and vice versa. For Level AAA, the contrast ratio needs to be even greater at 7:1. But it’s not just color. Some people may have a difficult time reading very small text. So, in order to reach Level AA compliance, the text should be able to be resized 200% without any loss or function.
But what if a user is completely blind? To address this some rather large changes need to be instituted. You would need to have a text to voice component. And not for just body copy or a headline, but for navigation and links. Even a verbal description of all imagery via alt tags that can be read via text to voice needs to be in place. Some videos would need an audio only alternative (Level A) to be accessible. To meet Level AAA, an alternative to video with extended description is needed. An extended audio description is simply pausing the video to give a narrator enough time to convey the information in the video like describing an action or something that is occurring on screen.
Truthfully, there is another level of accessibility that I hadn’t even thought about until researching this article. And that is for people with limited motor functions. For this, your website cannot trap keyboard users. Meaning, someone should be able to full navigate every portion of your website via a keyboard. And if they reach a section, they need to be able to navigate away from it. If they cannot, this is called a keyboard trap and removing these is required to reach Level A compliance. To meet Level AA, a visible marker needs to be shown so they know exactly where they are. This could be a hover state or an outline. This is called keyboard focus and it must be visible and clear. Level AAA is much the same, but without exceptions. Meaning from top to bottom and everywhere in between, keyboard-only users should be able to navigate fully and freely without getting trapped in a section or missing another section. Unplug your mouse and see if you can do this. Odds are the answer is no.
So, What Should I Be Doing About My Website and Accessibility?
Well, to start, what you need to be doing is highly situational. There’s no universal answer to this question. What type of business are you in? Where are you headquartered? Who do you serve? What do you sell? If you think your firm has potential risk, you should talk to your attorney. This post really just exists to introduce you to the topic as we’ve been getting asked about it by many of our clients.
As I’ve said many times in this post, this is a pretty complex issue. And frankly, it’s something we are just learning and adjusting to ourselves. But there are a lot of resources out there to help you. If you want to do a free accessibility check, you can use a website like https://achecker.ca/checker/. It produces a report, identifying known, likely, and potential problems. But there is a plethora of tools out there. Free or otherwise.
You can check your colors with a tool like http://www.checkmycolours.com/. It checks foreground and background color combinations and determines if your site provides sufficient contrast when viewed by someone having color deficits.
Level AAA compliance means providing all users a tool to adjust everything listed above from text size, to paragraph spacing, to site width, to color contrast, to background choices and even a text to voice command in multiple languages. You can find a tool like this at https://www.atbar.org/.
From my reading, I would say a good rule of thumb is, if you are building a website from scratch nowadays, you should shoot for level AA. But if you are trying to adjust a website that is already built, you should start by aiming for level A. I can tell you right now, our website probably meets only some portions of Level A compliance. So, we’ve got a long way to go ourselves.