How to make your website ADA compliant: checklist and steps to follow

Navigating ADA compliance for websites can seem overwhelming, but making your site accessible isn't as challenging as you might think. Besides, it’s worth it — ensuring digital accessibility not only expands your reach to a broader audience but also safeguards your business from potential legal issues. Recent high-profile lawsuits, such as those against Domino’s Pizza and Glossier for failing to accommodate visually-impaired users, highlight the need to be compliant.

But before you say, “Hey, isn’t ADA compliance more for heavily regulated sectors like finance and healthcare?” consider this: any business with a digital presence, particularly e-commerce and retail brands, can be held liable for non-compliance. 

Below, we'll cover essential ADA compliance standards and provide a practical checklist to help your team create websites and digital products accessible to all users. Let’s take a look.

What we'll cover

Understanding ADA compliance for websites

One of the ongoing challenges businesses face when investing in website accessibility revisions is the absence of clear federal guidelines from the Department of Justice (DOJ) on developing and maintaining ADA-compliant websites. While the Americans with Disabilities Act (ADA) was established over 30 years ago, it doesn't explicitly address the complexities of modern digital accessibility. 

Under Title III of the ADA, both private and public entities are prohibited from discriminating against customers with disabilities in places of public accommodation, which now includes websites and mobile applications. This underscores the importance for brands to proactively address digital accessibility to avoid legal repercussions.

Key standards to follow for ADA compliance

At its core, digital accessibility ensures that the sequencing and presentation of information on websites do not depend exclusively on sensory elements such as shape, color, size, visual placement, orientation, or sound. Essentially, this means that all web content and user interfaces should be equally accessible and navigable by visitors with disabilities. Brands aiming for compliance and inclusivity should ensure their digital properties are just as intuitive and usable for disabled users as they are for non-disabled users.

WCAG (Web Content Accessibility Guidelines)

In the absence of explicit DOJ regulations, organizations often refer to guidelines established by the World Wide Web Consortium’s Web Content Accessibility Guidelines (WCAG). These internationally recognized standards provide a comprehensive framework to enhance web accessibility. WCAG's recommendations include:

• Keyboard usability: Visitors should have complete and seamless interaction with your website using just a keyboard. This is especially crucial for transactional areas such as product orders. Web pages must be structured clearly, ensuring navigation menus, links, and interactive elements are fully accessible to keyboard-only users, those utilizing assistive technologies like toggle tools, dictation software, and other alternative interfaces.
• Descriptive anchor text for links: Anchor text should clearly communicate the action or destination of the link. Instead of vague terms like “click here” or “learn more,” use descriptive texts such as "Order Food Here" or "Click for Information on Our Products" to guide users clearly and effectively.
• Alternatives for time-based media: Ensure prerecorded and live audio or video content is accessible to hearing- or visually-impaired visitors by providing alternative formats. This includes text captions, audio descriptions, transcripts, and sign language interpretations, allowing all users equal access to your content.
• Compatibility with screen readers for form fields: Form fields like first name, email, and phone number must be coded specifically to be compatible with screen-reading software. Proper use of HTML tags and attributes is essential so that screen readers can accurately relay information to visually-impaired users, ensuring form interactions are seamless.
• Enhanced background visibility: Websites should prioritize readability through sufficient contrast between foreground text and background elements. Clear, distinct color contrasts improve visibility and readability significantly, benefiting all users, particularly those with visual impairments.

Section 508 compliance

Section 508 of the Rehabilitation Act specifically mandates that federal agencies, and organizations doing business with them, make their electronic and information technology accessible to people with disabilities. This regulation closely aligns with WCAG standards, emphasizing the importance of making digital content and systems accessible. Entities required to comply with Section 508 include federal agencies, contractors, vendors, and businesses receiving federal funding. By adhering to Section 508 standards, these organizations can ensure they are inclusive and accessible, while also protecting themselves from potential legal challenges.

What makes a website ADA compliant? Checklist for compliance

This checklist is not exhaustive, and the requirements for ADA compliance can vary depending on your website's complexity, content and your industry. But this checklist will cover every major factor to make your website ADA accessible. We’re going to look at the POUR framework as our beacon for compliance.

• Perceivable: All users, regardless of sensory abilities, can perceive all content on your website.
  
  • There are text alternatives for non-text content (images, audio, video).
  • All content can be resized up to 200% without loss of functionality.
  • Your website uses appropriate color contrast. For normal text, the minimum contrast ratio should be 4.5:1.For large text (which is defined as 14 point and bold or larger, or 18 point or larger), the minimum contrast ratio should be 3:1.
  • No graphics rely solely on color to convey information.
  • There are alternatives for time-based media (captions, audio descriptions, transcripts).
  • Text can be resized without requiring the user to scroll horizontally.
  • Your website is compatible with screen readers.
• Operable: All users, irrespective of their physical abilities, can interact with all components of your website.
  
  • Your website is keyboard accessible (users can navigate using only a keyboard).
  • Users can bypass blocks of content that are repeated on multiple pages.
  • There are clear and descriptive headings and labels.
  • There's enough time for users to read and use the content.
  • No content can cause seizures, such as flashing lights or animations.
  • There are clear navigation options, including a consistent layout and the ability to retrace their steps.
• Understandable: All users, regardless of cognitive abilities, can comprehend your website's content and navigation.
  
  • Text is readable and understandable (simple language, clear fonts).
  • There is a logical and predictable structure for your content.
  • Users are helped to avoid and correct mistakes by providing clear instructions, error identification, and error suggestions.
  • There is consistent navigation and labeling across your website.
• Robust: Your website can be accessed and used reliably with a wide range of technologies, including assistive ones. 
  
  • The website works well across different devices, platforms, and browsers.
  • Valid, semantic HTML markup follows best practices for CSS and JavaScript.
  • Use ARIA (Accessible Rich Internet Applications) attributes and roles where needed.
  • The website has been tested with various assistive technologies, such as screen readers and magnifiers.

Steps to make your website ADA compliant

Creating an ADA-compliant website doesn't happen overnight, but following a structured approach makes the process manageable and effective. Here are key steps your organization can follow to ensure your website is accessible to everyone:

1. Conduct an accessibility audit

Performing an accessibility audit is crucial to identifying current barriers and understanding where your website stands in terms of accessibility. An audit typically evaluates your site against established standards like the Web Content Accessibility Guidelines (WCAG). Using automated tools, manual checks, and assistive technologies like screen readers, an audit can reveal issues ranging from inaccessible form fields to unclear navigation and insufficient color contrasts. Identifying these issues early is essential for planning effective improvements.

2. Ensure text and media are accessible

Providing accessible text and media is fundamental to ensuring your content reaches all users. Include text alternatives such as alt text for images and graphical elements, ensuring visually impaired users can access the same information as sighted users. For multimedia content like videos and audio files, provide captions, transcripts, and audio descriptions, making them accessible to individuals who are hearing-impaired. Additionally, using descriptive headings and structured formatting can significantly enhance readability and comprehension for all visitors.

3. Optimize website navigation

Clear and consistent navigation is critical for website usability, especially for users relying on assistive technology. Navigation elements like menus, buttons, and links should be operable via keyboard commands and compatible with screen readers. Ensuring consistent navigation structures across your entire site allows users to predictably and smoothly move from one section to another, significantly enhancing the overall user experience.

4. Improve color contrast and visual design

Visual accessibility is a key aspect of an ADA-compliant website. High color contrast between text and backgrounds ensures readability, particularly for users with visual impairments or color blindness. Scalable fonts and adjustable visual layouts also improve the experience for users who may need to enlarge text or modify the visual presentation to read comfortably. Attention to visual design not only improves accessibility but also creates a more inclusive browsing environment for all users.

5. Make interactive elements accessible

Interactive website components like form fields, buttons, and dropdowns must be accessible to all users, regardless of how they interact with your site. Clearly label interactive elements and ensure they're fully operable via keyboard navigation. Providing straightforward instructions and clear, helpful error messages helps users successfully complete interactions, reducing frustration and improving overall accessibility.

6. Test with real users

While automated tools and internal audits provide valuable insights, real-world usability testing offers essential feedback. Involve individuals who rely on assistive technologies like screen readers, speech-to-text software, or voice commands in your testing processes. Their firsthand experiences can highlight practical barriers and usability issues that automated checks might miss, providing deeper insights and enabling your team to address real-world accessibility needs effectively.

7. Create an accessibility statement

Publishing an accessibility statement demonstrates your organization's commitment to digital inclusivity. This statement should clearly outline the accessibility standards your website follows, such as WCAG or Section 508, and detail ongoing efforts and improvements. Additionally, it should provide contact information for users who encounter accessibility barriers, offering a direct channel for feedback and requests for accommodation. This transparency not only enhances trust but also underscores your organization's dedication to inclusivity.

Why typical web development processes won't cut it for ADA compliance updates

With all of these potential changes, web development, digital marketing and IT teams that own multimedia-heavy web components can be looking at seriously time-consuming and costly projects to get their websites, mobile apps, and interfaces compatible for ADA accessibility.

Using typical approaches to manage changes around web accessibility will only drag out a project that needs to be turned around quickly in order to reduce legal liability and improve the customer experience. Here’s why:

ADA compliance requires significant coding changes

Depending on how your website is built, you may need to make significant changes not just to the public-facing elements on your site, but to the code and structure of the entire site itself. In some cases, starting from scratch to re-code everything might even be the most cost-effective solution for your business.

After testing your site for accessibility issues, creative and web teams will then need a clear workflow to assign and track suggested revisions and a way to review new code and demonstrate to stakeholders in context how those changes will impact the site’s existing design and functionality. As you develop against ADA standards, it’s imperative to make sure that nothing gets lost in the shuffle of images, code, functionality, and design and that progress remains iterative.

Improving accessibility involves cross-team collaboration and versioning

Like any web project, designers, writers, web developers, QA testers, IT managers all need to become experts in how their contributions (text, forms, images, code) are impacted by accessibility. Because remediation changes will come from different areas of the business throughout the redevelopment process, it’s imperative to track suggestions and the status of tasks across teams in relation to the web content itself.

Clients and contractors need access to the revision process

If you’re developing websites for clients, they’ll need to have a clear understanding of the revisions you’re making to their site (and why it’s critical that they should pay you to re-develop their sites in the first place). Clients will not only need to be able to see and approve proposed changes without having full access to your production and staging environments, but they will also need a visual way to add comments and suggestions to multiple types of web content as you improve the accessibility of their web properties.

Similarly, if you’re working with contracted designers or developers to help implement website changes, you’ll need a way to not only accept their design elements or code and link it to your internal review process and track their work in relation to other changes being made by your internal team.

ADA compliance doesn’t stop at the first round of revisions

Once you’ve addressed the current accessibility issues on your site, you’ll need a process moving forward to ensure that future modifications and digital initiatives remain compliant. As digital teams dip their toes even further into video, interactive, and AI content, they’ll need to ensure that accessible alternatives are also created during the development process, not after the fact.

Before you begin updating your website to ADA standards, take a look at how your internal team manages the web production process and identify holes in collaboration steps to ensure accessibility updates can be implemented smoothly and with minimal review and revisions.

How to simplify ADA web accessibility compliance with online proofing

Online proofing simplifies web content review by enabling reviewers to view web pages as they look in live or staged environments while also accessing the review tools needed to quickly communicate detailed on-page modifications to the entire web content team.

Furthermore, the proofing environment contextualizes web pages with other related elements and file types involved with website creation including images, text files, and more. All project files remain in one place — in iterative versions — so your team can track how accessibility initiatives are translating into web design.

Here’s how online proofing streamlines every stage of developing website properties for accessibility:

• Information gathering: Collect new creative briefs and use document creation to kick off web project creation and workflow in one shared review space.
• Sitemap and wireframing: Share new wireframes for review from UX designers and notify the right stakeholders when new designs are submitted and created. Use visual version comparison to understand the context of proposed changes.
• Content writing & assembly: Collect all content pieces, from new copy to videos to code, in one project folder and kick off notification and review workflows each time new versions or content pieces are created.
• Staging & testing: Transform URLs of live or staged websites that need review into a live proof. Online proofing can render each page individually for streamlined review and approval process. Your project team and executive stakeholders can review web content as it will appear without needing access to staging environments or vulnerable file-sharing networks.
• Launch: Use status changes and decision reasons to track revisions and review points and ensure that new pages go live only after all stakeholders and teams have given their approval.

Leverage side by side Comparison for pixel-level image changes

One of the challenges with sending images and multimedia content that is (or will be) included in web content around for review is that two versions can look extremely similar depending on the modifications that were made to the web page.

Side-by-side comparison in online proofing enables your team to review new versions of web pages against current or previous versions. Instead of marking up new versions with changes before sending around for team-wide review, the proofing environment can visually demonstrate to the viewer if the correct changes have been made in each iterative version that is created.

Proper web accessibility often involves modifications to colors and contrast. Online proofing in Ziflow also offers pixel-by-pixel comparison, so your team can identify even the most subtle changes that need to be made or have been made at the most detailed level.

Expedite client & contractor communication with intake forms

Modifying your site for accessibility, from creating new layouts of existing pages and reformatting site architecture to changing on-page images and text, will likely mean communicating with multiple external sources.

If you’re working with a website with a high volume of product images, such as an e-commerce site, you’re likely pulling product images and descriptions from outside of your company. If you’re developing new content for clients, it’s possible that you’ll need to collect new content, or have them send updated logos and branded content. If you’ve contracted out the design, you’ll need a way for those freelancers to submit content to your team for your review. 

Instead of trying to incorporate external collaboration via email, intake forms can be used to expedite the collection of web components that originate from outside of your organization through one form and workflow. 

When it comes to updating web content, intake forms can be used to:

Provide freelance designers with one form to submit new wireframes or versions of updated web pages for review and automatically create a proof and notify your internal creative or UX team when they are submitted.
Allow clients to send updated logos, brand images, and product photos directly into an existing review and web project environment.
Collect and proof new versions of videos and other multimedia content from contracted videographers or clients.

These web elements are added directly into your content proofing project, and your team can immediately use those web proofing tools like side-by-side and pixel-level comparison to review and modify submitted content.

Add ADA compliance reasons into review decision checklists

Online proofing not only helps notify everyone when new versions of web content are ready for review and notify team members of review outcomes, but it also helps provide context about the reasons for different team members’ review.

When a team member is reviewing content, they can go a step further than simply approving/rejecting a current version of a proof and select a specific reason for their decision. For web content, marketing teams could add a “Change Required: Not ADA Compliant” reason to this decision list, allowing reviewers to specify why content is not in compliance.

Adding ADA reasoning into decision checklists achieves three very important compliance goals:

• It trains reviewers to review content with accessibility in mind.
• It stops further web development from occurring until accessibility issues are addressed in the next design version.
• It creates a digital trail of compliance oversight by keeping decision reasons as metadata on each content piece.

These decision checklists are especially useful for creating continual quality control around accessibility as your team develops new web content. By hard-coding ADA accessibility as an option during content review and creative decision-making, you can more easily demonstrate to customers, courts, and regulators that your company has a standard process for addressing web accessibility at the very initial stages of design and development.

When your team uses online proofing to manage website projects, they’ll not only have access to the right tools needed to review the detailed revisions required for web accessibility. They’ll also reduce the time spent on project communication, version management, progress tracking and implement strategic changes to website design and functionality on a much faster timeline.

Navigate your ADA compliance processes for your website with Ziflow

ADA web accessibility concerns are on the rise, in the courts and in the code of major retailers. No matter what industry you work in, if you’re maintaining websites for your company or your brand, it’s time to start taking an assessment of how to improve web functionality for consumers with visual, auditory, and other sensory limitations. 

Using Ziflow as your online proofing tool can help expedite the revision process for new changes to your website, mitigate downtime during web development, and get you closer to ADA compliance faster than typical web development processes.

Ready to take a look? Check out Ziflow today.