Free ADA Compliance Website Checklist

Why You Need an ADA Compliant Website

Any business or public-facing institution which needs to be ADA compliant at their physical location and “that use[s] the internet for communications regarding their programs, goods, or services must be prepared to offer those communications through accessible means as well,” according to an open letter from the Department of Justice.

Any business that has more than 15 full-time employees and is open for more than 20 weeks out of the year is required to follow Title III of the Americans with Disabilities Act by being easily accessible to the general public. Activists have recently begun searching for and suing non-compliant websites; 2250 suits were filed in 2018 alone.

If your website is found to be non-compliant, you will lose thousands of dollars in fines and court fees. You will also suffer a public-relations nightmare when the news media reports that your business was sued for discriminating against the disabled.

While “accessibility” was loosely defined in 1996 when the DOJ letter was published, the Web Content Accessibility Guidelines are now the standard used by the Federal Government for its own web presence and by the courts to assess ADA Title III violations.

Your Current Website Is Probably Non-Compliant

Executives rarely realize that ADA compliance is a concern when shopping for a new website. Those that do often trust that anyone capable of making sleek and attractive websites also makes ADA compliant websites. Unfortunately, web designers are often ignorant of the best practices for ADA compliance, or ignore them to implement exciting new design features.

Many brands’ advertising teams are ignorant of the requirements as well. Others take them as suggestions and ignore major issues like color contrast and font size because it would require rebranding or changes to an ongoing campaign to comply.

An example of a design element with poor contrast and no text that a screen reader can parse.
This is an example of a non-compliant design element. The contrast between the title and image is too low, and the text is part of the image.

If you are unsure of your website’s compliance, test it against our checklist. An hour of your time could save your company tens of thousands of dollars and public humiliation.

Test Your Website for ADA Compliance

We at Sagapixel Web Design have created a checklist to test a website’s ADA compliance. This allows our web design and content creation teams to ensure their work is accessible to the greatest number of visitors and potential clients.

How To Use The Checklist

Testing for ADA compliance requires multiple tools to test different areas of you website. There are a variety of free tools like WAVE that can test for most important compliance factors, but a human review is necessary for things like closed captioning and outlier cases that the tool can’t catch, like reflow problems and pictures with alt-text that doesn’t describe what is in the frame.

Go down our checklist and test for each item. If you pass Tier AA, congratulations! Your business is accessible to most people with disabilities. If you fail any item, you are at risk of a lawsuit. If you fail more than a few criteria, buying a new website will likely be cheaper than retaining a developer to troubleshoot what you currently have.

View are online checklist below, or download a PDF of the checklist to print or view offline.

Checklist

A-Tier Compliance

  • Any and all non-text content has a text alternative that serves the same purpose.
  • Any time-based media, including audio-only and video-only presentations, has an easily accessible alternative.
  • All prerecorded synchronized media has closed-captions.
  • The reading order of any content can be programmatically determined. Content is presented in a logical order, and navigating by keyboard follows this order.
  • Instructions do not rely solely on sensory characteristics, such as color, sound, or visual orientation, to explain how to operate website content.
  • Color is never used as the sole means of communicating the presence of prompts, links, or other visual elements.
  • If audio is programmed to play automatically for more than 3 seconds, a mechanism is available to pause the audio or lower the volume independent of the system volume.
  • Users can access all the functions of a website with only a keyboard.
  • Input fields may not require specific keystroke timing unless the timing of a user’s movements are essential to the function of the field.
  • If a component can be accessed by keyboard, it must also be possible to leave that component using a keyboard. 
  • If it is necessary to have an exit command from an on-page component, it should be a single non-printable key, such as Escape or Tab.
  • Single letter shortcuts must have at least one of the following features:
    • There must always be a way to disable the shortcut. 
    • There is a mechanism to remap the shortcut to a non-printable character.
    • The shortcut only works in a specific component, and is only active when that component has focus.
  • Users should be able to extend or turn off time limits in content, unless that time limit is an essential part of a real-life function, like an auction.
  • Users should be able to hide any blinking or scrolling features. The only exception is for genuine emergency alerts.
  • No feature may flash more than three times in one second.
  • A mechanism must exist to bypass duplicated blocks of content.
  • All page titles must describe the topic and purpose of the page.
  • When a page is navigated sequentially, components must receive focus in proper order when accessed by keyboard.  
  • Any multi-input gesture has a single input alternative.
  • When a function is activated by a click, it must utilize one of the following accessibility features:
    • The down-click alone does not activate the function.
    • There is an option to undo or abort the click.
    • Releasing the pointer button aborts the click.
    • The only exception is when the function is designed to emulate a keyboard or keypad.
  • When a button includes text or images, the name of the button contains that name or describes the visual content of the button.
  • Motion-activated functions must also have a way to activate through the user interface. The only exception is when motion is an essential part of the activity, and the GUI could not possibly replicate the function.
  • The default language of a web page can be determined programmatically.
  • Buttons and other interactive components cannot change their purpose when they receive focus from the user.
  • Changing user settings should not change the context of buttons or interactive elements.
  • Input errors should have a clear name and text description.
  • Any input field should have a clear label and instructions.
  • The name, role, and state of all user interface components can be programmatically determined.
  • Any content or feature implemented with markup language have accurate tags and use unique IDs.

AA Tier Compliance

  • Live synchronized-media content will be presented with closed captions.
  • Pre-recorded media should have closed-captions with audio description.
  • The orientation of a page (landscape or portrait) does not restrict view or operation, unless orientation is an essential feature of the content.
  • The purpose of any input that collects user information is clearly labeled and can be programmatically determined.
  • Normal text must have a contrast of 4.5:1.
  • Text with a font size of 18pt or greater may have a contrast ratio as low as 3:1. Purely decorative text and corporate logos are exempt from these standards.
  • Text must retain all content and functionality when resized up to 200%.
  • Images of text should not be used in any place where actual text would suffice. If the image has no practical alternative, such as presentations of art or antique documents, a description of the image should be available.  
  • Content must reflow into a width of 320 CSS pixels (scrolling vertically) or 256 CSS pixels (scrolling horizontally) when scaled up to 400%
  • User interface components and any non-decorative color separation should have a contrast of at least 3:1.
  • Minimum Text Spacing:
    • Line Height is 1.5x the size of the font.
    • Paragraph Spacing is 2x the size of the font
    • Letter Spacing is 0.12x the size of the font
    • Word Spacing is 0.16 times the size of the font.
    • If a given language or script does not support one of these spacing options, it is exempt from that option for accessibility purposes.
  • When Content Appears on Hover or Keyboard Focus:
    • There should be a way to dismiss the content without changing focus.
    • The content should not disappear as long as the pointer or focus remains on it.
    • The content should not disappear unless the user triggers it (i.e. by changing focus or dismissing the content) or the information becomes invalid.
  • There is more than one way to access a web page within a set of other web pages unless that page is one step of a process.
  • All headings and labels describe the topic or purpose of the content beneath them.
  • The keyboard focus indicator should always be visible where applicable.
  • The language of a text passage is marked programmatically.
    • Exceptions can be made for names, technical jargon, and reasonable vernacular.
  • Navigational elements should share the same design, location, and purpose across web related pages.
  • Input errors are automatically detected and suggestions are made about how to resolve them.
  • If a web page causes a legal commitment, results in a financial transaction, or submits test responses, it must include at least one of these features:
    • The submission is reversible.
    • The website checks for omissions and data errors and gives the user an option to correct them.
    • The user is given a chance to review, correct,  and confirm any information they have entered.
  • The website presents error and status messages to assistive technology even when the user does not give focus to the error message.

AAA Tier Compliance

  • Sign language interpretation is provided for any prerecorded synchronized media.
  • Prerecorded media has closed-captions with extended audio description.
  • Untimed alternatives are provided for video-only media.
  • Untimed alternatives are provided for audio-only media.
  • Content implemented via markup languages and the purpose of user interface components can be programmatically determined.
  • The contrast of normal text is at least 7:1. and bold text is at least 4.5:1.
  • If prerecorded audio is primarily speech, there should be no background noise, or the difference between background noise and speech should be at least 20db. Musical content is exempt.
  • The user should be able to change the format of blocks of text so that: 
    • foreground and background colors are user-selectable, 
    • paragraphs are no wider than 80 characters or 40 Chinese/Japanese/Korean glyphs, 
    • line spacing is at least 1.5 and paragraph spacing is at least 3,
    • Text does not require the user to scroll horizontally when resized up to 200%. 
    • Images of text are purely used as decoration. Logos are exempt.
  • All functionality of a website is accessible with only a keyboard interface.
  • No function on a website should be time-sensitive unless tied to real-world events.
  • Any non-emergency interruptions can be paused or dismissed by the user.
  • When a session expires, users should be able to re-authenticate and resume their entering information.
  • Users should be clearly notified if any data will be lost after a period of inactivity, and an option should be provided to save user data and continue at a later date.
  • Animated motions are not essential to conveying information.
  • Animations can be disabled.
  • When web pages are a connected set, there should be clear visual and programmatic indication of a user’s location.
  • The text of a link should identify the purpose of a link.
  • Text is organized with HTML heading tags.
  • Buttons and other targets for a pointer must be at least 44px by 44px.
  • Alternate input modalities can only be blocked by programming when the restriction is necessary for a valid security purpose.
  • Foreign loanwords, idioms, and technical jargon are defined with text markup or by links to an appropriate dictionary.
  • Abbreviations are defined or can be expanded to show the full term.
  • A simplified version of content should be available when written above a 9th-grade reading level.
  • When the pronunciation of a word is ambiguous, a key to pronunciation should be included.
  • Navigational elements should never change context, unless the user initiates the change.
  • Context-sensitive help or tooltips are always available.
  • When a web page requires a user to submit any personal information, at least one of these features are included:
    • The submission is reversible.
    • The website checks for omissions and data errors and gives the user an option to correct them.
    • The user is given a chance to review, correct,  and confirm any information they have entered.

Compliant Web Design FAQ

What are the official ADA website guidelines?

Despite revisions as recent as 2008, the ADA does not specifically mention websites or internet accessibility. Thousands of lawsuits are filed every year about online accessibility, and the courts have used the guidelines published by the World Wide Web Consortium (W3C), an internationally recognized organization for internet standards, as the model for compliant design. The Consortium’s Web Content Accessibility Guidelines (WCAG) have been published since 1999. These standards were adopted as an ISO Standard in 2012, and are the basis for web accessibility laws across Europe and Asia. The United States now mandates WCAG AA-Tier Compliance for all government websites, and federal judges reference these standards when ruling about website accessibility and Title III ADA violations.

How often do compliance guidelines change?

The guidelines were first published in 1999, with major revisions in 2008 and 2018. WCAG 2.1 is the latest update, published in June 2018. It contains 17 new criteria, mostly aimed at accessibility for smartphones and other small touchscreen devices. 

Meeting the 2.0 guidelines will still result in an accessible desktop site. However, the 2.0 standards were published 11 years ago and did not predict the smartphone revolution. As a result, there are no guidelines for making compliant mobile websites, and little guidance for touch and gesture-based operating inputs. If your website was built to be ADA compliant before 2018, it may no longer meet the minimum standards for compliance, especially when accessed on a smartphone.

What is the difference between A, AA, and AAA compliance tiers?

Tier A are elements and functions which absolutely must be present for someone with a disability to use your website. If an A-tier feature is absent, your website is simply not accessible. 

Tier AA contains elements which are strongly recommended for accessibility. If any AA features are missing, it will be very difficult for people with visual impairment or physical disabilities to navigate your website. For ADA compliance, this is the minimally acceptable tier of accessibility.

Tier AAA contains the most advanced accessibility features. Not all of these features are possible on every website or digital platform. It is recommended to include as many AAA features or partial AAA features as possible, but full AAA compliance is not a reasonable goal for most websites or business types. 

A screen capture of a web page that is not accessible to screen reading devices.
This is an example of non-compliant input fields. None of the elements have titles. There are no instructions for completing a response. A screen-reader would not be able to process it.

The Principles of ADA-Compliant Web Design

Perceivable

  • Adaptable: Content should not lose structure or functionality when presented in an alternate format, such as when magnified or processed by a screen reader.
  • Distinguishable: Visual and audio content should be clear and distinct, including the contrast between text and background colors and clearly marked hyperlinks and buttons.
  • Time-Based Media Alternatives: There should be easily accessible alternatives for audio and video content, such as a full transcript of sound clips and written explanations of any graphics or charts.

Operable

  • Keyboard Accessible: All functions of a website should be available with just a keyboard. Gestures and mouse usage should never be the sole input method.
  • Navigable: There should be clear indications of where a user is on a website, and how to get to various connected pages. All buttons, links, and input fields should be clearly labeled and easily distinguished.
  • Accessible Gestures and Inputs: Functionality should never be dependent on path-based or multi-point gestures or pointer activity, and any input should have an abort or undo option.

Understandable

  • Readable: Any text content should be able to be parsed by assistive equipment. 
  • Predictable: Web pages should operate in consistent and logical ways. Navigation buttons should retain the same context before and after use, and any change in context should be clear to the user.
  • Input Assistance: Web pages should help users to avoid and correct possible mistakes. Any error messages should have a clear explanation, a suggestion to resolve it, and a label.

Robust

  • Backward Compatibility: Websites should be capable of interfacing with previous generations of assistive technology, as well as meeting all current standards.
  • Designed for Assistive Technologies: All elements of a website should have names, roles, and values which can be programmatically determined by screen readers and other assistive devices.
  • Markup and Status Messages: Text markup and important status messages should be programmed so as to be accessible to screen readers, even if the message is not currently in-focus.

Should Small Business Be ADA Compliant?

Small business, most seasonal businesses, and religious institutions are legally exempt from most Title III requirements. A family-owned sandwich shop is not legally required to install a wheelchair ramp, and local hobby shop can’t be sued for forgetting to put alt text on their website’s product photos. Even so, it makes sense for even the smallest company with an online presence to think about ADA compliance.

Being non-compliant means more than just hard-to-read text and difficult navigation. When essential elements like alt-text on images and instructions to complete input fields are missing, customers may be unable to complete a purchase. Some older design features may even keep those with assistive screen-reading technology from seeing your phone number and address. Being easily accessible online makes business sense for nearly any small shop.


Would you like Sagapixel to work for you?

Related Posts

Call Now Button