If millions of people can’t access your website, you aren’t reaching your customers. An ADA website compliance checklist can help you meet the needs of your visitors.
Did you know 13% of Americans age 12 and older have hearing loss? They can’t hear your catchy music or facts spoken on a video.
26.9 million adults report they have vision loss. They can’t see your product or service by viewing a photo on your website.
The Americans with Disabilities Act (ADA) regulations help companies communicate with all consumers.
The original ADA addressed discriminatory practices related to physical locations. It began to regulate websites in 2009. Today, websites can adapt so people with disabilities can access online information.
ADA compliance is vital for any company that does business on the web. That’s why we put together the ultimate ADA website compliance checklist below. Keep reading to learn more.
Understanding the Americans with Disabilities Act
In 1990, US President George H. W. Bush signed the ADA. It focused on stopping discrimination based on disabilities. ADA made it illegal to treat people with disabilities unjustly. The ADA allows anyone with an impairment to receive the same, equal opportunities as everyone else.
To be protected by the ADA, an individual must have a disability, defined by the ADA as a “physical or mental impairment that substantially limits one or more major life activities, a person who has a history or record of such an impairment, or a person who is perceived by others as having such an impairment”.
The ADA changed public buildings, jobs, and transportation to give people with disabilities equal access. Public and private organizations must follow the ADA Guidelines in person and online.
ADA Regulations & Websites
By being ADA compliant, a website allows people with physical and mental disabilities to access the information it has to offer, opening the doors for future fans, customers, and clients for an individual or organization down the road.
Although the ADA does not specifically mention websites, the United States Department of Justice often refers to the Web Content Accessibility Guidelines (WCAG) 2.0 and 2.1, created and promoted by the World Wide Web Consortium (W3C).
About the World Wide Web Consortium (W3C)
The World Wide Web Consortium (W3C) is an international organization that helps create and promote website standards.
When it comes to accessibility, W3C offers a variety of strategies and resources to help organizations and individuals develop user-friendly websites to provide access to people with disabilities.
Their standards for accessibility are outlined in the Web Content Accessibility Guidelines (WCAG).
Web Content Accessibility Guidelines (WCAG)
W3C developed the Web Content Accessibility Guidelines (WCAG) to make websites more accessible to people with disabilities, such as those with visual or hearing impairments.
So, when people refer to a site being “ADA compliant,” what they mean is that the site is “WCAG compliant.”
Principles of WCAG
The WCAG focuses on four main principles; each principle focuses on a list of criteria that determines the accessibility of a website.
- Perceivable – A website’s information and user interface must be presented to users in a way that they can easily perceive it.
- Operable – A site’s user interface and navigation must be user-friendly.
- Understandable – The website’s content and how the user interface operates should be easy to understand and use.
- Robust – Finally, a website should be adaptable to a variety of browsers and assistive technologies even after updates.
Is it perceivable?
Is all the information on your website easy to find and process? For example, can users visit your site and immediately gain access to content? Can your content be identified and understood by assistive technologies?
- Does it have alternative text? Alternative text, or alt-text, is essentially a word or phrase that helps describe an image to people with visual impairment. Alt-text is necessary for ADA compliance because it allows screen reading software (i.e., NVDA, JAWS, etc.) to read out these short descriptions to users. However, besides benefiting accessibility, alt text can also help search engines accurately display search results that include your images to visually impaired users, which also helps with your website’s search engine optimization (SEO).
- Are there alternatives for time-based media? If your site features media such as audio or videos, do you have an alternative method to make this content accessible for those that may be visually or hearing impaired? Consider the addition of video and audio transcripts that can be read with screen reading assistive technology. Make sure there are captions in videos with sound.
- Is your site content adaptable? Is it possible for your content to be presented in multiple ways losing none of its information or structure? For example, sometimes, your site content may need to be presented in a more straightforward layout for mobile devices.
- Is your content distinguishable? Your website should make it easy for users to see and hear content with its design elements. For example, there should be no dependence on colors to convey information; users should be able to perceive and understand content based on text available instead. If there is text over an image, there should be a contrasting background that separates it from the picture, so it is easy to read.
Is it operable?
How functional is your site for users? Is it easy for people to navigate and use different interface components?
- Is it keyboard accessible? Users should be able to access and navigate through your website with the sole use of a keyboard (even without the assistance of a mouse).
- Can users control the timing of media elements? If your site features a slideshow or video, users should have the ability to adjust the timing or pause the content on display.
- Does your website content avoid triggering physical reactions? Some users may have epilepsy, notably triggered by flashing or blinking lights. Make sure your website does not have these elements to avoid provoking a physical reaction in users.
- Is your website navigable? Each of your web pages should have titles and headings that briefly describes the content’s topic or purpose so users can determine where they are in a site. A site map and sequential navigation bar make it easy for users to move between different pages. Links should have descriptions—either through the text itself or otherwise—that identify their purpose or where they lead.
- Are there input modalities? Your site should be easily accessible beyond the use of just a keyboard. For example, some users may be using touch screens or gestures with their computers or devices, so your website should accommodate these accessibility features.
Is it understandable?
- Is the site content readable? The default language should be easy to determine by accessibility technologies. Also, any uncommon or abbreviated words should have explanations or a way for applications to provide explanations.
- Is your website predictable? Users who visit your site should already be familiar with how to navigate around it based on previous websites they have visited. The navigation and basic site layout should be consistent with other sites of a similar nature.
- Does your site offer input assistance? Your site should feature labels or instructions for users who may need to input information into a form. There should also be a “help” function where users can look for additional assistance if specific instructions are not clear. Finally, there should be a way for users of assistive technologies to identify errors or automatically input pre-determined information.
Is it robust?
Make sure that your website is compatible with current or recently updated browsers and assistive technologies.
- Is your site compatible with all browsers? Make sure that your website is compatible with all current or recently updated browsers, like Firefox, Google Chrome, Safari, and Microsoft Edge (Windows Explorer).
- Is your site compatible with assistive technologies? Check the site’s parsing, use of names, roles, and values, and status messages to make sure they are complete and can be programmatically determined by assistive technologies.
What Makes a Website Non-ADA Compliant?
A non-ADA compliant website is usually one that does not follow the principles outlined in the WCAG. In other words, non-compliant sites fail to be perceivable, operable, understandable, and robust.
For example, using specific colors, fonts, and file types could render your website non-compliant with WCAG and ADA standards if they discriminate against people with visual or hearing impairments.
Those with visual impairments may have difficulty seeing specific colors or have trouble reading smaller font. People with hearing impairments may find it challenging to enjoy videos on a website that does not have subtitles.
Dangers of a Non-Compliant Website
Non-compliance puts your company at risk for lengthy and expensive legal battles. There were 2,285 ADA website lawsuits filed in federal courts in 2018. That’s a 181% increase over the previous year.
An ADA lawsuit costs more than legal fees. It can damage your brand, reputation, and sales.
If you don’t have experience with disabilities, it’s harder to think of ways to make your site adaptable. That’s where the guidelines help.
Assistive Technology helps people surf the web. Tools include text readers, magnifiers, and screen readers. When you update a website, make sure its compatible with these tools.
ADA Website Compliance Checklist
How do businesses or web builders and designers begin to determine whether their site meets ADA standards?
The Web Accessibility Standards (WAS) fall into several categories. They address making the site easy to navigate and understand.
If you’re launching a new website, make sure you meet all the standards before you publish. Audit an established site to make it accessible to everyone.
Use a combination of manual screening (ask yourself if it is perceivable, operable, understandable, and robust) and automated testing (using software or online tools).
Manual screening for ADA website compliance involves looking at the different aspects of your site’s design—including fonts, colors, and the content that is present—and comparing it to the principles outlined in WCAG.
Because the WCAG is a technical standard, it is often recommended that web content developers, web authoring tool developers, or web accessibility evaluation developers perform the site audit.
Here’s a list of things to look out for:
1. Website Presentation
The first challenge is the website design. Is the layout is complex? Can the visitor adjust it?
Declutter the design and give users a way to adjust the size and color of text, fonts, and images. Follow these rules:
Accurate and Descriptive Text
The text should be a clear, accurate description of the page’s content. This includes page titles, headings, and link anchor text.
Color
Don’t rely on color alone to separate elements on the site. You must provide an alternative like titles or captions.
Forms
Forms are hard for screen readers and must be very clear. Add coded labels to each field of the form.
Give clear instructions on making corrections. Use standard formats for the name, date of birth, address, etc.
Headings
Use the hierarchy of subheadings within the page content. Each page has one <H1> tag followed by descending headers <h2> to <h6> as needed.
Consistent Labels
All images need descriptive alt tags. Imagine you cannot see the image when creating the alt tag. Use the same labels and tags for identical elements.
Code
It’s hard to navigate a website with HTML errors, broken links, and error pages. Make sure the site has quality code.
Text
Use larger fonts to help people with blurry vision and other sight issues. A bigger size makes words easier to read without eyestrain.
Color Contrast Ratio
All text must have a color contrast ratio of 4.5:1 against the background for legibility.
Putting black type on a light background is easy to read. Dark gray type placed on a light gray background is not.
Links
Don’t underline any copy unless it’s a link. Links within paragraphs must use at least two distinctive markups to separate them. Markups include underlining, bold, italics or a different color.
Zoom Text
The ADA rule for resizing is up to 200% of the original size. The text must be readable when enlarged.
Layout and Navigation
Maintain a consistent layout throughout the website. Use the same framework, header, and footer navigation on each page. Keep it the same whether it’s in portrait or landscape mode.
Main pages can have different layouts, but categories should match. Product pages must all use the same layout.
2. Content Alternatives
There are ways to handle alternative content to meet ADA requirements.
Don’t Use Images of Text
Never use an image of text instead of the text. Exceptions to this rule include logos, branding, infographics, and charts with labels.
Alt Text for Images
Each image must have a descriptive alt text. This includes every photo, logo, infographic, and chart.
Charts and infographics need also need a descriptive caption. This connects the alt text to the info in the image.
Text reader software can read the descriptions of images.
Text Transcripts
If you host digital videos or audio on your site the page must have a text transcript. The transcript is live text on the page.
It must provide a clear and complete understanding of the video or audio. This provides information to deaf or blind visitors.
Closed Captions for Video
Every video with discernible voices and sounds requires synced closed captioning.
Data Tables
Large table data needs accompanying text that explains the content in the table. Another option is to turn a large table of data into smaller ones.
Extra Documents
PDFs, PowerPoint presentations, documents, and spreadsheets must meet all accessibility standards.
3. Individual User Control
Give your visitors control over their experience with these features.
Pop-ups
Don’t use automatic pop-ups for subscriptions, special offers or commercial reasons. Pop-ups for help are okay. You can have pop-ups with instructions or a time warning.
Autoplay
Autoplay for video and audio is not permitted.
Pause
Allow users to pause content that updates or refreshes. Rotation advertisements are okay.
Adjustable Time Limits
Time limits must have a warning before expiring. Give users the ability to extend the limit up to 8x the original limit before the countdown begins.
There are some exceptions, like time limits on an auction bid.
Submissions
Give users the ability to review and correct important information before final submission. This applies to personal, financial, and scheduling information.
Unexpected Changes
No element on your website can change unexpectedly. Use soft transitions that aren’t surprising.
4. Website Usability
ADA compliance depends on how easy it is for a person with a disability to navigate your site. Put the following options in place for the best results.
Language
Set a default language for your website.
HTML Format
HTML is easy for text-to-speech and similar applications to read. Avoid PDFs if you can. Optical character recognition devices can’t read or recognize PDFs.
Skip Navigation
There should be a skip navigation link at the top left of every page. You can make the link visible or invisible.
Skip navigation technology lets users skip links or headings. They can go right to the main content.
Search Function
A search function box in the same place on every page is ideal. A search option on the homepage alone is the least you can do.
Focus Indicator
A focus indicator box shows all the links and fields.
Keyboard Only
Make the entire website useable with the keyboard alone.
If someone can’t use a computer mouse they can be a specialized keyboard. Make sure your website supports keyboard navigation.
Sitemap
You must provide a link to the sitemap on the homepage. It’s better to provide it on the footer of every page of the site.
5. Assistive Technology Considerations
People with disabilities have resources available to help them navigate the world. Thanks to technology, some of those tools help them surf the internet.
These amazing tech tools include:
- Text-to-Speech Services
- Closed Captioning
- Text Readers and Magnifiers
- Screen-reading Software
- Optical Character Readers
Consumers with disabilities can use these tools with ease on a compliant site.
6. Provide Customer Support
Another part of ADA compliance is providing support for disabled users. Make it easy for users to submit feedback.
Address any concerns as an essential part of customer service. Be ready to change something when a rule or need isn’t met.
Take it a step further by asking people with disabilities to test your site. Ask for suggestions on ways to improve it.
Schedule regular audits to guarantee ADA conditions are on point.
11 Free ADA Website Compliance Checkers
Of course, if you are not sure whether or not your site is compliant just by looking through it, some tools can help.
The W3C provides resources for companies and website builders who want to ensure their sites are ADA and WCAG compliant, including a list of web accessibility evaluation tools.
The following tools mentioned here are completely free for businesses to use:
1. Color Contrast Accessibility Validator
Offered by A11Y, the Color Contract Accessibility Validator is a free website compliance tool designed to identify color contrast issues according to WCAG criteria.
To test your site, all you need to do is copy and paste your website URL into the provided box and click “Check Contrast” to start screening.
The results will display a list of color combinations that do not fulfill the contrasting requirements set by WCAG. Each result will also come with recommendations on how you can overcome the problem of becoming compliant.
Additionally, this online tool provides a way for web developers and designers to test color pairs to see if they are sufficient in contrast to meet WCAG standards.
2. Access Assistant Community Edition
Access Assistant, by Level Access, is an extension designed to help developers repair problems in site accessibility without having to go deeply into a website’s coding.
The overlay tool can automatically fix issues once the auditor has defined them.
What makes this tool extra handy is that its automated feature allows developers to correct problems that are consistent throughout the entire website at the same time rather than having to skim through each page.
3. Access Continuum Community Edition
Another extension by Level Access, Access Continuum, is designed to perform regular accessibility testing against WCAG 2.0 on websites.
All results include an overall accessibility score with details about any accessibility violations the tool finds. In addition, the results can be saved and downloaded so that your web development team can create a plan of action for improving site accessibility.
The tool allows website developers to test five pages of a site for free before requiring sign up.
4. Accessible Brand Colors
Accessible Brand Colors, by Use All Five, is an online tool that helps developers and designers identify how compliant color pairs are to WCAG standards.
With this tool, users can input a brand’s colors, which will generate a chart of how each color can be used together for accessibility. If a color is not up to WCAG standards, the tool will find similar colors that may work better.
5. ARC Toolkit
Developed by The Paciello Group, the ARC Toolkit is a collection of accessibility tools (such as the ARC Toolkit Panel and ARC Toolkit Sidebar Pane) that can be integrated with other automated systems to help developers discover accessibility problems according to WCAG 2.0 and 2.1.
6. Button Contrast Checker
The Button Contrast Checker by Aditus is a free online tool that is used to test the buttons on your site for contrast under WCAG 2.1.
It examines not only the default button appearance, but also a variety of other button states, including hover, focus, active, and disabled. To start checking, you will only need to input your site’s URL in the provided box.
The results will let you know if the buttons have sufficient or failing contrast, and will also offer a guide to design contrasting under WCAG that you can follow. All results can be saved and shared with others for later reference.
7. Domain Accessibility Audit
I build the Domain Accessibility Audit application by Michigan State University to scan websites for accessibility violations automatically. All generated reports include statistics about found violations across various pages and the site as a whole.
8. EqualWeb
EqualWeb offers a free accessibility widget designed to help adjust color, font, and cursors to fulfill WCAG 2.1 standards on websites.
The widget also provides assistance in creating highlighted links and headers, images descriptions, and text reader adaptability.
9. MAUVE
MAUVE (Multiguideline Accessibility and Usability Validation Environment) can be used to audit single web pages or full sites.
The online tool scans HTML, CSS, and even dynamic sites.
10. TAW
TAW, but CTIC Technology Centre, is an online tool that automatically analyzes the accessibility of websites based on WCAG 2.0 and 2.1.
Upon screening content, it identifies areas of WCAG that are unfulfilled and even notes if an additional manual review is necessary. These results and more can be saved and shared for later reference.
11. WAVE
WAVE by WebAIM is composed of a collection of tools that help site developers make sites more accessible. Not only can WAVE identify accessibility errors based on WCAG, but it can also aid in a manual review where it deems it is needed.
*Note: Although all of the above tools are useful for auditing a site for ADA and WCAG compliance, it is essential to remember that any type of automatic testing has its limitations. For example, some tools may only be designed to screen for a site’s accessibility in operation, but not in its design. Certain screening tools may test desktop versions of websites, but not the mobile version.
Also, some automatic screenings do not cover an entire site—maybe just a page or two—and are, therefore, not exhaustive. For that reason, you may find that there are quite a few instances where you will need to rely on human judgment (using the previous questions for manual screening) as a way of determining whether your website is ADA and WCAG compliant.
Make Your Website ADA Compliant
Don’t underestimate the importance of this ADA website compliance checklist. People with disabilities have the legal right to equal access to your site.
Contact us today to learn how to make your website ADA compliant. We’ll help you give all your customers an excellent online experience.