How To Create an ADA Compliant Website
The Americans with Disabilities Act (ADA) is well known for requiring wheelchair accessibility in public places via ramps, elevators, adequate spacing, and other means. What’s lesser known is that the ADA also calls on websites to be accessible to individuals with disabilities. You don’t need (and can’t build) elevators for your website, so what exactly does this mean?
Unfortunately, the ADA doesn’t set forth exact standards for website compliance the way it does with eliminating physical barriers. But that doesn’t mean businesses have no responsibility. Under the ADA, businesses with 15 or more full-time workers that operate at least 20 weeks a year, or those that offer public accommodation, are required to make accommodations for people with disabilities.
That requirement covers digital access, too. So, if you’re designing a website for your business, it’s important to know how to make these options accessible to people with disabilities, such as those with hearing and vision impairments.
Table of Contents
- What Is ADA Compliance?
- Why Should Your Site Be ADA Compliant?
- How To Make Your Site ADA Compliant
- What Is WCAG?
- ADA Compliance Checklist
What Is ADA Compliance?
The ADA addresses access barriers that confront people with disabilities and create de facto discrimination. It requires that businesses take steps to overcome those barriers.
Standards published by the Department of Justice (DOJ) in 2010 made clear that businesses need to provide digital accessibility. Under these Standards for Accessible Design, people with disabilities must find electronic and information technology accessible in the same way that public places must be physically accessible.
Under Title III of the ADA, the DOJ requires that every business provide a “place of public accommodation.” The following organizations must provide an accessible website:
- State and local government agencies
- Private employers with 15 or more employees
- Businesses that operate for the benefit of the public
Although the DOJ does not provide specific guidance for what constitutes accessibility, businesses can use WCAG 2.0 AA guidelines as a model for compliance.
These include requirements that you have web content and other assistive technologies that are accessible to users such as unsighted and partially sighted users, those with hearing impairments, people who navigate by voice, and others.
Why Should Your Site Be ADA Compliant?
According to The Wall Street Journal, 64% more ADA lawsuits were filed by plaintiffs over digital accessibility during the first six months of 2021 than in the same period in 2020. Between January 1 and June 1, a total of 1,661 suits were filed due to alleged violations of either the ADA or California’s Unruh Civil Rights Act over access to websites, apps, and online videos by people with disabilities.
E-commerce companies were the most common targets of legal action, being named in 74% of those cases, followed by digital media, finance, food service, and healthcare. So clearly, if you are doing business online, whether you’re selling jewelry, home decor, tech, or services, it makes sense to take action from a practical standpoint, as well as for the sake of social responsibility.
How To Make Your Site ADA Compliant
How do you know if your website is ADA compliant? There are a few ways you can tell.
To start, develop a policy that meets Web Content Accessibility Guidelines (WCAG), then post it in a statement on your site. The Department of Justice has required such a statement in lawsuit settlement agreements, so it’s a good idea to have one in place.
There are ways to make sure your website is ADA compliant. Here are some steps you can take:
- Use an ADA compliance website test checker tool.
- Verify by having an audit of ADA website accessibility.
- Install an ADA compliance plugin or software on your website if applicable.
- Engage in website accessibility remediation (addressing the issues found on your website from your audits).
- Review and meet the WCAG compliance standards.
What Is WCAG?
The Web Content Accessibility Guidelines were created to make web content accessible by minimizing accessibility issues and enhancing the user experience for people with disabilities.
They’re intended as a guide for website content developers, such as site designers and page owners, as well as a web authoring tool for developers and others who need a standard for digital accessibility.
The WCAG 2.0 was published in 2008, followed by the 2.1 version in 2018. The 2.2 version was in the works as of 2021.
WCAG 2.1: Four Principles of Accessibility
The WCAG 2.1 sets forth four principles of accessibility which serve as guidelines for web designers, builders, and moderators.
In order to meet these guidelines, digital content must be perceivable, operable, understandable, and robust. Here’s what that means:
- The information and user interface should be presented in ways such that users can comprehend the information being presented.
- Factors in perceivability include alternatives to text, screen readers, assistive technologies, the layout structure of your content, and visibility. In short, it involves anything that a person with limited or no sight, hearing, or color differentiation would be able to see/hear. Captions and similar alternatives are part of making content perceivable.
- The user interface must be operable: It must provide ways to navigate around your content to make it easier for the user to operate your website.
- This involves factors such as buttons, forms, keyboard accessibility, and avoiding any content that can cause severe physical reactions such as blindness or seizures.
- Operable websites give users enough time to find, digest, and employ the content they provide. Navigation is facilitated for all users.
- The information and content should be readable and understandable to the user.
- Making your site or app understandable means using clear labels and checkout systems. Text and other content must be readable/easily comprehended. Users should have the ability to avoid mistakes and correct those that occur. Your content should operate in predictable ways.
- Websites and mobile apps should work well, and users should be able to browse through your website across several different platforms, devices, or browsers.
- Your digital presence should be compatible with old and new versions of Internet Explorer, Google Chrome, Firefox, Safari, etc. It should be easily used via PC, smartphone, tablet, laptop, or any other assistive technology.
WCAG Website Compliance Standards
There are three versions of WCAG (with a fourth on the way). They are:
WCAG 1.0 was published in 1999, included 14 guidelines, and created various checkpoints to determine how accessible each website is. Checkpoints were given different priority levels: 1, 2, and 3.
The first priority is mandatory: Checkpoints must be satisfied, or one or more groups won’t be able to access information. Priority 2 checkpoints should be satisfied, or groups will find it difficult to access information, while Priority 3 checkpoints may be satisfied; if they aren’t, some group(s) may find it somewhat difficult to gain access to information.
Also included in WCAG 1.0 is a series of conformance levels. At Level A conformance, all Priority 1 Checkpoints are met; at Level AA, all Priority 1 and 2 Checkpoints are met; at level AAA, all checkpoints at all three priority levels are satisfied.
In contrast to WCAG 1.0, the second iteration of the guidelines focused on principles (the four mentioned above) rather than checkpoints. As technology changes, those principles are applied to new advances, as well as changes in website practices, such as pop-up windows and identity confirmation.
One example of how these principles operate is audio control: If any audio on a web page plays automatically, there should be a mechanism to pause, stop the audio, or control the volume. Meanwhile, sign language interpretation should be provided for all prerecorded audio content.
CAPTCHA technology confirms that the content is being accessed by a person rather than by a robot (for security reasons). But CAPTCHAs tend to use lettering or photos that can be difficult for some people with disabilities to perceive and, therefore, operate. It is therefore important to develop alternatives to this security feature that do not render websites inaccessible to people with disabilities.
As mobile devices such as smartphones and, to a lesser extent, tablets have supplanted PCs as the primary mode of accessing the internet, changes in accessibility have followed. And new adaptations have been needed.
One such change involves changing the orientation on mobile devices from landscape to portrait, or vice versa. This option isn’t needed or available on a PC, but it’s integral to operating a smartphone. Some users have devices mounted on powered wheelchairs, for example, so sites should be equally accessible in either mode.
Another feature addressed in 2.1 is magnification. Enabling reflow allows users to zoom in, making text and pictures easier to see.
Levels of Conformance
As with WCAG 1.0, there are three levels of conformance or compliance in WCAG 2.0 and 2.1: A, AA, and AAA.
The three levels are defined based on increasingly strict criteria for the design and visuals of the website, with A being the least stringent and AAA being the most demanding in terms of compliance.
Level A (lowest, minimal compliance)
At this level, sites should be navigable with a keyboard, and there should be no keyboard traps. (Keyboard traps occur when a user can access an element on a site using a keyboard, but can’t use a keyboard to leave that element.)
Sites should contain non-text content alternatives, and videos should include captions.
Level AA (mid-range, acceptable compliance)
At this level, a website should be understandable and functional to a majority of users, with or without disabilities. In order to conform with Level AA standards, websites should make navigation elements consistent throughout. Headings should be arranged in a logical order, and form fields should have accurate headings.
Color contrast should be sufficient to enhance readability: 4.5:1 or above. Alt text, or alternative text, should be used so users have a short written description of images to convey meaning in cases when the images cannot be viewed.
Level AAA (highest, optimal compliance)
At optimal compliance, sign language interpretation will be provided for audio and video content, as well as assistance with context sensitivity.
Color contrast should be a minimum of 7:1, and timing should not be crucial to taking part in any website-based activity or function. Functions that “time out” after certain periods of user inactivity can be problematic for all users, but especially people with disabilities.
Quick Guide: ADA Compliance Complete Checklist
To create an ADA compliance checklist, start by dividing your list into four categories: design and presentation; access and navigation; alternative content and description; and language and text.
Design and presentation
- Use proper markup techniques; provide correct HTML and heading tags on lists.
- Guard against HTML errors and broken links.
- Use standard formatting for forms and labels.
- Employ a color contrast ratio of 4.5:1 or higher, but don’t make color essential for navigation or to convey information.
- Disable or don’t allow autoplay for audio and video.
Access and navigation
- Give users multiple options to navigate your website, such as search bars, menus, and site maps. Allow users to bypass headings and go straight to content.
- Make sure your website can be navigated through a keyboard alone, and avoid keyboard traps.
Alternative content and description
- Alt text needs to be in place to convey the meaning of visuals, including graphics, logos, and charts.
- Provide alternatives to audio and video for users with visual or hearing impairments.
- Use captions with videos to provide an alternative to audio.
- Provide transcriptions of audio presentations.
Language and text
- Make page titles clear and descriptive.
- Create website elements so they’re presented sequentially, in a clear and logical manner.
- Make sure text is readable if and when it’s resized, and make sure you can resize it up to 200%.
- Anchor text should clearly describe what is being clicked with descriptive keywords such as “contact us” or “site map.”
- The language on your website should match that of the majority of users and should be identified on-site.
Conduct a Website Audit
Audit your website to see if it is ADA compliant and resolve any issues. There are several website accessibility test checker tools out there. They include:
- WAVE — Web Accessibility Evaluation Tool. Extensions are available for Chrome and Firefox.
- WCAG 2.1 Compliance Checker — Created by the Bureau of Internet Accessibility, which has 17 years of experience working with clients to bridge the digital divide.
- Web Accessibility — Gives you a “health score,” a dashboard, analysis, and help with fixing and monitoring issues.
Review Your Website’s Design Layout
Review your website’s layout structure, design functionality, color, font, and user interface to see if there are any other ways to make your website more accessible and easier to use.
Ensure Your Website Meets the WCAG Accessibility Standards
Review and read over the WCAG policy standards and requirements. Understand the four principles of accessibility and look at your site to make sure they conform, using the checklist as a guide. Ensure your site measures up to the WCAG levels of conformance.
Provide Descriptive Alt-text for All Your Graphics or Images
Ensure all images, videos, charts, or graphics include a description of the image so it can be read by a screen reader.
Ensure Images or Graphics Don’t Flash Continually
At best, flash is distracting. But this kind of flash can have negative impacts on the health of site users. Flash lowers usability for users in general and can trigger seizures in susceptible users. Content that flashes more than three times per second is unsafe. There’s a Photosensitivity Epilepsy Analysis Tool (PEAT) you can download to analyze the risk. Motion animation can also be disabled unless it is somehow essential to functionality; even then, potential alternatives should be explored.
Make Sure Your Website Has Keyboard Accessibility
Your website should be “operable” according to one of the principles of the WCAG. All keyboard functionality should work for all users. People with disabilities should be able to access every link, button link, or webpage without the use of a mouse.
Give Your Website at Least a 3:1 Color Contrast Ratio
Double-check which color contrast ratio you will need to meet the WCAG standards. Any PDF or image-based file should be accessible by anyone without any issues.
Furnish All Videos with Subtitles, Transcripts, and Audio Descriptions
Provide captions, audio descriptions, or subtitles on videos/audio so that people with hearing or visual disabilities can access the content.
Make All PDF Files Easy To Open, Read, and Navigate Through
Make sure PDF files are accessible at all times. Tagged PDFs provide the greatest accessibility. They should be logically ordered so that screen reader users can read the information easily. All PDFs should have descriptive titles (as opposed to generic titles like “Image 1”). PDFs should be in a single language, not bilingual because assistive technology won’t be able to pronounce some words properly. PDFs, like other image documents, should have alt text.
Ensure that Default Fonts Are No Smaller than at Least 16px
Some fonts may be hard to read or access for others, or may not be legible on all computers. Be sure the font sizes on your website are easily readable, and that the fonts you use are universally recognized and accessible. Some fonts that work well across different platforms include Times New Roman, Arial, Courier, and Garamond. Fonts that work on Windows and macOS but not Unix+X include Verdana, Georgia, and Arial Black.
Use Titles, Context, Labels, or Other Heading Structures To Help Users Navigate Through Complex Pages
For users with visual impairments, breaking down content or helping users navigate through the content can be extremely beneficial.
Provide Both Visual and Text Illustrations To Help Explain Complex Ideas, Events, and Topics
Provide both visual and text illustrations so users have different ways of accessing information, and it’s available to the broadest range of users.
All Hyperlinks Should Have Descriptive Anchor Text
If there are hyperlinks, include descriptive text for users so they understand that the underlined text means it’s a link — and they know specifically what it’s linking to. Avoid vague terms and phrases such as “click here.”
Include “Skip Navigation” Links that Go Directly to Your Home Page
Check if the top of each page has a “skip navigation” link. This helps screen readers avoid listening to all the links each time they move to a new web page.
Use Standard HTML in All Your Documents, Images, or PDF Files To Ensure Everything Is Accessible
Check-in and ensure that your HTML website tools are still clickable and functional. Using standard HTML ensures your image files or website tools such as your search bar, sitemap, or navigation links help visitors access your website even when there are new computer software updates.
Create a Website Accessibility Policy Page
Create a website accessibility policy page on your website where it can be easily located, so readers know what to expect from your webpage and understand it’s WCAG-compliant.
By creating an ADA-compliant website so it is accessible for people with disabilities, all users on your site will be able to use it freely and comfortably. Remember, creating a new website takes time, so be sure to give yourself amply time to ensure your website is ADA compliant as well.