shutterstock_1343180792 (1)

How the ADA is Applied to Websites and WCAG Compliance

Scroll to read the entire guide here, or download the PDF.

mockup-of-a-book-standing-over-a-customizable-setting-m3286-r-el2 (1)

Download the Guide

Get the complete guide delivered right to your inbox, so you can access it anytime you want!

Digital accessibility is about equitable access to goods and services. In addition to fair and equal access, there are compelling business reasons to meet Americans with Disabilities Act (ADA) requirements on your website. Universal access removes as many barriers as possible, widening the door for all people to visit, learn from, and interact with content. More business than ever is happening online. The time is now to make website improvements that ensure compliance.

If you have yet to understand how the ADA applies to web design and usability and what the specific WCAG compliance is, or just need guidance on how to implement best practices, this article can help.

This guide for ADA website requirements and WCAG compliance was written with input from both Smart Solutions and Accessible360, and reflects the history, current state, and best steps and solutions to design or maintain a compliant website.

Smart Solutions

Smart Solutions is a leading eCommerce agency that builds, enhances, and manages websites for goal-oriented eCommerce businesses.

Learn More Here

Accessible360

A360 utilizes a proven process to assess digital environments, enable new accessible development processes, and equip businesses to stay accessible and compliant.

Learn More Here

Table of Contents

Jump straight to the chapter you wish to by selecting any of the options below.

The Americans With Disabilities Act

The Americans With Disabilities Act was authored within the Civil Rights Division of the United States Department of Justice. It addresses three broad sectors of society:

  1. Employment
  2. State and local government
  3. Commercial facilities

Public accommodations, covered under Title III of the ADA, have been widely accepted to include websites and online businesses.

ADA Amendments and Definitions

There are two important ADA amendments that contextualize our understanding of regulatory standards:

  1. In a 2016 amendment, congress clarified that the word “disability” should be “broadly construed and applied without extensive analysis.” For ADA website compliance, this means that long discussions around who must or must not be accommodated miss the point of the guidelines. Business owners should err on the side of wide-scale inclusion, rather than splitting hairs over what does or does not classify as a disability.
  2. In a second amendment in 2016, a final rule was signed that further clarified an obligation of businesses to provide “appropriate auxiliary aids and services for people with disabilities.” This ruling applied directly to the production of digital movies, but can also relate to the use of supporting tools—non-native to a site or platform—meant to help people with disabilities use a digital property.

The Rehabilitation Act of 1973

Two sections of the 1973 Rehabilitation Act address the need to provide access to people with disabilities: 

  1. First, to programs that receive federal funding (Section 504)
  2. Second, to electronic and information technology (Section 508) 

This act was amended in 1998 but those guidelines remained intact.

Equal Opportunity

In 1995, the National Council on Disability best explained how the concept of “equal opportunity” would be supported in practice by the ADA:

  • Elimination of discrimination against people with disabilities

  • Enforceable and enforced standards that address discrimination

  • Upholding the Federal government as playing a key role in enforcement

  • Invoking congressional authority to regulate commerce 

That statement was issued in a report sent to Congress, which reflected on the progress that had been made toward compliance in the five years since the act was signed. Early moves toward compliance took the form of government and private sector cooperation, new disability policies, and programs and targeted resources that encourage voluntary compliance.

Undue Burden

A last definition that will inform our investigation of ADA website compliance is the meaning of “undue burden.” This clause is something of an “out” for agencies or businesses who find that coming into compliance with either Title II or Title III of the ADA financially difficult. Numerous factors would have to be considered, and proven, to opt out under this clause. If providing an auxiliary service is proven to be an undue burden, effective alternatives must be pursued. 

There is ample evidence that a significant number of people in the U.S., and around the world, require a modified, accessible internet experience:

The Centers for Disease Control and Prevention (CDC) has identified that 61 million Americans, or 26%, live with some type of disability. It is for these people that the ADA was signed, and supporting measures put in place to ensure compliance.

Web Content Accessibility Guidelines

The World Wide Web Consortium (W3C) develops standards for the web, including CSS and HTML. This body has a Web Accessibility Initiative (WAI). This initiative publishes guidelines and recommendations site publishers should use to make their content more accessible to people with disabilities.

International Web Content Accessibility Guidelines (WACG) were first established in May of 1999. They provide recommendations for making websites accessible to a wide range of people, including those with blindness and low vision, learning disabilities and cognitive limitations, deafness and hearing loss, photosensitivity, speech disabilities, limited movement, and combinations of these disabilities.

The first version of WCAG included the following:

  • Accessible design themes, including graceful transformation as well as easy-to-understand and navigate content.

  • The provision of equivalent alternatives to visual and auditory content.

  • Not solely relying on color.

  • Using markup and style sheets.

  • Clarifying the use of natural language.

  • Creating tables that gracefully transform.

  • Ensure that new technological features gracefully transform.

  • User control of time-sensitive changes in content.

  • Direct access to embedded UIs (user interfaces).

  • Device-independent design.

  • Interim solutions.

  • The provision of context information.

  • The provision of orientation information.

  • The provision of clear navigation mechanisms.

  • Clear and simple documents.

WCAG standards are, by nature, not technology-specific. The statements are written to be testable. There are also educational and technical materials to aid implementation.

Since the first versions of WCAG, the foundational components have remained the same, but additional standards have been developed to cover new technology or clarify standards. Here are some of the milestones and history of web content accessibility guidelines.

 


 

WCAG 2.0

In 2008, WCAG 2.0 was released. It included previous guidelines but specifically addressed four areas:

  1. Perceivable
    1. Text alternatives for non-text content, including the ability to change non-text content into large print, speech, symbols, braille, or simpler language.
    2. Alternatives to time-based media.
    3. Simpler layouts that don’t compromise structure or information.
    4. Foreground and background separation to make it easier for users to hear and see content.
  2. Operable
    1. All functions are available to use with a keyboard.
    2. All users have enough time to read through and then use content.
    3. Content is not designed in a way that could cause seizures.
    4. Users are given more help in navigating, finding, and orienting themselves on a site.
  3. Understandable
    1. Text is easy to read and understand.
    2. Web pages appear in predictable ways and operate in predictable ways.
    3. Users can avoid making mistakes or correct their mistakes.
  4. Robust
    1. Compatibility with user agents and assistive technologies is maximized.

 


 

WCAG 2.1

In 2018, WCAG 2.1 was released. It also kept all previous guidelines but added more detail on the four areas specifically addressed in WCAG 2.0. Here were some of the updated areas of guidance:

  1. Perceivable updates
    1. Guidelines for prerecorded and live time-based media, including captions, extended audio descriptions, audio-only options and more.
    2. Adaptable updates, including information and relationships, sensory characteristics, orientation, and meaningful sequences.
    3. Distinguishable uses of color, contrasts (minimum and enhanced), images of text, content on hover, content on focus, text spacing, reflow, and more.
  2. Operable updates
    1. Keyboard accessibility, including no keyboard trap and keyboard no exceptions.
    2. Enough time: adjustable timing, no timing, re-authenticating, timeouts, interruptions, and more.
    3. Physical reactions to cover animation from interactions.
    4. Navigable standards, including page titles, focus order, bypass blocks, multiple ways, focus visible, location, section headings, and more.
    5. Input modalities, including pointer cancellation, pointer gestures, motion actuation, target size, and more.
  3. Understandable updates
    1. Readable: unusual words, reading level, pronunciation, and more.
    2. Predictability on focus, on input, consistency in navigation and identification, and change on request.
    3. Input assistance for errors, specifically error prevention, error suggestion, and error identification, as well as labeling and instructions.
  4. Robust updates
    1. Compatibility with parsing, status messages, and name/role/value.

Many of the changes delineated in the WCAG 2.1 update speak to the increase in mobile device use in the ten years between the two sets of guidelines. As websites are increasingly complex, and used in varied ways, the standards have to address access for people with disabilities logging in from any device.

On-Demand Webinar: Learn How to Create an Accessible eCommerce Website

WCAG 2.2 Working Draft

The WCAG 2.2 working draft has new proposed success criteria. The notable changes still address the four main categories of requirements used previously, with some additions:

  • Focus appearance, including items not fully obscured, adjacent contrast areas, minimum contrasting areas, and other issues related to user interface.
  • Page break navigation, with locators to navigate between numbered pages.
  • Dragging movements, which should be achievable using a single pointer, and other issues of input modality.
  • Target size minimums, namely the values between spatially based items, such as sliders, color pickers, or other presentation items.
  • Consistent help or access to help mechanisms relate to predictability standards. In other words, users must be able to access help or get to help via direct links.
  • Visibility of controls, another issue of UI, should be consistent without having to search.
  • Accessible authentication addresses authentication tests that rely on cognitive function. An example is using a password manager that allows the user to input or copy and paste a known factor, like an email address for a password link.
  • Redundant entry, or storing user data that will be needed in later steps. This is especially important to make a site usable for someone with cognitive disabilities.

 


 

WCAG 3.0: Future Plans

In January 2021, the first public working draft of WCAG 3.0 was released on the W3C website. Its stated goal is to advance WCAG 2.0 requirements, specifically in five areas:

  1. Application across technologies
  2. Clarity for conformance
  3. Ease of use
  4. Meeting the needs of a diverse audience
  5. Identifying who benefits from these guidelines

WCAG 3.0 will include WCAG 2.2 content but migrate it to a new structure and model for conformance. Conformance is, indeed, mission-critical for organizations that operate online. There is too much at stake to not fully understand and comply with ADA regulations and WCAG requirements.

Web Accessibility and Lawsuits

Digital accessibility lawsuits are common. In fact, UsableNet predicts that more than 4,000 lawsuits related to digital violations of the ADA or California’s Unruh Civil Rights Act will be brought to court in 2021 alone. Here are some of the most prominent cases that have gone to court over website accessibility:

NAD vs. Netflix

Filed in June 2011 by the National Association of the Deaf, this lawsuit filed a complaint with Netflix violating the ADA by not providing equal access to streaming content in its “watch instantly” feature. The class-action suit was settled in 2012, with Netflix paying legal fees and agreeing to confirm captions on all new content within 30 days of release by 2014. That timeline for captioning would shorten to 14 days by the year 2015, and 7 days by the year 2016.

Thurston vs. OMNI Hotels


A plaintiff, Cheryl Thurston, brought a class action suit against OMNI Hotels Management Corporation, claiming that their websites were not accessible to people with disabilities. This particular case was dismissed after insufficient evidence was presented that Thurston attempted to use the site to make hotel reservations. However, it typifies the risk that even large corporations face if they lack regulatory compliance.

Cullen vs. Netflix


Filed in April 2014, Donald Cullen issued a California Disabled Persons Act Claim predicated on the ADA ruling about violating his individual rights as a person with disabilities. The public accommodation clause is one that has been iterated many times over in these types of cases, but in this context, the court ruled that because Netflix’s services are not in fact connected to a physical space, the ADA ruling did not apply. Further, the district court held that Cullen failed to allege an injury that resulted from Netflix’s practices, and the case was dismissed.

Domino’s Pizza Lawsuit for Site Accessibility

On June 23, 2021, a federal court found that Domino’s had violated the ADA (Title III) by not having a website that could be used by a blind individual who was trying to order pizza. The case took five years and activated not only scrutiny of Domino’s website, but also their mobile app. Interestingly, the court notes include the fact that no expert had deemed the site to be accessible, underscoring the need for businesses to use skilled accessibility analysts to ensure website compliance.

Business owners or operators who wish to mitigate risk would learn well from these court cases and take pains to enlist trusted partners, like A360 and Smart Solutions, and become familiar with conformance measures.

What is Conformance and Why Does it Matter?

“Accessibility in the digital age is the inclusive practice of removing barriers that prevent interaction with websites, apps, and enterprise systems for people with disabilities.” -Accessible360


Conforming to website accessibility standards simply means that your website is as usable as possible for people with these four types of disabilities:

  1. Visual disabilities
  2. Physical disabilities
  3. Cognitive disabilities
  4. Auditory disabilities

The U.S. Census Bureau reports the percentage of U.S. adults with these functional disability types:

  • 21.5% of workers in the U.S. have visual disabilities
  • 34.4% of workers in the U.S. have ambulatory disabilities
  • 29.2% of workers in the U.S. have cognitive disabilities
  • 31.1% of workers in the U.S. have hearing disabilities

The statistics for workers are specifically noted here, as this indicates a portion of the population with income. For eCommerce business owners, this may be interpreted as buying power. These are consumers who simply require better access for now and for the future. Accessible design is key to meeting their needs.

For people with each of these types of disabilities, there are common tools used to navigate the internet, such as:

  • Screen readers that provide Braille or speech output
  • Voice recognition software
  • Optical character recognition systems
  • Adapted keyboards and typing shortcuts
  • Magnification software
  • Touch screens
  • Head point technology or mouth sticks
  • Electronic pointing devices

There are both physical and software-based assistive technologies. These third-party tools, as well as the general design and development of a website, work together to achieve an optimal user experience.

On-Demand Webinar: Learn How to Create an Accessible eCommerce Website

WCAG Conformance Checklist

WCAG conformance is best assessed by following the exact specifications set forth in the official documents. Here is a checklist of items that must be considered.

Perceivable Guidelines

  • Text alternatives (simpler language, large print, braille, symbols, speech)
    • Non-text has text alternative
  • Time-based media
    • Audio-only and video-only, clearly labeled
    • Captions, clearly labeled
    • Audio descriptions or media alternatives
    • Captions for live audio content (in synchronized media)
    • Audio descriptions (in synchronized media)
    • Sign language (in synchronized media)
    • Extended audio descriptions (in synchronized media)
    • Media alternative for time-based media
    • Audio-only content for live, time-based media
  • Adaptable content (presented in simpler or different ways without losing information)
    • Information, relationships and structure available in text
    • Meaningful sequence, presented in a correct reading sequence, especially when this presentation impacts its meaning
    • Sensory characteristics: users don’t solely rely on shape, size, color, visual location, sound, or orientation to understand or operate content
    • Orientation wherein content doesn’t restrict view or operation, unless essential
    • Input purpose identified
    • Identity purpose: markup languages in UI components, regions or icons
  • Distinguishable content (foreground vs. background)
    • Color use, not used to indicate action, prompt response or distinguish a visual element
    • Audio control won’t play for longer than three seconds, and there is a separate mechanism to control audio volume apart from system volume
    • Minimum contrast ratio of 4.5:1
    • Text resizing (without assistive technology) up to 200% without losing functionality or content
    • Images of text are available
    • Enhanced contrast ratio is 7:1 (with exceptions)
    • Low or no background audio
    • Mechanisms are available to visually present blocks of text
    • Images of text, such as logotypes or where used purely for decorative purposes, are available
    • Text spacing is implemented using markup languages
    • Non-text contrast is visually presented with a contrast ratio of 3:1
    • Reflow content without required scrolling is available without losing functionality or information
    • Content on hover focus available
WCAG Conformance Checklist

Operable Guidelines

  • Keyboard accessibility (all functions are available from a keyboard)
    • No keyboard traps
    • No specific keystroke timings are set
    • Character key shortcuts that use a letter, symbol characters, punctuation, and numbers follow specific protocol (outlined in the official documentation)
  • Enough time (users have enough time to read through and use the content)
    • Adjustable timing is available
    • Pause, stop, and hide standards are in place for moving, scrolling, auto-updating, or blinking
    • Timing is not essential to using the site, except for real-time events of non-interactive synchronized media
    • Interruptions can be suppressed or postponed by the user
    • Re-authentication occurs without loss of data, after session expiration
    • Users get a warning about timeouts due to inactivity
  • Seizures and physical reactions
    • The threshold of three flashes or less is the threshold for all site content
    • Nothing on the site flashes more than three times a second
    • Triggered, interaction-based motion animations can be disabled
  • Navigable (users have multiple ways to navigate the site and find content)
    • Users can bypass content blocks that repeat on multiple pages
    • Web pages can be navigated sequentially without it impacting their meaning or operation
    • Link purposes are described by link text
    • Users have more than one way to find a web page
    • Headings and labels are descriptive
    • Keyboard focus indicators are visible in keyword operable UIs
    • Users can find information about their location on a web page or set of web pages
    • Section headings organize content
  • Input modalities (users can operate functions of the site through inputs other than a keyboard)
    • A single pointer can be used to operate multipoint or path-based gestures
    • Pointer cancellation policies can be found in the original guidelines
    • UI components with labels have text that describes the visual element
    • Device motion or user motion can be activated using other UI components or disabled
    • Target size for pointer inputs is 44x44 CSS pixels, with exceptions
    • Concurrent input mechanisms can work unless they compromise security

Understandable Guidelines

  • Readable (content is readable and easy to understand)
    • Default human language of every web page is determined programmatically
    • Human language of each part of a page is determined programmatically
    • Unusual words, including jargon and idioms, have an accompanying mechanism to identify specific definitions
    • A mechanism exists to define abbreviations
    • The text is written for a lower secondary education level, or, a version accessible to someone at that level is available
    • A mechanism exists to identify the pronunciation of ambiguous words
  • Predictable (web pages appear and work in predictable ways)
    • Components don’t change based on whether or not they are in focus
    • Changes in UI settings don’t change content, unless the user is notified it will
    • Navigation is consistent unless the user changes it
    • Identification is consistent
    • Context changes are only initiated by user request and can be turned off
  • Input assistance (users have help to avoid mistakes or correct mistakes)
    • Errors are detected and described
    • Labeling and instructions are available for content that requires user input
    • Input errors are detected and corrections are offered
    • Errors related to legal, financial, or data prompt user notification
    • Help is available in context-sensitive cases
    • If user submission is required, error prevention measures are in place, further detailed in official documents

Robust Guidelines

  • Compatible (compatibility with assistive technologies is maximized)
    • Markup languages and elements are nested, not duplicated, and have unique IDs
    • UI components are determined programmatically
    • Status messages can be issued using assistive technologies (without requiring focus)

Because of the variety of sites, development processes, design styles, and other factors, it is important to not rely on a list like this as the only check and balance. You must thoroughly assess your site, or hire an accessibility agency to do so, to ensure that you achieve and maintain website compliance.

ADA Web Accessibility Guidelines

While the WCAG guidelines serve globally to dictate site structure and user interface, developers and designers can benefit from two sets of criteria:

  1. Authoring Tool Accessibility Guidelines (ATAG)
  2. User Agent Accessibility Guidelines (UAAG)

These criteria can be immensely helpful, as accessibility measures begin at a foundational level, during coding and site architecture.

Authoring Tool Accessibility Guidelines (ATAG)

Authoring tools are used by web developers and designers to produce content for the internet, including web pages and web applications. The goal of ATAG standards is twofold:

  1. To make authoring tools more accessible to people with disabilities, enabling them to produce web content.
  2. To help authors create web content that is more accessible, supporting them to produce content that conforms to WCAG.

ATAG provides principles, guidelines, and success criteria (written as testable statements) for three levels of content (A, AA, and AAA). An ATAG Report Tool is available to help evaluators test the accessibility of available tools and generate reports on conformance.

User Agent Accessibility Guidelines (UAAG)

User Agent Accessibility Guidelines (UAAG) provide standards for people who work with applications that render web content. This set of guidelines exists in acknowledgment that some accessibility needs are met in a browser. These standards can include user interface accessibility, preferences, text customization, and other web content. UAAG 2.0 is the latest set of guidelines to address this and works in tandem with ATAG and WCAG.

Technical Specifications for ADA Compliance

The technical specs for ADA compliance address the four types of disabilities listed above. It is readily apparent that even minor strategic changes can unlock access for someone with limited vision, hearing, mobility, or cognition.

Accessible Rich Internet Applications (WAI-ARIA)

The WAI Accessible Rich Internet Applications (WAI-ARIA) standards address how assistive technologies are able to communicate with a site and convey accurate, timely information to people with disabilities. This is a vital, technological component for WCAG compliance. Semantic information on behaviors, structures, and widgets help authors create interoperable applications and web pages. In document-level markup, authors associate elements to WAI-ARIA roles, assigning them the states and properties needed to work with assistive tools.

Audio and Video

The increased prevalence of audio and video features on websites necessitates a careful look at these standards. The WAI suggests that site owners plan for audio and video media with accessibility in mind. Knowing in advance how to script, film, and deliver content in the most accessible way possible alleviates the burden of reworking or adding burdensome, text-heavy explanations, and alternatives.

Here are some audio production tips:

  • Use low background sounds or audio tracks
  • Have the actors or on-screen talent speak slowly and clearly
  • Use clear, straightforward language in scripts
  • Create the highest quality audio possible

Here are some video production tips:

  • Pay attention to flashes, which could violate seizure prevention standards
  • Block the actors or on-screen talent for maximum on-screen visibility
  • Plan for overlay text that is highly readable and accurate
  • Add sign language or audio descriptions of the visual content

These lists are non-exhaustive but a good start to thinking about creating content that as many people as possible can enjoy.

Evaluation

Testing or evaluating website accessibility should be part of the quality assurance cycle of any development project. Most businesses don’t have internal accessibility tools, but there are numerous online resources to aid your process. For the most part, these only quantify a very limited number of standards. Some are inaccurate. If your digital properties are large and transactional, or your team simply wishes to avoid a misstep, hiring an accessibility agency is the best way to meaningfully evaluate your work.

Download the WCAG Conformance Checklist PDF Here

Personalization

Personalization is a broad category of WCAG. It speaks to the reality that people with disabilities have varied and unique challenges that require individualized accommodation. Tailoring the experience of each user requires unique customization, but it is possible. Personalization documents are available through WCAG, which content developers and user agents can leverage to develop personalized tools, systems, and more.

Pronunciation

The success criterion of pronunciation aims at helping people who are blind, have low vision, or have reading disabilities. Pronunciation sometimes impacts the meaning of words, and this standard ensures understanding. Some ADA website compliance methods include providing a reading of names or words that are commonly mispronounced, showing the reading of the words with the ruby code element, include pronunciation information in the glossy or a web page, and offering sound files of the correct pronunciation.

Accessible Platform Architectures

Technical materials and harmonious website accessibility strategies address common ADA website requirements, such as personalization technology, pronunciation technology, frameworks for different technologies, and even the inaccessibility issues of CAPTCHA. The APA Working Group performs ongoing reviews and specification review lists. This task group recognizes issues labeled “a11y-tracker” in GitHub, and is open to contributions from outside parties.

How to Create an ADA Compliant Website

ADA compliant websites start as early as the first line of code or the first template adjustment. There are numerous foundational and architectural components that set developers up for success in terms of compliance. Activated early on, the process of building or maintaining a compliant site doesn’t have to be overwhelming.

Web Accessibility Evaluation Tools

As mentioned in evaluation, there are some very simple web accessibility evaluation tools. Often, these will assess a site for a single component of accessibility, such as checking color contrast, HTML markup code accessibility issues, JavaScript violation patterns, etc. It can be labor-intensive to assess all of these elements one at a time. 

While some tools do claim to assess a site comprehensively, the reality is that there is no substitute for manual checks. The good news is that a thorough assessment can be performed once, after which compliance measures can be implemented and the site goes into maintenance mode. Maintaining ADA compliance is far easier once the site has been completely analyzed and updated.

Does My Site Have to be ADA Compliant?

The people who most commonly think about ADA compliance for their website are probably in highly litigated verticals, such as retail and eCommerce. You may wonder: does my website have to be compliant? While Title II of the ADA clearly speaks to compliance issues for state and local governments, Title III is broader. However, there is no business that is categorically exempt from these rules. In fact, ADA compliance violations could be levied against anyone, from a personal blogger to a large eCommerce brand. Accessibility rules extend to all, as individuals with disabilities have a civil right to engage with open-source content on the internet.

That is why Smart Solutions and Accessible 360 have partnered. Smart Solutions provides expertly crafted, high-performing eCommerce websites, and Accessible 360 is a leading provider of site accessibility assessments, improvements, and education.

The Roadmap to Compliance

Smart Solutions recognizes that ADA compliance is vital not only for website function, but for the success of businesses worldwide. Plaintiff law firms are active and growth-minded businesses cannot afford to wait: compliance must be achieved, and it must be achieved now. Commonly used scanning tools leave you vulnerable, and only address about 20-25% of WCAG success criteria. Smart Solutions provides the right tactics and, in partnership with A360, can ensure eCommerce websites fall in line:

  • A360 provides input on new website designs or audits of existing websites
  • The Smart Solutions development team implements essential changes
  • The team at A360 provides support during website build or remediation
  • Smart Solutions can be the team on deck to ensure the website remains in compliance with current and future WCAG standards

Our team of experts offer a thorough analysis and insight into the actionable steps you can take to meet compliance standards. A population of readers, listeners, and buyers awaits: a website that meets ADA requirements issues an open invitation to all.

eCommerce-Quick-Wins-300x180

Are You Ready to Make Your Website ADA Compliant?

LEARN HOW