The Ultimate Guide to Achieving Website ADA Compliance
Here’s a thing 99.99% of companies don’t think about until they’re slapped with a lawsuit: website ADA compliance.
In the last few years, major companies like Patagonia, Reebok, the NBA, Ace Hardware, Bed Bath and Beyond, and Estee Lauder, have all been sued on account of the fact their website was not ADA compliant.
Did you know that if your website is not ADA compliant, you risk fines of up to $75,000 for the first offense alone?
And, in fact, lawsuits are on the rise, with hundreds of ADA compliance lawsuits filed every single month.
An ADA compliant website provides an online experience accessible to everyone, including people with disabilities. This means having a site that accommodates visually impaired users, creating content suitable for screen-readers, using descriptive links, and making website actions easily accessible via a keyboard.
Here’s the simple truth. You may think making your website ADA compliant is difficult. It’s not! But it requires working with development & SEO companies that know the rules and can apply them throughout the design and coding process. And sadly, most development shops are simply not equipped to do it properly.
So in this article, we wanted to explore the main factors that go into making your site ADA compliant. This guide can be used by marketers, website owners, development companies, and everyone under the sun who may have a stake in a digital product, be that a mobile app or a website.
In short, we will show you the 4 most critical steps to ensure your website is compliant to avoid running afoul of ADA compliance regulations and steep fines.
Before we begin, a simple clarification for those who aren’t very familiar with ADA compliance:
What Is ADA compliance?
Title III of the Americans with Disabilities Act (ADA) regulates businesses to provide a website experience that works well for citizens with disabilities.
The ADA states, “no individual shall be discriminated against on the basis of disability in the full and equal enjoyment of goods, services, facilities, privileges, advantages, or accommodations of any place of public accommodation”.
In simple terms, the act itself was put in effect to ensure that no digital property discriminates against people with disabilities. So, if a company has a website, it needs to be accessible to everyone, period. Last but not least, as of 2018, these rules & regulations apply to ALL web content & designs.
Why Your Website Must Be ADA Compliant
1. It's the right thing to do
There are over 25 million people in the USA who have visual impairments. Visual impairments or low vision are defined as those whose vision is less than or equal to 20/20.
Simply put, if you or a friend had a disability would you want companies to make reasonable changes to their website so that it was accessible?
2. You are legally required to be compliant
Legal precedent has been clearly set over the last 10 years, that has shown that ADA rules do apply to websites. If your site is not ADA compliant, you are breaking the law and are at risk of civil class action lawsuits.
3. Lost business from local, municipal, and federal government organizations
You risk losing new business from government entities and conscious procurement departments across the United States.
If your website receives federal funding, assistance, or you have contracts with the government your website must be accessible. Or, you risk losing funding, assistance, and contracts with the government.
4. Risk a mad dash to fix your website
It's not uncommon for courts to force a company to fix ADA compliance issues by a certain date. This often causes a mad scramble to get it fixed in time.
This mad scramble has real, negative impacts on your priorities and focus. Be proactive and get your website complaint before its forced on you.
5. Lose customers with disabilities.
There are over 25 million people in the USA with visual impairments. 1 in 8 people in the USA have a hearing impairment, totaling over 30 million people.
Just between these two disabilities, there are over 55 million people affected. Which is over 17% of the US population.
If you don’t ensure your website is compliant for any other reason, you should at least recognize the potential revenue loss you’ll experience from losing out on doing business with or serving almost 20% of the population of the United States.
Let’s discuss some specific examples of companies that have run into troubles with ADA compliance rules (and paid a heavy price), and see what we can learn from them.
Companies That Have Violated ADA Compliance Website Rules
1. Amazon
Amazon commanded almost 50% of all eCommerce traffic in the United States, making it incredibly important that its website is accessible to everyone. Amazon needs to set the bar high for all others to follow.
However, over the years there have been multiple successful lawsuits against Amazon for not being compliant with some of the most basic compliance rules.
Bishop v. Amazon
Bottomline: Amazon didn’t use alternative text descriptions for visual elements & images on the site, therefore not allowing people using screen readers to navigate the website and buy products online.
A lawsuit was filed against Amazon in New York by an individual Amazon customer, Cedric Bishop on February 4th, 2018. Bishop uses a screen reader to access the internet, including Amazon. Bishop noted that the only way for him to use the internet was through screen reader technology.
The major issue was that the Amazon website failed to be accessible for screen readers. Screen readers are what people with vision impairments use to understand a website.
Specifically there were a few big problems that caused the site to not be readable by screen readers which included Amazon’s lack of text versions for images on the site and the fact that Amazon used images without text as web navigation elements.
All of these issues make it impossible for screen readers to do their jobs of making a website accessible for those with vision issues.
What we learned:
- Websites must be accessible by screen readers so that those with visual disabilities can access the website.
- The ADA compliance issues in question were incredibly easy to implement. Simply put, Amazon should have added “alt text descriptions” for all images and used text descriptions for all navigation elements.
Had they known of this ADA violation, their development team could have easily prevented it from becoming an issue.
National Federation of the Blind vs. Amazon
Bottomline: Amazon got in trouble with their Kindle converter for offline documents. They promptly reached an agreement to fix the underlying issues and to develop technologies, that are sensible to people with disabilities, for Kindle and the website as a whole.
Back in 2016, The National Federation of the Blind (NFB) argued that Amazon’s website was not accessible for those who are blind.
Why was Amazon sued to begin with? Believe it or not, it was the Kindle converter for documents. Amazon has developed its own converter (MobiPocket) to digitize all the documents, books, and magazines that are shown on Kindle. But the problem is that Amazon’s converter was making it difficult for people with disabilities to access any items other than super basic documents.
In light of this issue, New York City also delayed awarding a contract to Amazon for 30 million dollars in response to the protest from the NFB.
To Amazon’s credit, they reacted promptly and reached an agreement with the NFB which included the following stipulations:
- Amazon to lead the charge to create web accessibility technology to help blind people easily navigate the website.
- Amazon agreed to work with the National Federation for the Blind to user test and validate the new technologies they have built will work for all blind people.
- Amazon also agreed to periodic assessments by a 3rd party to assess progress.
What we learned:
- Companies like Amazon are being tasked to not only provide accessible web experiences, but also innovate to make web accessibility as a whole, better.
2. Netflix
National Association of the Deaf vs. Netflix
Bottomline: Netflix was effectively forced to add caption text (subtitles) to all their content due to an ADA compliance lawsuit.
In a 2011 lawsuit, NAD claimed that Netflix’s lack of closed captioning discriminated against deaf people. At the time, Netflix had around 23 million subscribers. NAD argued that with approximately 1 in 20 Americans being deaf, Netflix was discriminating again 1 million people by not including captions on all their video content.
Side note, over 57% of all Americans use at least one video streaming service (Netflix being number 1).
In court, Netflix tried to argue that websites should not be part of ADA compliance regulations, as there is no physical structure / location. They also argued that websites should not be in scope of ADA as there is no public component (the original ADA compliance law specifically called out that ADA rules apply primarily to services, locations, and products that are supposed to be open to the public).
However, the judge didn’t buy the Netflix argument.
The judge ruled in favor of NAD, by declaring that the intent of the ADA is for individuals with disabilities to fully enjoy goods, services, and privileges that any member of the public would have access to.
Note that, as we mentioned in the introduction, lawmakers have updated the rules of the ADA act in 2018 to apply to all websites, public or otherwise.
The ruling in the Netflix case sent a message to all companies that manage online video content to become ADA compliant. It also led to specific legislation called Communications and Accessibility Act. This legislation extended the closed captioning rules to all online video content.
What we learned:
- Websites do qualify under ADA rules
- Closed captioning is a requirement for online videos
3. Nike
Aria Mendizabal vs. Nike Inc.
Bottomline: Nike was making the most common ADA usability mistakes when it came to allowing people with disabilities to browse through and shop on their site.
In 2017, Aria Mendizabal, who is legally blind, sued over 30 retail websites in an attempt to convince all of them to implement the ADA compliance protocols in place. All suits were eventually settled with all websites adopting protocols to make their websites ADA complaint.
The lawsuit stipulated that two of Nike’s web properties (Nike.com & Converse.com) didn’t allow people with visual disabilities to use their websites.
Nike was failing its users with vision and hearing disabilities in a few key ways.
1. The website didn’t use alternative text for each image on the website
Not providing alternate text means that screen readers are not able to tell users what an image contains. Specifically this means that the main functionalities of the website become completely inaccessible including: buying products, reviewing store location information, and researching products.
2. Issues with site links
Both of Nike’s websites had links with no text associated with them. For example, there may be a link to a shoe on a page, but there is no text to explain to a screen reader what that link is / where it goes (aka to a specific pair of shoes).
In addition, Nike was also using multiple links that redirected to the same page, causing confusion for blind individuals.
What we learned:
- Websites must be built to be accessible to the visually impaired
- Websites need to work well for those with hearing impairments
And now, on to the good stuff. There are 50+ requirements that you need to be aware of in order to be ADA compliant. We’ll walk through some of the most common issues, in order of priority, so you can quickly fix them and get out of trouble.
ADA compliance website issue #1: keyboard access
Ensuring that users can conduct all tasks on your website using a keyboard, and not the mouse is a critical part of having an ADA compliant website.
It is common for many disabled people (e.g.: those who are blind, those without proper muscle control, little use of their hands) to purely use their keyboard or a modified keyboard to navigate online.
This means that every activity on the website needs to be accessible through the use of a keyboard. For example, to navigate between different components on a web page a user should be able to use Tab, and Shift + Tab to navigate forward or backward.
To be compliant, the user should be able to do the following interactions from their keyboard:
- Click on a link or button
- Select or unselect an item as a radio button or item in a drop down or menu
- Navigate the page
- Auto complete text
- Close out a dialog box
- Adjust a slider UI element up or down
- Scroll through the navigation / menu items / the page
Example below with how most sites do it versus how navigation should work via keyboard access only.
This is very hard to do properly as there are many interactive components on a modern website. You’ll need to do extensive quality assurance without your mouse to ensure every single interaction can be done through keyboard usage only.
ADA compliance website issue #2: alt text on graphics
Alternative text (Alt Text) is the metadata assigned to each image on your website explaining what the image is. It should be implemented using your website content management system or, if you don’t use one, directly in the website’s html code. So for example, if you use WordPress, the alt-text field will be available on load as shown below.
Every image on your site should have descriptive alt text. This assists screen readers in deciphering content for those who are visually impaired. A screen reader isn’t able to figure out what an image is on its own, it relies on the alt text provided in the website code to read what an image contains to the user.
ADA compliance website issue #3: accessible forms
Your website forms need to be accessible for those with disabilities so they can easily be read and completed by a user. Additionally, all forms should have easy to see error messages with instructive messages on how to fix a form error.
Furthermore, every form on your website should have very clear labels for each field that a user will have to input. Each label needs to clearly describe each form control or field.
The goal is to ensure that assistive technologies like screen readers refer to the right label in order to ensure the right information is entered by the user into the right field.
ADA compliance website issue #4: proper nested HTML markup
HTML markup is the standard coding language used for creating websites. HTML elements form the building blocks of any website. Developers can create elegant code or can create code that looks more like spaghetti.
To be ADA compliant the HTML code needs to be uniform to coding standards.
Headings help define the structure of the page. Think of it as nesting, almost like a Russian doll.
Let’s give a specific example.
Let’s say your webpage is about cats.
The main heading might be “Why I love cats”.
The sub-heading could be “1. Cats are cuddly”.
And the Sub Sub heading may be “Cats are furry”.
This structure explains how concepts relate to each other.
In general, this is a non-site specific HTML coding standard.
Headings go from H1 to H6. It is the structure of your page. It is important that this is used correctly to show screen readers the structure of your page. In development this is referred to as nesting.
So, what's a real-life example of good versus bad HTML site structure? See below.
ADA compliance website issue #5: language
As of now, screen readers don’t know what language they are looking at unless the code tells them. Luckily, the HTML can explicitly tell screen readers through the “Lang” attribute.
Your developer needs to tell screen readers what language the content is in using the lang attribute, so the screen reader can accurately read, translate, and present the information orally to the user.
ADA compliance website issue #6: link titles
The title attribute notes information about an element as a tooltip when hovering over it.
We need to implement the right link type to be sure that the text can be seen when hovered.
ADA compliance website issue #7: descriptive links
All links across your website should be written in a way that clearly indicates what the user should expect to see when they navigate to a specific link.
The link should be descriptive and clear. For example, a good link would be “Learn how to do a proper sit up.” While a bad link would be, “Learn here.”
Write links that clearly describe what the user will see when they click on it.
ADA compliance website issue #8: color contrast
There needs to be a significant contrast between the colors of text and the background the text is on. Think of black on a white background. Easy to read, right? Now, think of reading brown on a black background. Not easy to read!
Too little contrast makes it very hard for people to read. This should be carefully followed as too little contrast poses major issues for everyone.
The font should contrast from the background by at least 4.5:1 for normal text. The font contrast ratio should be 3:1 for larger text, which is defined as 14 point (18.66px) and bold or larger, or 18 point (24px) or larger.
ADA compliance website issue #9: fonts
The font choices you make have an impact on usability and accessibility. This includes the font type / family, use of capitalization, and font sizes.
1. Capitalization
You should watch the use of all caps. All caps is often difficult to read and sometimes is read incorrectly by screen readers
2. Font size
Font sizes should be at least 14pt, to make the text easily readable for everyone.
At a minimum, if users have to squint to see the text, that is a bad user experience for all people regardless of whether they have a disability or not.
In this example below, the font size is appropriate and very easily readable by people on the right side but too small on the left side.
We’ve walked through some of the most common issues that companies face when trying to be compliant.
This is by no means an all-inclusive list, but should give you a sense of the depth of issues that your site may have.
Steps To Becoming ADA Compliant
1. As an organization commit to web accessibility for your website.
This means prioritizing the accessibility work that is required. Becoming compliant is a lengthy task that requires dedication to execute properly.
Once you get started, it’s critical that the team stays committed to getting it done.
2. To get a sense of the severity of the problem, check your website using Web Content Accessibility (WCAG 2.0)
This URL validation check will help you get a handle as to the magnitude of issues on your website. It’s not uncommon for our clients to see 40+ issues just on their homepage alone. Keep in mind that this tool looks at how a site is coded but to truly understand all of the issues with your site, you need a consultant who manually reviews your entire site.
3. Work with an expert website agency to conduct a website ADA compliance evaluation and fix any issues found on your site.
An expert agency or virtual compliance officer can help determine a list of possible issues, prioritize those issues, recommend fixes, and then conduct further audits.
The agency will use a host of methods to find all compliance issues and implement tried and true methods to fix the issues. For example, we use JAWS, ZoomText, and w3c checkers.
We recommend that you use an agency that can find and fix the issues found on your site. This can help ensure that the issues are fixed correctly the first time around.
4. Continue reviewing and optimizing over time
ADA compliance isn’t a one and done. As the web evolves, so do the requirements to remain ADA compliant.
Websites continue to become more interactive and complex over time. As new features and functionality are added, we need to ensure that a site remains compliant.
For example, some websites are adopting scrolling techniques like infinite scroll. How does that next generation feature affect compliance? We will guide you through the challenge and ensure that over time your site continues to be compliant long after the first set of fixes.
We recently co-hosted Accessibility Matters: Making Your Municipal Website ADA-Friendly, a webinar outlining the importance of website accessibility and outlined the steps towards website ADA-optimization.
We can work with you to instill a culture of compliance. Let’s talk today! hello@digitalauthority.me or 312-820-9893.
You Might Also Like:
A Guide to ADA Compliance for Hotels and Event Venues
|
|
Want To Meet Our Expert Team?
Book a meeting directly here
