The Ultimate Guide to Website ADA Compliance: All You Need to Know (With Visual Tips)

HLOGO-Copy-11
Digital Authority Partners
  • Date Published
  • Categories Blog, News

Here’s a thing 99.99% of companies don’t think about until they’re slapped with a lawsuit: 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.

Before you think, well, ADA compliance doesn’t apply to me, the reality is it probably does.

And most companies find out about this reality, the hard way. In the last few years, major companies like Patagonia, Reebok, the NBA, Ace Hardware, Bed Bath and Beyond, Estee Lauder, have all been sued on account of the fact that 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, up 8% since 2016. Literally, hundreds of ADA compliance lawsuits are filed EVERY SINGLE month!

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 in 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 all of 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 disability. 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

As of 2018, there are over 25 million people in the USA who are visually impaired. Visually impaired is 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, risk civil class action lawsuits.

3) Lose 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 your contracts with the government. Don’t risk it!

4) Risk a Mad Dash to Fix Your Website

It’s not uncommon for courts to force your 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 a real negative impact on your priorities and focus.

Don’t be caught with your pants down! 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 has a hearing impairment, totaling over 30 million people.

Just between these two disabilities, there are over 55 million people. 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 revenue loss you’ll experience from losing out on doing business 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, literally!), and see what we can learn from them.

Companies That Have Violated ADA Compliance Website Rules (Some Examples)

Amazon

In 2018, Amazon commands almost 50% of all eCommerce traffic in the United States. This makes it incredibly important that their website is accessible to everyone. They need 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. We’ll go into depth on a few of them.

Bishop v. Amazon

Bottomline on top: 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 buying 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.

Should they have 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 on top: Amazon got in trouble for their Kindle converter for offline documents. They promptly reached an agreement to fix the underlying issues and to develop technologies that are sensitive to people with disabilities for Kindle and the website as a whole.  

Back in 2016, The National Federation of the Blind 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 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 documents 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 build 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 experience but also innovate to make web accessibility as a whole better.

Netflix

National Association of the Deaf Vs. Netflix

Bottomline on top: 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. The 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, in 2018, 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 the 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, privileges, etc 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

Nike

Aria Mendizabal Vs. Nike Inc.

Bottomline on top: Nike was making the most common ADA usability mistakes when it comes to allowing people with disability to browse through and shop online 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 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) don’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 is about. 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 on the same redirecting to the same page, causing confusion for blind individuals.

What we learned:

  • Websites must be built to be accessible by 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 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 (ex: 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 / 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

An example is 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 helps screen readers 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 that you provide in the website code to read to the user what an image is.

ADA Compliance Website Issue #3: Accessible Forms

Your website forms need to be accessible for those with disabilities so that they can easily be read & 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. And each label needs to clearly describe what each form control or field is.

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 #5: Properly 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 the Russian dolls which fit one item within the next.

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-Subheading 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? I’m glad you asked. Here’s one just for you 🙂

ADA Compliance Website Issue #6: 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.

This is so that the screen reader can accurately read, translate, and present the information orally to the user.

ADA Compliance Website Issue #7: 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 that text can be seen when hovered.

ADA Compliance Website Issue #8: 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 #9: 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 especially 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 #10: 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.

Capitalization

You should watch the use of all caps.

All caps is often difficult to read and sometimes is read incorrectly by screen readers

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 siz.

We’ve walked through some of the most common issues that face companies 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 Become 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 getting done 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 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 can help determine the list of issues, the priority of the issues, recommendations to fix the issues 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, w3c checkers.

We recommend that you use the agency that can find & fix issues the issues found on a site. This helps 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 the site remains compliant.

For example, some websites are adopting scrolling techniques like infinite scroll. How does that next generation feature effect compliance? We will guide you through the challenge and ensure that over tie your site continues to be compliant long after the first set of fixes.

We can work with you to instill a culture of compliance.

Let’s talk today! [email protected] or (312) 600–5433.