ADA Compliance Website Accessibility Guide: Guidelines and Resources

When designing or updating a website, it may seem prudent to cater to the needs and tastes of the majority of your users. Yet what may seem like simple aesthetic or design choices can exclude entire population groups from effectively engaging with your site and content.

It’s not just an effective design to ensure that your site is equally accessible to all users—it’s a legal imperative for ADA Website Compliance.

As of 2012, the U.S. Census Bureau reported that 56.7 million Americans (18.7% of the U.S. population) have a physical or cognitive disability. As the web’s popularity has grown, more and more companies have been sued for failing to create websites and digital services that include accessible features for disabled users.

The primary legal protection for disabled people in the United States comes from the Americans with Disabilities Act (ADA) of 1990, which, among other things, requires that organizations provide equitable access to their goods and services for all users.

There are heavy fiscal penalties for not creating accessible sites, and also a strong possibility of an impact on your bottom line—the global market of disabled users is over 1 billion, with a spending power of $6 trillion annually.

Here, we’ll look more closely at ADA website accessibility—ways to ensure that your site is compliant, and examples of sites that effectively put these principles into practice.

ADA website accessibility standards

The Americans with Disabilities Act dates from the early days of the web, but it remains the standard by which accessibility is measured for digital goods and services.

Title III of the ADA requires organizations to create tools and platforms that do not prevent disabled users from accessing the services available to the general public. For example, companies must provide equitable access to the goods and services of restaurants and other “places of public accommodations” — such as hotels, movie theaters, and amusement parks. The most recent case considered under Title III, Robles v. Dominos Pizza, Inc. (2019), held that the pizza company hadn’t created mobile and web experiences that allowed disabled users to take advantage of their delivery services.

Since the ADA doesn’t provide any specific guidelines or site-accessibility requirements (because it dates from 1990), The World Wide Web Consortium (W3C) created their own standards: the WCAG 2.0. The W3C’s standards highlight accessible design options for all elements of a site, from behind-the-scenes HTML code to the colors used in a design palette. The WCAG remains the most popular framework for ensuring ADA website compliance, and the federal government is working to adopt the WCAG standards as the legal standard for web accessibility.

How to make sure your website is compliant

The WCAG 2.0 is designed as a series of testable statements to evaluate whether a website’s content and presentation meet the needs of all users. WCAG requires that a site be “perceivable, operable, understandable and robust.”

Here, we’ll review the WCAG 2.0 standards—quoted below–and offer tips for addressing each of these requirements on your own site:

Perceivable

According to the WCAG, “information and user interface components must be presentable to users in ways they can perceive.” There are three main elements to consider for perceptibility: the availability of text alternatives, site and content adaptability, and distinguishability of content.

Text Alternatives

Users must be able to access a text alternative for all non-text content on a site. (e.g., images, video). Use HTML’s Alt-Text attribute in order to provide detailed descriptions for all visual elements of a site, including images, graphs, and visual-centric changes of context (e.g., differentiating between different sections of a site).

Design Tip: Create closed captions for videos using transcription services like Rev. Be sure to leave ample time for turnaround on transcription services—while some sites may take days to return your captions, Rev offers a three-hour turnaround (depending upon the nature of the content).

Adaptability

Users should be able to access content in a number of different ways, including the use of assistive tools, such as screen readers.

Design Tip: Organize content using simple formats, like outlines or structured walk-throughs.

Distinguishable

Users should be able to identify which elements of a website are most pertinent for their needs. Site elements and sections should be clearly defined, both on the front end and in HTML tags and structure.

Design Tip: Use contrast to highlight differences between site elements.

Operable

The WCAG 2.0’s second section holds that “user interface components and navigation must be operable.” In other words, the site must be able to be navigated and utilized by all users, regardless of their cognitive or mechanical ability. The main concerns here include navigability; time to complete tasks; and avoidance of seizure-inducing pop-ups and other site elements.

Keyboard Navigable

Users who can’t operate a mouse should be given keyboard-based navigation options

Design Tip: Allow tabbing to move from section to section. When possible, use a visual cue to highlight the current location of the cursor or the section in focus.

Enough Time

Users must be able to access media at their own pace, including video and interactive content.

Design Tips: Provide ample time for task completion, whether it’s form-filling or more complex tasks like selecting items to purchase. Allow pausing, etc., for timed tasks, such as video playback, and allow the alteration of presentation speeds.

Avoiding Seizures
Users prone to seizures should be warned of flashing elements.

Design Tip: Use multiple pop-up warnings, or avoid pop-ups altogether.

Understandable

The third section of the WCAG holds that “information and the operation of user interface must be understandable.” All users should be able to identify major organization components of a site and navigate through consistent patterns of interaction.

Readable

The default language of each web page should be specified within the underlying code.

Design Tips: Define the default language of each web page in the header of your HTML content. Support translation for unusual words and colloquial phrases. Also, provide a less difficult version of the text—lower-secondary is the standard—if the reading level of content is particularly high.

Predictable

Content on a page should adhere to a central organization that doesn’t change when a user engages with or focuses on a particular element of the page.

Design Tips: Ensure that you use consistent navigation patterns across your site. Also, don’t change the entire focus of a site when a user accesses a specific element or input field.

Input Assistance

Web developers should provide error-correction and error-detection mechanisms to assist users in entering information to forms or other input points.

Design Tip: Where possible, use predictive text for input fields to help offer alternatives when errors in user input are detected. Also, offer comprehensive, text-based help for all areas of your site, particularly those where users have to enter information.

Robust

The final section of the WCAG 2.0 holds that “Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.”

Compatible

Here, “robust” means “comprehensive”—that is, a site’s content should be represented in enough ways that it can be formatted to fit a wide variety of user needs and browsing patterns.

Design Tip: Ensure that all site content is complete and is served in a comprehensive manner that includes all relevant, related content.

Examples of websites with excellent compliance

Thankfully, it’s becoming easier to find sites that are fully compliant with the ADA and the WCAG 2.0. Perhaps not surprisingly, the W3C’s site fits this bill. But it’s also helpful to study sites that handle particular aspects of the WCAG well:

Dropbox’s homepage reveals how a seemingly simple design choice can radically boost the ability of all users to navigate a site. In using bold, contrasting colors in their design palette to differentiate between site sections, this file-sharing service helps users identify relevant site elements at a quick glance.

Udacity’s online courses offer in-depth instruction and, in many cases, certification in a wide range of topics. Their courses are primarily video-based, and all videos feature English-language subtitles. Udacity’s users can also alter the speed of playback on a given video, making it more accessible to those who need more time to work through the material given.

YouTube’s Video Player is fully ADA-compliant, offering video creators a number of different options for including captions and subtitles in their videos. Users can create captions from scratch within the player itself or upload complete caption files in formats like .txt or .srt. Although it may not be appropriate for more-complex captioning—say, for audio tracks with more than one speaker—YouTube offers automatic transcription as well for those seeking a more programmatic solution.

Wesley Mission, an Australian nonprofit that offers a wide range of community services, has designed their site to make keyboard navigation a breeze. Tabbing brings users through relevant forms and fields on the site. Also, the site is structured very clearly—the sections tell a story and link together well—and most areas of the site are accessible from the homepage

One other option sites can consider is the pursuit of a more web-app-centered approach to design. Progressive Web Applications—like Forbes’ website–structure content and interaction like native applications, with simple, static navigation options; offline access; and even the option to save a given page of the site as text or an image file on a computer or device for later review.

Bringing it all together

Remember that you’re creating accessible content for all users, and that many of them have difficulty navigating the simple elements that many of us take for granted when browsing the web. Use the checklist provided to help ensure that your site meets or exceeds the ADA’s standards.

View and download the ADA Compliance Website Checklist to test your site against the WCAG 2.0 Website Accessibility Checker.