What does ADA compliance mean for my website?

What is ADA compliance?

The Americans with Disabilities Act was instituted in 1990 in an effort to end discrimination based on differing abilities. Drawing heavily from the landmark Civil Rights Act of 1964, which established protections against discrimination based on race, religion, sex or national origin, the ADA went a step further by requiring organizations to provide “reasonable accommodations” to employees with disabilities.

This was a fairly revolutionary addition that led to the widespread adoption of wheelchair access ramps, accessible restroom facilities, and many other equal-access accommodations that have become a regular part of most American workplaces. In 1990, however, legislators had no way of knowing that the then-infant internet would soon become not just a key element of doing business, but the very backbone of global commerce.

What does the ADA say about websites? 

The ADA’s relationship with websites has been a complicated and often confusing story. The ADA does not explicitly address online compliance, even after undergoing several amendments in the far more web-oriented era of 2008. With no specific coverage under the law, it usually falls to the courts to determine how ADA standards apply to websites—or whether they do at all.

Title III of the ADA requires that every owner, lessor, or operator of a “place of public accommodation” provide equal access to users who meet ADA standards for disability. With roughly 1.66 billion people around the world making online purchases in 2017, one might reasonably presume that this concept extends to websites, but from a legal standpoint, there is a surprising amount of grey area.

Various courts around America have ruled that commercial websites are places of public accommodation and thus subject to ADA rules. Other cases have concluded that websites are bound by ADA regulations if there is a close “nexus” between the site and a physical location, the most famous example being the ruling against the Winn-Dixie supermarket chain for not making its site accessible to users with low vision. Other courts have decided that the ADA as written simply does not offer any protections for online users. With no overarching federal rules in place, it’s difficult to make a definitive statement about whether or not any given website is governed by ADA accessibility rules.

Further complicating the issue, the U.S. recently appeared to be on the verge of adopting more comprehensive accessibility requirements. Federal regulations slated to go into effect in January 2018 would have held federal websites to the standards of WCAG 2.0 Level AA, the set of guidelines that provide the basis for online accessibility rules for most of Europe and many other nations around the world. The current administration, however, has withdrawn this requirement as part of a general push toward deregulation, leaving the online applications of the ADA as murky as ever. 

How to test manually a website for ADA compliance 

In order to test your website for accessibility compliance, you can use our free ADA Compliance Website Checker, or our Accessibility Chrome Extension for manual testing. 

Is ADA compliance mandatory for my website?

As you’ve probably figured out by now, the answer is no, because it’s not at all clear how or even if ADA rules will be applied to any particular website. Still, it’s generally a good idea to err on the side of caution. Many states have adopted their own accessibility laws, and the volume of accessibility-related lawsuits filed against websites has ballooned in recent years. Plaintiffs have been more successful in these suits than ever before. With no clearly defined regulations to follow, it is probably not worth it for most companies to gamble that a court will rule in their favor.

So, without a clear set of accessibility regulations to comply with, how can you tell if your website is compliant? The best measure available is the aforementioned WCAG 2.0 Level AA guidelines. WCAG standards have been the guiding accessibility principle in the European Union and other countries since 1999, with the most recent update taking effect in Spring of 2018. While WCAG is a set of recommended actions rather than enforceable legislation, it forms the backbone of many online accessibility laws around the world and offers a strong model for any American organization striving to provide equal access for all users.

What part does WCAG 2.1 play in ADA compliance?

The WCAG guidelines were updated from version 2.0 to 2.1 in June 2018. The updates in 2.1 cover changes in technology that have occurred since the previous version, and also address areas that were underrepresented in 2.0. What does this mean for you? Not a lot right now. The compliance level targeted is still WCAG 2.0 Level AA, and the 2.1 success criteria are in addition to those already existing in 2.0.

We’ve covered WCAG guidelines at length in a number of other articles, but here’s a quick rundown of the basic principles for maintaining a WCAG and ADA compliant website.

Levels of compliance

WCAG guidelines break accessibility issues down into three levels. Level A issues are the most urgent and include problems that can severely limit a disabled visitor’s ability to navigate or use the website. Level AA issues tend to be more rooted in functionality, addressing areas where improvement is needed to give disabled users the full experience of a site. (Level AA is considered the target standard for most commercial websites.) Level AAA issues are the highest standard, fine-tuning and expanding on issues identified as Level A and AA. While it is an excellent goal, full Level AAA compliance is likely beyond the reach of most websites.

Areas of focus

Accessibility issues are categorized in four distinct groups under WCAG guidelines. Conveniently, they can be summed up with the acronym P.O.U.R.

• Perceivable issues are those that affect a user’s ability to find and process information on a website (for example, providing audio descriptions for video content).
• Operable issues are those that impact a visitor’s ability to navigate and use a website (for example, ensuring that all site functions and navigation can be operated via keyboard-only commands).
• Understandable issues concern a user’s ability to discern and comprehend all information and navigation on a website (for example, composing error messages that include a clear explanation of the error and direction for correcting it).
• Robust issues involve a website’s ability to adapt and evolve to meet the changing needs of users with disabilities (for instance, testing compatibility with all leading screen readers and ensuring that those capabilities can be upgraded in the future).

While the impact of the Americans with Disabilities Act on online accessibility is likely to remain vague for the foreseeable future, there is no question that equal access is a major concern for users across America, and for the courts that serve those users. In lieu of a clear set of national guidelines, abiding by WCAG accessibility standards remains the best option for most organizations. It’s not just a smart way to avoid accessibility lawsuits and negative publicity—providing accessible solutions for all users is just the right thing to do. 

ADA compliance checklist for websites

• Step 1: Read the law documentation
• Step 2: All media files and maps should have an “alt” tag
• Step 3: All your online forms should have descriptive html tags
• Step 4: All hyperlinks should have a descriptive anchor text
• Step 5: All pages on your website have “skip navigation” links
• Step 6: All the text content should be structured using proper heading tags
• Step 7: All PDF files should be accessible
• Step 8: All videos should have subtitles, transcripts and audio description
• Step 9: The color contrast of your web pages should be sufficient according to WCAG
• Step 10: All fonts should be accessible
• Step 11: All HTML tables should be populated with column headers, row identifiers and cell information
• Step 12: All audio files on your website should have a written caption
• Step 13: All call to action buttons on your website should have an accessible name and an ARIA label
• Step 14: All your website should be accessible with keyboard navigation
• Step 15:s Have a website accessibility policy page
• Step 16: Have easily locatable contact information to allow users to request accessibility information
• Step 17: Test your website accessibility according to the Website Content Accessibility Guidelines
• Step 18: Automate your website accessibility check to prevent missing critical accessibility issue

Accessibility guidelines for websites to achieve ADA compliance

Having an accessible website and marketing materials means having your entire team briefed on what accessible marketing looks like. Don’t panic—once you get the hang of things, it’s very quick to ensure your site is accessible.  

Start by keeping the following guidelines in mind:

Content

When writing content for web, emails, social media, etc., it’s important that content is accessible for people with all four types of disabilities: visual, hearing, motor, and cognitive.

Structure

To help those users with a screen reader or other visual impairments easily read your content, use headings properly. That means using the proper heading tags (e.g. use the H2 function, instead of simply using a bigger or bolder font). Your headings should also follow a logical hierarchy: the title or H1 is followed by an H2, and underneath an H2 heading use an H3 heading. This makes the structure and importance of content easy to follow. 

Readability

Making content easy to read and follow is important for readers with cognitive disabilities, but it also makes your content easier to scan and read for other users as well. Keep your sentences short and to the point.

Use bulleted lists, summary sections, and bolded keywords for easier scanning. Start with the most important information and end with the least important information. Avoid jargon and overly complicated words. Left align all text, including headlines.

Link text

When linking to other webpages, don’t use “click here” as the link text. Using descriptive link text make it clear to users with screen readers or visual impairments which link is which and where each one leads.

Accessible files

If you link to PDFs, PowerPoints, Word documents, or other types of files, make sure those files are accessible.

Design

Accessible design means making your design more usable for everyone, not only people with disabilities. Here are a few things to think about when it comes to accessible design.

Videos

There are three main ways you can make videos more accessible.

1. Subtitles: Make sure all videos have them. This not only helps people with hearing disabilities but is also useful for people is crowded settings or who don’t want to put in headphones to watch a video in public.
2. Transcripts: Include a transcript that has the text version of any speech in a video. The gold standard is a descriptive transcript, which includes a description of what’s happening in the video.
3. Audio description: This a speech version of a descriptive transcript and it makes it easier for blind people or people with visual disabilities to consume content.

Images

All images should have alt text, which is a short text that clearly and neutrally describes what’s going on in the image. This is the text screen readers read when they come across an image, so file numbers or unhelpful information can cause major usability problems for visually impaired users. For decorative images, the alt attribute should be empty (e.g. alt:“”).

Color

About 4% (or 312 million people) of the world’s population has some form of color blindness, which means that using color alone to communicate information can cause problems for some users. Use patterns, fill, sizing, borders, icons, or whitespace to communicate in addition to color.

When using color, make sure that the contrast is sufficient enough that users can read text or see color differences. For level example, WCAG 2.0 level AA compliance requires that your text have a contrast ratio of 4.5:1. If this sounds overwhelming, simply use a color contrast checker to double check your color combinations.

Fonts

Sans serif fonts are easiest to read, as they don’t include the small decorative markings. Limit the number of fonts you use (e.g. one for body text and one for headlines). Always use at least size 12 font and use bold for emphasis, rather than italics.   

Website

In order to make your website accessible (and increase conversions!), it’s important to think about all four types of disabilities: visual, hearing, motor, and cognitive. Website accessibility is a huge topic with many areas to explore. For marketers, we’ll focus in on three main areas.

Keyboard navigation

Keyboard navigation is important for people with visual and motor disabilities. Users who can’t use a mouse or who use a screen reader should still be able to navigate through your website. Make sure users can tab through menus, buttons, and all other navigational elements.

When users navigate to an element, they should have some type of indicator or focus to show where on the page the user is.

Form and table labels

The most important element for form accessibility is labels. Make sure each form field has a label (using the <label> element in the code for each field). That will ensure screen readers read the name of each field. If the user needs to know critical information about a field (e.g. if a password must be at least 9 characters), don’t include that information as placeholder text in a field but instead as text underneath the field label.

Make sure forms are easy to use and have a logical flow. Forms should, of course, be keyboard accessible, so users can tab through fields. Provide instructions at the top of a form to help users understand how to fill them out.

CTA buttons

CTAs are critical for marketing success, so it’s important that all your CTAs are accessible. Your buttons should always have an accessible name, which is usually the text on the button itself. Use an aria-label for the button in order to give screen readers the proper information. It might be helpful to walk through a few button accessibility best practices with your website development team to ensure CTAs are fully accessible.