Originally posted on https://taggartmediagroup.com/blog/ada-website-compliance/how-to-make-your-website-ada-compliant-for-2020/

 

The Americans with Disabilities Act (ADA) has seen many changes since 1990 to curtail discriminatory and predatory practices. One of these changes was the inclusion of business websites that weren’t operable or perceivable by people with disabilities.

But why should you care?

Well, a non-compliant website makes you potentially liable for fines of thousands of dollars if not more. And these fines aren’t uncommon either. In fact, ADA website lawsuits are on the rise.

In 2019, there were 2,285 ADA website lawsuits against companies like Sephora, Helzberg Diamonds, The Home Depot, and Chick-fil-A in the United States, an increase of 181% over the past year.

So what can be done to avoid fines? A few things, actually. Follow the steps in this guide to make your website compliant with ADA regulations and guidelines.

We’ve also added common traps and errors that you should look out for.

 

What is ADA Compliance?

In essence, ADA compliance means making your service or product accessible to people with disabilities.

The act has, for decades, provided organizations guidelines and standards that make their physical offerings usable by disabled individuals, but the act was amended to include websites in 2008, with effects made effective in 2009.

Though guidelines have been published by the Department of Justice, there are no “rules” when it comes to what an ADA compliant website looks like – just guidelines and regulations.

The most common set of these guidelines is defined in the Web Content Accessibility Guidelines 2.0 (WCAG) which is soon expected to be updated to version 2.1 with some new additions.

 

Corporate Extortion: Danger of Non-Compliance

The biggest danger for businesses with non-compliant websites comes from hundreds of lawyers who are on the lookout for websites that aren’t ADA compliant to sue them.

Many of these lawyers will file a case on behalf of someone with a disability and then seek compensation in the form of attorney fees and compliance since private businesses cannot be sued for damages on these grounds.

According to experts, ADA website lawsuits are generally settled for between a few thousand dollars and $20,000. This would change if the defendants decide to fight the case in court, in which the costs can rise significantly.

In many cases, hundreds of cases are filed by a single attorney working with the same disabled individual with the sole motive of enriching themselves.

This is nothing short of extortion which is why businesses are urged to take a thorough look at their website and fix anything that makes the website less accessible.

 

Web Accessibility Standards (WAS)

Web Content Accessibility Guidelines (WCAG) 2.0 was recently updated with a few more additions but version 2.0 is still the most widely used set of guidelines.

However, to make it easier for readers to understand what makes a website more accessible, we’ve chosen to list the criteria of Web Accessibility Standards which is a toned-down or simpler version of WCAG.

In essence, most of the criteria are the same and revolves around making the website and its content perceivable, operable, understandable, and robust.

WAS’s guidelines can be divided into 5 sections. Here’s a brief summary of the guidelines.

 

Website Presentation

• Descriptive text: Any text used to describe the page titles, headings, and link anchor text should be clear and must accurately convey the page or content that follows on its own.
• Nested Headings: For each page, headings start with one
  

  tag and optionally then flow down to

  ,

  , and so on down to

  based on the hierarchy of subheadings within the page content.

• Color: Color on its own cannot convey meaning and so if color is used to differentiate between two elements of the website, an alternative must be provided as well.
• Clear forms: Forms can be tricky, especially when being used with a screen reader. This is why each field must have coded labels, clear instructions on how to fix errors, and use common formats (e.g. 10/12/1980, for date of birth).
• Uniform labels: All images like icons, frames, fields should have descriptive alt tags. Identical elements should have identical labels and tags. This is why Amazon faced its ADA compliance lawsuit (more on that later).
• Clean code: It’s a lot harder to navigate through error pages, broken links, and HTML errors with a screen reader, hence the website should be clear of any such errors.

 

Website Appearance

• Zoom text: In order for your website to be ADA compliant, the user must be able to increase the text by up to 200% without negatively affecting the readability of a website.
• Color contrast ratio: Legibility is an important part of ADA compliance which is why all text must have a color contrast ratio of 4.5:1 against its background.
• Distinctive links: Text links inside a body of text and not inside header or footer navigation menus must use at least two of the following markups: underline, bold, italics, color to differentiate the links from normal text.
• Consistent layout and navigation: It’s important the website maintains a consistent layout framework and header and footer navigation throughout the website even when it is being viewed in portrait or in landscape mode. The main pages (About Us vs. Product Page) can have different layouts but pages within those categories must carry the same layout. That means all product pages must have the same layout.

 

Content Alternatives

• Descriptive alt text: All important images on a website must have descriptive alt text. This also includes charts and infographics that need to have a descriptive caption to connect the alt text with the information in the image.
• No images of text: Instead of using images of texts, websites need to directly have text. The exceptions being logos, branding, graph labels, etc.
• Text transcripts: If your website is hosting audio or video media, then that page must all have a text transcript that conveys the full meaning of the audio or video.
• Closed captioning: All videos with understandable sounds/voices should have synced closed captioning.
• Table data: A large table data must be either accompanied by a body of text that explains the content of the table or it should be broken down into smaller tables.
• Extraneous documents: External documents like PDFs, PowerPoint presentations, Excel files, Microsoft Word documents, etc. should meet basic respective accessibility requirements like large text, contrast, captions, etc.

 

User Control

• No automatic pop-ups: Automatic popups for commercial purposes like newsletter sign up, discount offers are not permitted. However, popups for assistance are allowed. These include popups with instructions like that indicate errors or show a time-warning.
• No automatic video or audio: Autoplay is not permitted.
• No unexpected changes: In fact, no element of the website should change unexpectedly. Instead, use milder transitions.
• Pause updating/refreshing content: The user should have the ability to pause content that updates or refreshes automatically. Rotating ads are permitted.
• Adjustable time limits: All time limits must provide a warning before they expire and the user should have the ability to extend the time limit by up to 8x the original limit before the time limit begins. There are exceptions here like time limits on auction bids.
• Important submissions: Users must be able to review and correct critical financial/personal/scheduling information (e.g. credit card number, social security number, reservation date, etc.) before finalizing the submission.

 

Website Usability

• Keyboard only: The entire website including all of its elements must be accessible by keyboard only.
• Focus indicator: A website should have a focus indicator box that shows on all links and fields.
• Skip navigation: A skip navigation link (does not have to be visible) should be available at the top left of every page on a website.
• Search function: A search function, at the very least, must be placed on the homepage. If it’s placed on multiple websites, it should remain the same.
• Sitemap: A link to a sitemap must be provided for, at a minimum, on the homepage.
• Language: A default language is set for the website.

You can read more on Web Accessibility Guidelines on accessible.org

 

Automatic ADA Website Compliance

 

Examples of Common ADA Compliance Errors

1. Alt Tags / Amazon

According to plaintiff Cedric Bishop, the lack of descriptive alt text for images and other elements on Amazon’s website made it impossible for people using screen readers to choose and buy products since back then, Amazon did not provide text versions of images and used images without text as web navigation elements.

Alt tags are often the culprit behind most ADA compliance lawsuits but we chose the ADA lawsuit against Amazon from 2018 because Amazon is arguably the biggest online store on the planet and this was one of the biggest cases of alt tag blunders.

2. Closed Captioning / Netflix / Amazon / Hulu

Closed captions are crucial in enjoying video content for anyone with impaired hearing and three big names have been sued at different times for the same reason.

In 2011, the National Association of the Deaf filed a lawsuit against Netflix claiming that the website is discriminating against 1 million people by not providing closed captions on all of its video content. Netflix argued that ADA shouldn’t apply to websites but the court ruled in favor of NAD.

A few years later, in 2015, a lawsuit was filed against Amazon on the same grounds as Netflix. However, Amazon Prime already had closed captions so the lawsuit instead targetted Amazon’s archive of Instant Video, which at the time had 190,000 movies and TV shows. Amazon settled and worked to provide closed captions on all of its content.

The same lawyer who led the legal team against Netflix in 2011 teamed up with NAD to file another lawsuit, this time against Hulu for not having closed captions. Hulu settled with NAD and agreed to update all of its content with closed captions by September 2017.

3. Site Links / Nike

In 2017, two of Nike’s websites were taken to court for not being accessible by disabled users, particularly by blind users. The lawsuit included a number of inaccessible elements and mistakes on Nike.com and Converse.com like empty links that contain no text, redundant links that connect to the same pages as adjacent links, and linked images that have no alt-text.

4. Keyboard Access / Sephora

The ADA compliance lawsuit against Sephora was another case in New York against a big name brand in 2018. The plaintiff, a blind woman, argued that Sephora’s website failed to meet accessibility standards required by federal and state disability laws. According to the plaintiff, the website had no alt-text, keyboard-only use, and accessible forms with checkboxes and drop-down menus.

5. Accessible Forms – Chick-Fil-A

The website of fast-food chain Chick-Fil-A was also one of the companies held responsible for discriminating against disabled people by not having an accessible website. Chick-Fil-A’s website too had a number of issues in its design. Issues like lack of alt-text on images, inaccessible forms, the lack of adequate prompting and labeling; the denial of keyboard access; and the requirement that transactions be performed solely with a mouse.

6. External Documents / Amazon

The alt text lawsuit wasn’t’ Amazon’s first encounter with ADA compliance. Back in 2016, Amazon faced another lawsuit, this time filed by the National Federation of the Blind (NFB) that argued that Amazon’s Kindle converter (MobiConvertor) did not work well with external documents except the most basic documents and made it impossible for visually impaired individuals to read documents on the device.

The company took action to improve its convertor and worked with NFB to develop better technology for visually impaired individuals.

 

Conclusion

I know what you might be thinking – ADA compliance is overwhelming. And these lawsuits might even seem predatory to large businesses but it’s important to understand one key aspect – there are millions of people who cannot access important information if your website isn’t accessible for the.

In fact, one in eight people in the United States (13 per cent, or 30 million) aged 12 years or older have hearing loss in both ears and more than 3.4 million (3%) Americans aged 40 years and older are visually impaired with millions more under the age of 40.

And on top of all this, ADA website compliance does not have to be hard. Yes, there are multiple benchmarks and regulations that your website needs to comply with (like ADA, WCAG 2.1 & Section 508) and the website would need to be audited regularly to remove broken elements (like empty links).

But none of this has to take all of your time. You can hire experts or you can even use AI-based compliance tools to make every element of your website compliant and keep it that way all year round, automatically. We actually use this tool on our own website (click on the blue icon on the bottom left).

Automatic ADA Website Compliance