How to make your website ADA compliant 

By Rimpi Mathur, Technical Architect

What is ADA compliance? 

ADA compliance refers to adhering to the Americans with Disabilities Act (ADA), a U.S. civil rights law that prohibits discrimination against individuals with disabilities. Compliance involves making both physical spaces and electronic information and technology, such as websites, accessible to people with disabilities.  

There are four main Web Content Accessibility Guidelines (WCAG) for making your website accessible: 

  1. Perceivable: Make the website recognizable and visible. This includes elements like text, images, and videos. 
  1. Operable: Website should be easy to navigate. 
  1. Understandable: Apart from easy navigation, users should be able to understand what they are reading and listening to. 
  1. Robust: The content on the website should be universal, the user experience for disabled and non-disabled users should be same. 

Here is a list of key HTML requirements: 

Structure and Navigation 

  • Semantic HTML: Use HTML tags that define the meaning and structure of the content they enclose. Instead of using multiple <div> tags use <header>, <nav>, <main>, <footer>, <button>, <ul>, <ol>, etc. 
  • Heading Hierarchy: Structure content using a proper, logical hierarchy of heading tags (<h1> for the main title, then <h2>, <h3>, and so on). 
  • Skip Navigation: Include a “skip navigation” link at the beginning of the page’s HTML source order to allow keyboard and screen reader users to bypass repetitive navigation links and jump directly to the main content. 
  • Keyboard Accessibility: Ensure your website/app is fully usable using keyboard only. Ensure all links, buttons, forms, etc. are reachable with keys like Tab, Shift, Enter and Spacebar.  

Content and Media 

  • Alternative Text for Images: All <img> tags must include an <alt> attribute that provides a concise, meaningful text alternative. For decorative images, alt=”” can be used. 
  • Descriptive Links: Add unique and descriptive anchor text within each <a> tags that clearly indicates the link’s purpose. 
  • Captions and Transcripts: For all multimedia content, provide synchronized captions for videos and audio descriptions or full transcripts for audio-only files.  

Forms and Interactivity 

  • Form Labels: Explicitly associate <label> tag with form input fields. Avoid relying solely on placeholder text for instructions. Using <label> creates cleaner, more semantic HTML code. 
  • Accessible Names and ARIA: Use ARIA (Accessible Rich Internet Applications) roles and properties (aria-label, aria-described by, etc.) when developing custom interactive elements (like complex buttons or dynamic content) to provide additional information for assistive technologies. 
  • Error Identification: Clearly identify input errors in forms and provide instructions on how to correct them in an accessible manner.  

Appearance and Compatibility 

  • Color Contrast: Text and images of text should maintain a minimum color contrast ratio of 4.5:1 against their background (3:1 for large text) to ensure readability for users with low vision. 
  • Text Resizing: The design should allow users to resize the text up to 200% without loss of content or functionality and without requiring horizontal scrolling. 
  • Language Declaration: Include a lang attribute in the opening <html> tag to specify the page’s primary language (e.g., <html lang=”en”>). This helps screen readers pronounce content correctly.  

You can use tools like WAVE to test your website’s compliance.  

Fully ADA compliant HTML sample page: 

<!DOCTYPE html> 

<html lang="en"> 

<head> 

    <meta charset="UTF-8"> 

    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 

    <title>Sample HTML</title> 

</head> 

<body> 

 <!-- Header Section --> 

    <header role="banner"> 

        <h1>Welcome to My Website</h1> 

        <nav aria-label="Main navigation"> 

            <ul> 

                <li><a href="/">Main content</a></li> 

                <li><a href="/">Home</a></li> 

                <li><a href="/about">About</a></li> 

            </ul> 

        </nav> 

    </header>    

 <!-- Heading --> 

    <h2>About This Sample Page</h2> 

    <!-- Image --> 

    <img src="smile.jpg" alt="Smile" class="sample-image"> 

     <!-- Text Box --> 

    <label for="username">Enter Text:</label> 

    <input type="text" id="username" class="text-box" placeholder="Type here"> 

    <!-- Link --> 

   <p><a href="https://www.google.com">Visit Example Website</a></p> 

 

</body> 

</html>

You can test this sample page using WAVE. The requirements discussed above are added to this sample page. You can use this example to modify pages on your website.  

About the Author

As a certified AWS SysOps Administrator, Rimpi Mathur has over twenty-four years of experience with AWS and Oracle portal and web application support and development which includes integration with multiple backend systems.  Her experience includes requirements gathering, technical design, development, installing/configuring environments and deploying applications.  Rimpi has a working knowledge of AWS, Ansible, AJAX, CSS, RDS, Hibernate, HTML, Java, REST, JavaScript, Spring, SQL, PostgreSQL, Aurora Global Database, Terraform, CloudFormation, SonarQube, Docker, WebLogic Portal,and Web Services.  Previous clients worked with include Clearnova, Westfield Insurance and Satyam Computers.