Navigating the world of ADA compliance can feel like a daunting challenge, but creating an ADA compliant website doesn't have to be a herculean task. By ensuring your website is accessible to all users, including those with disabilities, you're not only opening up your content to a wider audience but also protecting your business from potential legal troubles.
In this post, we'll discuss the essentials of ADA compliance for websites and provide you with a practical checklist to help you on your journey to a more accessible online presence. Whether you're a web designer, developer, or a business owner, understanding the ins and outs of ADA compliance is vital for ensuring that your website is welcoming and accessible to everyone.
Recently, the U.S. Supreme Court denied an appeal by Domino’s Pizza in a lawsuit brought against the franchise due to its website and mobile app not being compatible with screen-reader software used by visually-impaired customers.
What we'll cover
Table of contents
The decision upholds a previous ruling that stated that the pizza franchise--and other retailers and consumer brands--must make online services, websites, mobile apps, and other digital products accessible in accordance with the American with Disabilities Act (ADA) standards or risk significant fines.
When it comes to digital accessibility, the federal and state courts are not messing around. According to research by law firm Seyfarth Shaw, federal lawsuits related to accessibility have risen 12% in the first six months of 2019 alone and grown consistently year-after-year since 2014.
Source: Seyforth - Federal Ada Title Iii Lawsuit Numbers Continue To Climb In 2019. https://www.adatitleiii.com/2019/07/federal-ada-title-iii-lawsuit-numbers-continue-to-climb-in-2019/
The Domino’s case is just one example of how brands are realizing the limitations that their customers with disabilities face when it comes to modern digital accommodations: Popular internet beauty brand Glossier also came under fire for not including alt-text on its site HTML, which prohibited visually-impaired users from identifying product details, prices, and more. Streaming service Hulu recently announced that it has improved its text compatibility with screen readers and created an audio description hub for its content.
It’s clear that digital marketing compliance is no longer just a concern for regulation-heavy industries like financial services and healthcare organizations. Marketing, design, and digital product teams for brands need to approach development with accessibility in mind, especially those in e-commerce, retail, and other transaction-heavy industries.
If you provide a website for your consumers (basically, everyone), or if you’re a design/digital agency that develops or maintains web properties for clients, it’s time to start thinking about how to make your web properties more digitally accessible to all visitors--and how to do it cost-effectively.
What Changes are Required for ADA Compliance?
One of the challenges with investing in website revisions for accessibility is that, while there have been plenty of cases brought against organizations with accessibility issues, the Department of Justice has not provided federal standards for developing and maintaining ADA-compliant websites.
The ADA, which was put into law over 30 years ago, doesn’t include clear guidelines for modern digital accessibility. Title III of the ADA states that private and public entities cannot discriminate against customers based on disabilities while providing places of public accommodation--including their websites and mobile apps.
Digital accessibility boils down to one core concept: The sequencing of information on a website shouldn’t depend solely on the sensory elements that convey that information. That means that the shape, color, size, visual location, orientation, or sound of web elements should not prevent any user from understanding the information on a website or exclude them interacting with its properties. In short, the information and interface on any website hosted by private and public brands need to be just as usable by visitors with disabilities as those without.
Brands can take cues from The World Wide Web Consortium’s Web Content Accessibility Guidelines (WCAG) which sets international standards for Internet hosting and usage and has been used as a common reference point in the absence of DOJ regulations. WCAG guidelines for accessibility include:
- Ensuring keyboard usability across your website. Visitors should be able to interact with entire websites (especially areas where transactions are executed like product orders) via their keyboard. The way your pages are structured also shouldn’t prevent any visitor from clearly navigating their way around the entire site. Site navigation, menus, links, and other guided actions should be presented clearly and distinctly to all visitors who use keyboards, toggle tools, dictation software, and other interfaces to browse your site.
- Adding descriptive anchor text for links. Link text should provide visitors with context around what action will occur when they click the link. Instead of using simply “click here” or “learn more,” text should include descriptions such as “Order Food Here” or “Click for Information on Our Products.”
- Providing alternatives for time-based media. Prerecorded or live audio and video content often may not be usable by visitors who are seeing or hearing-impaired. For these elements, web pages need to provide this content in alternative versions in the form of text captions, audio descriptions, sign language interpretation, and other formats.
- Ensuring form fields can be read by screen readers. Form fields (first name, email, phone number, etc.) need to be coded for compatibility with screen-reading software. This means ensuring that every web page includes proper tags and attributes.
- Increasing background visibility. To improve readability, websites should also include distinct color contrast between foreground elements and page backgrounds.
For example, if the background of your website is all high-resolution product videos with very little text, you’d need to provide an alternative way for someone who is vision- or hearing-impaired to consume the information contained in those videos.
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.
It’s tempting to focus on the specific changes that need to be made to improve accessibility. The way you manage the internal/external review process for web design and development is also just as important. In order to minimize the cost of changing your website and any downtime to your site, you’ll want to identify and implement accessibility standards as efficiently as possible.
Now, consider the typical methodology used to manage the web development process. It’s a resource-intensive project with multiple moving parts, opinions, and versions:
- The UI and design team creates wireframes or mock-ups in design software and then emailing the designs for review and input.
- Stakeholders add comments onto the design files or PDFs in another system (Google Drive, DropBox, etc.)
- The digital team collects images, on-page copy, and other multimedia elements from multiple team members (copywriters, designs, videographers, etc.)
- The marketing team sends new versions of designs for review and continually collects feedback.
- Final wireframes are passed onto the web development team for implementation
- The web development team continually collects feedback on live production pages via email, chat, or other markup systems.
- The QA team gathers testing results and communicates launch timelines to stakeholders, a process that may be managed by a project manager or digital marketing team member.
The budget for this kind of web development process adds up quickly. It’s not just the development and design costs that--it’s the time cost of managing the review process, ensuring that all feedback is gathered, seen, and acted up by the appropriate team member. Usually, the decisions and tasks in this process are split between team members at different stages of the development process, leading to confusion and endless revisions.
Using this approach 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.
The more time that your team spends modifying your website for accessibility means additional budget spent on website maintenance—and one more day that you’re taking on the risk and potential costs of non-compliance.
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.
Using this approach 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.
ADA Compliance Checklist
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.
- 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.
- 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 causes 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.
How to Simplify ADA Web Accessibility Compliance with Online Proofing
Create One Environment for Revision and Review—Including Single or Entire Web Pages—throughout the Web Development Process
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.
Other Helpful ADA Web Accessibility Tools
ADA accessibility for digital spaces is a strategy that encompasses web design, coding, graphic design, copywriting, and digital marketing and requires tactical web development tools on top of a centralized review and approval environment.
Whether you need to evaluate the scope of accessibility changes you should be making to your site or need to check if you’re on the right track during website development, these solutions can aid the revision process.
Elsevier Accessibility Checklist for Designers, Developers, and Testers
Elsevier's User Centered Design (UCD) group has published a microsite that includes a searchable checklist of all available accessibility standards. Web designers, developers, and testers can filter guidelines by WCAG and Section 508 and by different web elements (tags, forms, links, tables, etc.) It’s a useful go-to reference point for the entire team involved with digital marketing and website creation.
Off-Site Services Image Color Check
Web consulting firm Off-Site Services simplifies compliance for on-site images with an interactive tool that tests image contrast and readability. Users can run ADA validation against any image and enter the background and foreground color codes to check the color contrast between image elements. The company also provides full-scale development and design services for web accessibility.
Dynomapper
Dynomapper offers a website accessibility tester that enables teams to evaluate HTML for any current accessibility problems and review and isolate issues on each page. The company’s interactive visual sitemap generator also helps provide a snapshot of web architecture to identify how a site’s structure may impact content consumption by visitors.
Accessibility Features:
- Website testing
- Visual sitemap generator
- Content inventory analysis
- Content audit
- Full website and code testing
- VPAT creation for federal government contracts
- Training, consulting, and development
- Free website testing
- Automated website scans
- Accessibility reporting
- Training, consulting, and development
Pricing: A free trial is available, with monthly plans starting at $40/month.
Tenon
Tenon offers an automated accessibility tool that enables web development teams to test new code for accessibility in real-time. As you’re creating wireframes and templates, the tool’s API calls are a great way to ensure you’re meeting accessibility guidelines before project completion.
Accessibility Features:
Pricing: Pricing information not available. Request a demo to learn more.
Compliance Sheriff
Compliance Sheriff software enables companies to conduct an automated scan of their websites for WCAG 2.0/AA/AAA and Section 508 standards and generate a report with prioritized Top 10 remediation suggestions. The company also offers end-to-end accessibility solutions, including consulting and training, to help brands implement repeatable, accessibility checkpoints.
Accessibility Features:
- Free website testing
- Automated website scans
- Accessibility reporting
- Training, consulting, and development
Pricing: Pricing Information Not Available
Bureau of Internet Accessibility
The Bureau of Internet Accessibility’s A11Y Testing Platform helps brands manage compliance by instantly identifying accessibility issues per WCAG 2.0 standards and continually monitoring sites for new and recurring issues. The platform displays specific lines of code that need remediation and offers suggested changes with examples.
Accessibility Features:
- Automated WCAG Audit
- Mobile Accessibility Testing
- PDF Accessibility Testing
- Application and Kiosk Testing
- Remediation Reports
- Self-Paced Training
Pricing: Pricing Information Not Available
Deque Accessibility Checker for Developers in Chrome
Deque offers a free accessibility plug-in for developers in Chrome. The accessibility checker can be used to evaluate HTML-based user interfaces for WCAG 2.0 and Section 508 accessibility. They also provide a range of solutions and services to integrate directly into the testing environment.
Accessibility Features:
- Free accessibility checker plug-in for Chrome
- Automated testing
- Compliance monitoring and reporting
Pricing: Pricing information not available. Request a demo to learn more.
Conclusion
There’s no way around it: 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 and creating a roadmap for implementing those design changes on your website in the most cost- and time-effective process possible.
Using an online proofing environment and other accessibility assessment tools 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.
