26 Steps for ADA Website Compliance: Meaning, Requirements and Checklist

The Americans with Disabilities Act (ADA), enacted in 1990 by President George H.W. Bush, is a landmark civil rights law that prohibits discrimination against people with disabilities in all areas of public life, including jobs, schools, transportation, and public and private spaces.

The ADA primarily benefits people with various disabilities, including but not limited to visual impairments, auditory impairments, mobility impairments, and cognitive impairments. For instance, blind people rely on screen readers to navigate websites, while those with mobility impairments such as spina bifida may use alternative input devices.

The ADA consists of five titles, each addressing different aspects of disability rights and accessibility:

• Title I: Employment. Title I prohibits discrimination against qualified people with disabilities in all aspects of employment, including hiring, job assignments, promotions, and termination. 
• Title II: State and Local Government Services. Title II prevents discrimination by state and local governments and their agencies, ensuring that people with disabilities have equal access to public services, programs, and activities. This includes public transportation, public schools, government offices, and other government-funded services.
• Title III: Public Accommodations and Commercial Facilities. Title III requires businesses and other entities open to the public to ensure their facilities are accessible to the disabled community. 
• Title IV: Telecommunications. Title IV requires telephone and internet companies to provide relay services for individuals with hearing and speech disabilities, ensuring they have equal access to telecommunications services. 
• Title V: Miscellaneous Provisions. Title V contains various provisions related to the ADA, including the relationship between the ADA and other laws, enforcement procedures, and the prohibition of retaliation against individuals exercising their rights under the ADA.

ADA compliance isn’t just about physical spaces; it extends to online spaces, too. This means that websites, mobile applications, and other online platforms must also be accessible to people with disabilities.

In this guide, we will provide you with a comprehensive checklist for ADA website compliance, covering all the essential requirements and considerations. A downloadable PDF will be provided, offering a handy reference guide for website owners and developers striving for accessibility and inclusivity.

Here’s a Brief Video Summary of ADA Compliance in 2024

What Is ADA Compliance for Websites?

ADA website compliance means making websites and digital content accessible to people with disabilities in accordance with the Americans with Disabilities Act (ADA) and related guidelines, such as the Web Content Accessibility Guidelines (WCAG).

WCAG was created by the World Wide Web Consortium and is the benchmark for website accessibility requirements in various global disability acts.

According to WCAG, websites need to adhere to the following principles:

• Perceivable: Information and user interface components need to be presented in ways that users can perceive, regardless of their sensory abilities. This may include providing alternative text for images, captions for videos, and clear content organization.
• Operable: Making web content and navigation functions operable through various input methods, such as keyboard navigation, voice commands, or assistive technologies like screen readers, ensures that users can interact with and navigate a website effectively.
• Understandable: Understandable means ensuring that content and functionality are understandable to all users, including those with cognitive or learning disabilities. This involves using clear language, providing instructions and feedback, and avoiding complex or ambiguous design elements.
• Robust: Websites should be compatible with a wide range of assistive technologies and devices. This includes using semantic HTML, providing proper document structure, and testing for compatibility with screen readers and other assistive tools.

Complying with the latest web accessibility requirements benefits users with a variety of disabilities, including those with low vision or blindness, people who are deaf, users with mobility impairments, as well as people with neurological or cognitive disabilities such as ADHD and epilepsy.

Businesses and entities across various sectors need to comply with web accessibility standards to ensure that their digital content is accessible to individuals with disabilities. This includes:

• Government institutions.
• Education institutions.
• Non-profit organizations.
• Commercial businesses.
• eCommerce websites.
• Healthcare providers.
• Financial institutions.

2. Provide Alt Attributes for All Images

Businesses should add alt tags to their images to comply with ADA web accessibility because alt tags provide alternative text descriptions that are read aloud by screen readers to users who are blind or visually impaired. 

By including descriptive alt text, businesses ensure that people who cannot see images can still understand the content and context of the images, enhancing their overall browsing experience and ensuring equal access to information.

Alt tags mainly benefit people with low vision or blindness who rely on screen readers to access digital content. However, users with cognitive disabilities can also benefit from alt tags that provide additional context or clarification for images. The tags make the content more understandable and reduce cognitive load.

Without alt tags, disabled people who rely on assistive technologies may encounter difficulties or barriers when accessing websites with images. Screen readers will not be able to provide meaningful descriptions of images, leaving users with visual impairments unable to understand the content and context of the images. As a result, these users may miss out on important information or features of a website, leading to a less inclusive and accessible browsing experience.

Testing for Alt Tags

You can check whether your website has alt tags by inspecting the HTML code for images and verifying the presence of alt attributes. Alternatively, you can use web accessibility testing tools or browser extensions that analyze web pages for accessibility issues, including missing alt attributes on images.

Remediating Your Website

Adding alt tags to the images on your site needs to happen at a code level. An image with alternative text will look like this in your HTML code:

<img src=”example.jpg” alt=”Description of the image”>

In this example, the img element includes an alt attribute with a descriptive text (“Description of the image”). This alt text will be read aloud by screen readers, providing users with visual impairments with a textual description of the image content. 

It is essential to provide accurate and meaningful alt text that conveys the purpose and content of the image effectively. Alt tags are not required for decorative images, but a blank alt tag should still be included in your HTML code. 

4. Include Descriptive Page Titles

Businesses should have descriptive website titles for ADA web accessibility compliance because they enhance navigation and usability for all users, including those with disabilities. 

A descriptive page title provides users with meaningful information about the content on a webpage, making it easier to understand the purpose and context of the page. This improves accessibility by enabling users to navigate through websites more efficiently, especially when using assistive technologies such as screen readers.

Descriptive page titles benefit people with various disabilities, including:

• Visual impairments: Users who rely on screen readers to access web content benefit from descriptive page titles, as they provide auditory cues about the content and context of the page.
• Cognitive impairments: Users with cognitive disabilities may find it easier to navigate websites with descriptive page titles, as clear and informative titles help them understand the structure and organization of the site.

Without descriptive page titles, it can be challenging for disabled users to understand the purpose and context of each webpage on your site, leading to confusion, frustration, and inefficiency in navigating the site.

Testing for Descriptive Page Titles

You can evaluate whether a website has descriptive page titles by examining the title tags across your site. Are they clear and relevant to the content on that page? Would a user immediately know what type of content they can expect?

Remediating Your Website

Let’s look at a few examples of descriptive titles:

• “About Us – Company Name”: The title clearly identifies the purpose of the page (providing information about the company) and includes the company name for branding and recognition.
• “Contact Us – Customer Support”: The page title indicates that a user can use the details on this page to reach out to the company to receive customer support.
• “Product Catalog – Category Name”: This title indicates the type of content (product catalog) and specifies the category or topic (e.g., electronics, clothing) for easy navigation.

6. Associate Form Instructions with Input

Businesses should associate form instructions with inputs for web accessibility because clear and concise instructions help users understand how to complete forms correctly, reducing errors and improving usability. 

Associating form instructions with inputs provides context and guidance, making it easier for users to navigate and interact with web forms, especially for individuals who rely on assistive technologies such as screen readers.

Form instructions benefit people with the following types of disabilities:

• Cognitive impairments: Users with cognitive disabilities may find it easier to understand and follow instructions when completing forms as they reduce confusion.
• Visual impairments: Users who rely on screen readers benefit from clear and descriptive instructions that provide auditory cues about the form structure and requirements.
• Learning disabilities: Users with learning disabilities may require additional guidance and support when completing forms, and clear instructions can help them understand the form expectations and process.

A lack of instructions makes it challenging for users to understand the purpose and expectations of each form field, causing a frustrating experience. It can also prevent users from submitting their details and accessing important information or services on your site.

Testing for Form Instructions

Similar to input labels, developers can visually detect whether instructions are available on their forms. However, this is only the first step – HTML code should also be checked.

Developers can use HTML label elements or aria-label attributes to associate instructions with form inputs, ensuring they are accessible to assistive technologies. Using clear and concise language, avoiding jargon, and providing examples or additional context when necessary are also important. 

It’s also essential to test forms with a diverse group of users, including those with disabilities, to ensure that the instructions are understandable and effective.

Remediating Your Website

To add form instructions in HTML, you can use various methods, including placing descriptive text directly adjacent to form inputs or using the <label> element. This is what your HTML code would look like: 

<label for=”name”>Name:</label>

<input type=”text” id=”name” name=”name” aria-describedby=”name-instructions”>

<span id=”name-instructions”>Please enter your full name.</span>

In this example, the descriptive text “Please enter your full name.” is placed adjacent to the form input for the name field. The aria-describedby attribute is used to associate the descriptive text with the input field for accessibility.

8. Ensure Tables Have Proper Header and Column Attributes

Proper header and column attributes in tables are essential for web accessibility compliance because they provide meaningful structure and context to assistive technologies, such as screen readers. 

Header and column attributes primarily benefit people with visual impairments, including those who are blind or have low vision. These attributes allow screen readers to convey the structure and relationships within tables, enabling users to understand the content being presented. 

Additionally, people with cognitive or learning disabilities may also benefit from clear and organized table structures provided by proper header and column attributes.

Without proper header and column attributes, individuals with visual impairments may struggle to interpret the information presented in tables on a website. Screen readers rely on these attributes to convey the table structure, headers, and data relationships. 

Without them, users may encounter challenges in understanding the content, navigating through rows and columns, and accessing relevant information within tables, leading to frustration and a poor user experience.

Testing for Table Attributes

You can check whether your website has tables with the correct header and column attributes by:

• Using accessibility tools or browser extensions that analyze the accessibility of web content and identify any tables lacking the appropriate attributes.
• Manually inspecting the HTML code of tables on your website to ensure the presence of <th> (table header) elements for column and row headers, and using the appropriate scope and id attributes to associate headers with data cells.

Remediating Your Website

Remediating the tables on your website will require a few changes at a code level. Here is what the code of a table would look like before and after remediation:

<!– Before remediation: –>

<table>

    <tr>

        <td>Month</td>

        <td>Sales</td>

    </tr>

    <tr>

        <td>January</td>

        <td>$1000</td>

    </tr>

    <!– More rows –>

</table>

 

<!– After remediation: –>

<table>

    <tr>

        <th scope=”col”>Month</th>

        <th scope=”col”>Sales</th>

    </tr>

    <tr>

        <th scope=”row”>January</th>

        <td>$1000</td>

    </tr>

    <!– More rows –>

</table>

In the remediated example, the <th> elements with the appropriate scope attributes indicate column headers, improving accessibility for users who rely on assistive technologies. Additionally, the use of scope=”row” attribute associates the header with the data in the first column of each row, further enhancing accessibility.

10. Use Unique and Contextual Links

Businesses should have unique and contextual links for web accessibility to ensure that all users, including those with disabilities, can understand the purpose and destination of each link. 

Unique and contextual links improve usability and navigation by providing clear and descriptive link text, helping users anticipate the content they will encounter when clicking the link. 

An increased reliance on trial-and-error methods to navigate through a website can be time-consuming and frustrating. It also limits a user’s ability to understand the relevance of links based on their surrounding content, making efficient navigation incredibly difficult.

Unique and contextual links primarily benefit people with cognitive disabilities, visual impairments, and users who rely on assistive technologies such as screen readers. Clear and descriptive link text allows these users to understand the context and relevance of each link, ensuring efficient navigation and interaction with your website content.

Testing for Unique and Contextual Links

You can check whether your website has unique and contextual links by:

• Inspecting the HTML code: Review the anchor (<a>) elements in your HTML code to ensure that each link has descriptive and relevant link text that accurately conveys the destination or purpose of the link.
• Using accessibility tools: Utilize automated accessibility tools or browser extensions that analyze the link text and provide feedback on its clarity, relevance, and uniqueness.

Remediating Your Website

Go through your website to test whether your links are clear and clearly describe the destination. Here are some examples of contextual link text:

• “Read more about our company’s sustainability initiatives”
• “Download the latest product catalog (PDF)”
• “Contact us to schedule a consultation”
• “Explore our FAQ section for answers to common questions”
• “Visit our blog for industry insights and updates”

13. Nest Heading Elements Logically

Nesting heading elements logically is an important part of web accessibility because it helps convey the structure and hierarchy of content on a webpage. 

Properly nested headings provide a clear outline of the information presented on a page, making it easier for all users, including those with disabilities, to navigate and understand the content. Logical nesting enhances the readability, organization, and usability of web pages, contributing to a better user experience for everyone.

Nested heading elements benefit people with various disabilities, including visual impairments, cognitive disabilities, and users of assistive technologies such as screen readers. Clear and logical heading structure allows these users to better understand the relationships between different sections of content, navigate through a webpage more efficiently, and comprehend the overall structure and flow of information.

Testing for Nested Heading Elements

Turn to your HTML code to check whether your heading elements are nested in a logical order.

Your content should make use of H1, H2, and H3 headers in the correct order, with each heading level representing the most important headings in the relevant order.

Remediating Your Website

Here is an HTML example of how header tags should be used in the correct order:

<h1>Main Heading</h1>

<h2>Subheading 1</h2>

<h3>Sub-subheading 1.1</h3>

<h3>Sub-subheading 1.2</h3>

<h2>Subheading 2</h2>

<h3>Sub-subheading 2.1</h3>

In this example, the heading elements are nested in a logical hierarchy, with H1 representing the main heading and subsequent headings (H2, H3) representing subheadings and sub-subheadings. This structure helps convey the content’s organization and relationships in a clear and understandable way.

15. Set the Language for the Page

Businesses should set the language for a web page for web accessibility purposes because it helps assistive technologies and language-processing algorithms correctly interpret and present the content to users. 

Setting the language of your site, or individual web pages, ensures that screen readers, translation tools, and other assistive technologies can accurately pronounce or translate the text, enhancing the accessibility and usability of your website for users who may rely on these types of tools.

Users who rely on screen readers benefit from having the language of the page properly identified, as it allows a screen reader to use the correct pronunciation rules and language-specific features when reading the content out loud.

Even users with cognitive impairments will find it easier to understand and process content when it is presented in their preferred or native language, improving comprehension.

Testing for Language Settings

You can check whether your website has set a language for a page by inspecting the HTML code of your site. Look for the lang attribute within the <html> element, which specifies the language of the document. Additionally, some web browsers and accessibility tools may provide information about the language settings of a webpage.

Remediating Your Website

To set the language for a web page, you can follow these steps:

• Identify the primary language of your content.
• Add the lang attribute to the opening <html> tag of the webpage: 

<!DOCTYPE html>

<html lang=”en”>

<head>

    <meta charset=”UTF-8″>

    <title>Example Page</title>

</head>

<body>

    <!– Content of the webpage –>

</body>

</html>

• Set the value of the lang attribute to the appropriate language code (e.g., “en” for English, “es” for Spanish).
• You can also add the xml:lang attribute for XHTML documents to specify the language, but this is optional.
• Ensure that the language attribute accurately reflects the primary language used throughout the content of any given webpage.

17. Name Frames Appropriately

Businesses should name frames appropriately to comply with ADA web accessibility requirements to provide context and navigation cues for users, especially those who rely on assistive technologies. 

Frames that are named correctly help users understand the purpose and content of each frame, improving navigation and the overall usability of the site.

Along with aiding users who rely on assistive technologies such as screen readers, properly named frames also benefit people with cognitive disabilities, making it easier for them to process information.

Undefined or ambiguous frame names make it challenging for users to understand the purpose and context of each frame, leading to confusion, frustration, and decreased accessibility for users with disabilities.

Testing for Frame Names

You can check whether your website has properly named frames by inspecting the HTML code of every webpage. 

Look for the <frame> or <iframe> elements and verify that each frame has a descriptive title attribute or a suitable name attribute. Some accessibility tools may provide information about frame names and their accessibility too.

Remediating Your Website

Let’s look at a code example of frames that have been correctly named:

<html>

<head>

    <title>Example Page with Frames</title>

</head>

<frameset cols=”25%,75%”>

    <frame src=”menu.html” title=”Main Menu”>

    <frame src=”content.html” title=”Main Content”>

</frameset>

</html>

In this example, two frames are defined within a frameset, each with a descriptive title attribute (title=”Main Menu” and title=”Main Content”). These titles provide meaningful names for the frames, helping users understand the purpose and content of each frame when navigating the website.

18. Ensure Compliance with Flashing Element Guidelines

WCAG outlines flashing element guidelines to ensure that businesses can prevent seizure triggers and other adverse reactions in users with photosensitive epilepsy or other sensory sensitivities. 

By following these guidelines, businesses demonstrate their commitment to creating a safe and inclusive online environment for all users, regardless of their disabilities.

The flashing element guidelines primarily benefit users with sensory sensitivities that are triggered by flashing or flickering content. However, these guidelines also indirectly benefit users with various other disabilities, including those with cognitive impairments or attention-related disorders, by reducing distractions and potential barriers to accessing web content.

Testing for Flashing Element Guidelines

You can check whether your website complies with the necessary flashing element guidelines in WCAG by inspecting your webpages for any flashing or rapidly changing content. 

Remediating Your Website

In the below example, a flashing effect is created using CSS animations. However, to comply with WCAG flashing element guidelines, developers should ensure that any flashing or rapidly changing content does not exceed the recommended flash and red flash thresholds specified in the guidelines.

<style>

.flashing-element {

    animation: pulse 1s infinite alternate;

}

@keyframes pulse {

    0% { opacity: 1; }

    100% { opacity: 0.5; }

}

</style>

<div class=”flashing-element”>

    <!– Content of the flashing element –>

</div>

19. Prevent Unexpected Timeouts On Your Site

Businesses should avoid unexpected timeouts on their site for web accessibility purposes to ensure that users, including those with disabilities, have sufficient time to interact with and complete tasks on a website. 

Unexpected timeouts can create barriers for users who may require more time to navigate through content, fill out forms, or complete transactions, making it more difficult for them to access and engage with a website effectively.

Avoiding unexpected timeouts benefits people with various disabilities, including but not limited to:

• Motor impairments: Users who require extra time to navigate and interact with a website due to motor impairments or mobility issues benefit from extended time limits, as it allows them to complete tasks without feeling rushed or pressured.
• Cognitive impairments: Users with cognitive disabilities may require additional time to process information, make decisions, and complete tasks on a website. Avoiding unexpected timeouts ensures that these users have sufficient time to comprehend content and perform actions without feeling overwhelmed or frustrated.

Simply put, a website with unexpected timeouts offers a poor user experience. Timeouts can disrupt the user’s browsing experience and prevent them from completing tasks within the allotted time frame. 

Testing for Unexpected Timeouts

To determine whether your website has unexpected timeouts, conduct usability testing, monitor user feedback, and analyze your website analytics to identify user behavior patterns and engagement. Accessibility tools can also be used to gauge whether unexpected timeouts are occurring.

Remediating Your Website

Unexpected timeouts can be remediated by implementing user-friendly time limits and providing users with adequate warnings and options to extend or adjust the time limit as needed. 

Developers can also improve website performance and optimize loading times to reduce the likelihood of unexpected timeouts occurring during user interactions. 

Another step is to provide clear instructions, feedback messages, and error-handling mechanisms that can help users understand and navigate through time-limited tasks more effectively, enhancing the overall accessibility and usability of your website.

21. Conduct Accessibility Checks

It’s important for businesses to conduct regular accessibility checks to ensure that their websites are inclusive and usable for all users, regardless of their abilities or disabilities. 

By conducting accessibility tests, businesses can identify and address barriers or issues that may prevent users with disabilities from accessing and interacting with web content effectively. Ensuring web accessibility not only enhances the user experience but also helps businesses comply with legal requirements and industry standards, improves brand reputation, and expands their target audience.

Comply with the ADA’s web accessibility requirements benefits users with multiple disabilities, including:

• Visual impairments: Testing ensures that your web content is perceivable through alternative means, such as screen readers or magnification software, allowing users with visual impairments to access and understand your content effectively.
• Hearing impairments. When your site is accessible, people who are deaf or hard of hearing can still engage with your content, including audio content, thanks to captions and transcripts.
• Motor impairments: Testing verifies that your web content is operable via keyboard navigation or alternative input methods, enabling users with motor impairments to navigate and interact with your website without relying on a mouse.
• Cognitive impairments: Lastly, regular web accessibility testing means your content is understandable and predictable for people with cognitive or learning impairments, enhancing comprehension.

Without proper testing, your website may lack essential accessibility features, such as alternative text for images, keyboard navigation support, or semantic markup, making it difficult or impossible for users with disabilities to use your site independently.

Testing for Web Accessibility

There are two main ways that you can conduct web accessibility testing. The first is using automated tools, which automatically scan your website to detect issues. Some automated tools will also provide you with detailed reports that outline all of the issues on your site and include guidelines on how to correct them.

The second is to conduct a manual audit, which is more in-depth and will look at all aspects of your website from a code level as well as a user’s perspective.

23. Tag Multimedia Content Appropriately

Another ADA web accessibility requirement is that multimedia content needs to be tagged appropriately. It ensures that users with disabilities can access and understand content more effectively. 

Tags provide descriptive text alternatives for multimedia elements, enabling assistive technologies like screen readers to convey the information to users who cannot perceive the content visually or audibly. Proper tagging also enhances search engine optimization (SEO) and improves the overall user experience for all visitors.

Tagging multimedia content benefits users who are blind or have low vision and rely on screen readers to interpret web content. Properly tagged multimedia content ensures that screen readers can convey the information through alternative text descriptions, allowing visually impaired users to understand the content. 

It also benefits users who are deaf or hard of hearing and rely on captions or transcripts to access audio content. 

Testing for Multimedia Content Tags

You can determine whether your website has tagged multimedia content appropriately by inspecting the HTML code of the webpage and verifying the presence of tags such as <img> for images, <video> for videos, and <audio> for audio files. 

Developers can also use accessibility tools that analyze web content for accessibility issues, including the presence of alternative text for images and captions or transcripts for multimedia files.

Remediating Your Website

In the below example, the <img> element is tagged with an alt attribute, providing a description of the image for users who cannot see it. 

The <video> and <audio> elements include the controls attribute for playback control, and additional sources are provided for compatibility with different browsers and devices. Captions or transcripts can be added within the <video> or <audio> elements to provide alternative content for users with disabilities.

<img src=”example.jpg” alt=”Description of the image”>

<video controls>

    <source src=”example.mp4″ type=”video/mp4″>

    Your browser does not support the video tag.

</video>

<audio controls>

    <source src=”example.mp3″ type=”audio/mpeg”>

    Your browser does not support the audio tag.

</audio>

25. Provide Links to Required Plugins on a Page

By providing links to required plugins on a webpage, it ensures all users can access and install the necessary software or extensions needed to interact with multimedia content or other interactive features on your website.

This empowers users to take the necessary steps to access and engage with your content, regardless of their technological capabilities or assistive technology setup.

Users who rely on screen readers or magnification software may require plugins to access multimedia content or interactive features that are not natively supported by their assistive technologies. Providing links to required plugins ensures that visually impaired users can access and engage with the content effectively.

People with cognitive disabilities may also require additional support or tools to interact with complex multimedia content or interactive elements. 

Testing for Plugin Links

You can check whether your website has provided links to required plugins by inspecting your site for any references or instructions related to plugin installation or compatibility. 

Look for links, buttons, or text prompts that indicate the need to download or install specific plugins to access multimedia content or interactive features. 

Remediating Your Website

Developers should provide links to required plugins on a webpage in a clear and accessible manner, ensuring that users can easily locate and access the necessary software or extensions. This can be achieved by:

• Including descriptive text or labels that clearly indicate the purpose of the link (e.g., “Download Adobe Flash Player”).
• Using standard hyperlink styling or buttons to visually distinguish the links from other content on a webpage.
• Providing alternative text for the links to ensure accessibility for users who rely on screen readers or other assistive technologies.
• Ensuring that the links are functional and point to the correct download or installation page for the required plugins.
• Placing the links in a prominent location on a webpage, such as near the multimedia content or interactive features that require the plugins for optimal accessibility and usability.

Where Do I Download the ADA Requirements Checklist for Websites?

To help summarize the ADA web accessibility requirements outlined in this document and make it easier for you to test and remediate your website, you can download a comprehensive PDF checklist here.

We continuously update this checklist to ensure your site is complying with the latest requirements. The latest version was updated in 2024. 

What Are the ADA Tools That Make Your Website ADA Compliant?

Summary

Thanks to technological advancements, achieving ADA Title III compliance has never been easier.

Thankfully, your business’s compliance journey will open your business to an entirely new world of users, innovative practices, opportunities, and more, all while protecting you from possible ADA compliance lawsuits. 

So what are you waiting for?

Frequently Asked Questions