Companies that have violated ADA compliance website rules
In 2018, 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.
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, 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 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
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 #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 the text can be seen when hovered.
ADA compliance website issue #6: 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 #7: 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 #8: 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.
You should watch the use of all caps. All caps is often difficult to read and sometimes is read incorrectly by screen readers
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.