ADA Website Checklist

On July 26^th 1990, President George H. W. Bush signed the Americans with Disabilities Act. Since then lawsuits targeting sites over ADA violations have skyrocketed. Ensure your site is ADA compliant to avoid lengthy and expensive legal battle with this ADA website checklist.

What is Americans with Disabilities Act (ADA)?

The Americans with Disabilities Act was published in 1990. It’s a civil rights law that prohibits discrimination of people on the basis of their disabilities. It also encourages organizations, institutions, businesses and other establishments to provide accommodations to people with disabilities so they can have the same level of access to services as everyone else.

The law was later amended in 2008 to fit the conditions of modern society. The amendment broadened the term “disability”, extending the act’s protection to a larger demographic.

There’s a lot of misconceptions about ADA compliance. This is mainly because it’s relatively new in the web world and many agencies and developers have little to no experience in implementing it correctly. Here’s the facts:

• Title III of the Americans with Disabilities Act is being interpreted to include websites as “places of public accommodation”.
• Websites with significant inaccessible components can be seen as discriminatory against persons with disabilities, in violation of Title III of the ADA.
• The ADA is a strict liability law which means there are no excuses/defenses for violations (e.g. ignorance, web developer is working on it, etc.).
• No current legal prescription exists for web accessibility but WCAG 2.0 AA has been commonly referenced as a guide.
• Newly published Web Accessibility Standards (WAS) make accessibility easier.
• Plaintiff’s lawyers are filing ADA lawsuits as fast as they can.

ADA Website Compliance vs. Website Accessibility

Before I start, let’s clear up two terms that are closely intertwined but distinct: ADA website compliance vs. website accessibility.

The law that primarily governs accessibility is The Americans with Disabilities Act (ADA). Even though it doesn’t mention websites anywhere, Title III of the ADA has been been interpreted by US courts to apply to websites.

For our websites to be ADA compliant, they need to be accessible. Website accessibility can mean two things depending on the context:

1. the process of making your website so that its content and functions are accessible to those with disabilities, or
2. how accessible your website is.

In other words, ADA is the legal side, are you in compliance with the law? And accessibility is the technical or developmental side, how well can persons with disabilities access your website?

ADA Website Checklist

Web Accessibility Standards (WAS)

The technical requirements of WCAG 2.0 are grouped under three levels: A, AA and AAA. Each conformance level has an increasingly higher standard of accessibility. WCAG 2.0 was designed with three levels in order to provide more flexibility for different situations. For example, an internal policy in a government department may require the highest possible standard of accessibility – that would be Level AAA. In other situations, it may be enough to meet level AA requirements of the ADA website checklist.

# Level A Compliance

Level A of WCAG 2.0 is the most basic level of web accessibility. If you meet Level A of the ADA website checklist and stop there, you’re unlikely to be compliant with the ADA. That’s because Level A leaves many barriers in place for people with disabilities. These barriers are not onerous to remove.

• Images have alternate text that can be read by screen reader software.
  Alternate text tags allow users to interpret page content without seeing images.
• Recorded video content includes captions.
  Text captions are an important alternative to audio and allow the hearing impaired to use content.
• Video or audio-only content is accompanied by text transcript or description.
  Like captions, a text description can also communicate what a video or audio clip is about. This can be in the form of a paragraph around the video.
• Links are provided to media players required to view content.
  If a media player like Flash Player is needed to use content, there should be a link to where the software can be downloaded.
• Headings are presented in logical order.
  Main headings (h1) come before smaller subheadings (h2, h3 and so on).
• “b” and “i” tags are replaced with “strong” and “em.”
  “Strong” and “emphasis” tags can specify more than just visual changes like “bold” and “italics” to web browsers.
• There are no empty links or heading tags.
  Empty links and headings make for sloppy code and can confuse users of screen reading software.
• Presentation does not rely solely on color.
  Presentation that relies solely on color is inaccessible to the visually impaired. Information should be conveyed using broad, easily-interpreted techniques.
• Automatically-played audio does not occur or can be stopped.
  It is strongly recommended that audio does not play automatically. However, if audio plays, a keyboard user should be able to stop it.
• The keyboard can be used to navigate the site.
  Keyboard access is crucial for visually-impaired users. The keyboard should be capable of meeting all functionality on the site.
• Keyboard focus is never stuck on one particular page element.
  When proceeding through a website using the keyboard, keyboard focus should not get locked to any position. Focus should keep moving with each tap.
• Time limits provide notifications to the user.
  If a user has limited time to do something, they should be warned before time expires. This can be in the form of a pop-up or other notification.
• Automatically scrolling or blinking content can be stopped.
  Any page element that automatically moves or changes should be able to be stopped in a certain position.
• No strobe effects or rapidly flashing colors occur on the site.
  Flashing colors are generally considered to be bad practice as they are very disruptive, especially for users with epilepsy.
• “Skip navigation” functionality allows keyboard users to quickly access content.
  “Skip to content” functionality is often accessed with the Tab key and allows a user to skip to the main body of a page. Especially useful with screen reading software, it ensures the user does not have to move keyboard focus through the full length of every page.
• Page titles clearly and succinctly describe page content.
  Page titles usually appear in the top of the browser window and communicate the main idea of a page. They should be of reasonable length, closer to a sentence or less rather than a paragraph of text.
• Buttons and links are clearly and logically named.
  Buttons and links are “action items” the user can interact with, causing something to happen. The action that occurs should be predictable, clearly communicated, and never a surprise.
• The language of each page is identified in code.
  Language code in the header of each page marks what language the code is written and meant to be read in.
• Elements receiving focus do not change content in a substantial way.
  Sometimes, keyboard focus changes the appearance of a page element. For example, hovering a mouse over a link might change the link’s text color, or giving an element keyboard focus might make it larger. This change should not significantly affect the layout or readability of the page.
• Invalid form input is identified to the user.
  If the user enters invalid information into a form control, they should be notified of the issue. For example, when filling out an email address form, an email address must be entered. If an invalid email address is entered, the user should know of the problem.
• Forms have labels and legends that can be read by screen reader software.
  Every form input should have a label to describe what type of information should be entered into it. Additionally, a legend can be used to group multiple form inputs.
• There are no major validation errors.
  The website passes W3C HTML validation with no major problems.

# Level AA Compliance

Level AA is a happy medium that most businesses currently strive for. Level AA conformance satisfies all Level A criteria and more, while still allowing for more flexible design choices, making this level not too light but not too restrictive in its effect on your site design. This is the most popular level of conformance most projects strive for in the ADA website checklist.

• Live video or audio content includes captions.
  Live streaming video or audio is accompanied by captions or ongoing text descriptions.
• Contrast ratio between text and page backgrounds is at least 4.5-to-1.
  Color contrast between readable and background elements should be sufficient for reading. This is a core design element that matters for everyone, especially the visually impaired.
• Text on pages can be resized to 200% while still maintaining form.
  When zooming in on a page and enlarging text, page elements must accommodate the new sizing. Text resizing cannot drastically change page layout or negatively affect usability.
• Images are not used where text can achieve the same purpose.
  Text is highly accessible and should be used whenever text can successfully communicate an idea. Images should only be used where necessary.
• Pages on the site can be accessed in multiple ways.
  A user looking for a page should be able to find that page in more ways than one. For example, the navigation bar, site map, and search function can all move users through the site.
• Keyboard focus is visible and clear.
  As keyboard focus moves down the page, highlighted elements should appear noticeable enough such that the user knows where they are focused.
• The language of content is identified in code with any language changes.
  Any section of a page presented in a language other than the site’s primary language should identify the language of that section.
• Menus and buttons are used consistently regardless of the user’s location in the site.
  Menus and buttons should appear with the same presentation and order regardless of where the user is on the site. This consistency is especially critical for main navigation areas.
• Users are given suggestions on how to solve input errors.
  Form input errors the user receives should be shown with a useful suggestion on how to resolve the error.
• An error prevention technique is used whenever the user is entering sensitive data.
  Forms transmitting sensitive information such as financial or legal data should have some degree of error prevention. This means either: the form submission can be reversed; data is checked and returned to the user if anything is found to be invalid; or a final confirmation is offered.
• Underlined text that does not provide a link is removed.
  Underlined text universally suggests “this is a link.” Therefore, underlined text that does not link is misleading and should be removed. Italics can be a great alternative.
• Redundant links on the same page are eliminated or minimized.
  Multiple links to the same location from the same page make screen reading software read the links multiple times. Often a page can be restructured such that a link is not needed more than once.

# Level AAA Compliance

According to the World Wide Web Consortium, which develops WCAG 2.0, “It is not recommended that Level AAA conformance be required as a general policy for entire sites because it is not possible to satisfy all Level AAA Success Criteria for some content.*” In other words, some requirements in the Level AAA ADA website checklist, like sign language interpretation for live web events, may not always be easily put into place.

• Give visitors an alternative option for live video.
• Don’t use any time limits.
• Let users browse without interruption.
• Provide explanations for any abbreviations.
• Use headers to break up large blocks of content.
• Give users options when it comes to how the screen is presented.
• Provide explanations of difficult or complex words.
  Write for reading level of 9 years of school and avoid or explain all jargon.
• Tell users where they are on the page.
• On forms, validate input and allow input to be changed without exception.
• Provide instruction for completing tasks, especially forms.
• Elements on the site do not change unless the end-user asks.
• If re-authentication is necessary, data entered is saved.
• Allow users to customize their view.
• Contrast is at least 7:1 relative to the background.
• Provide sign language translations for videos.

More on ADA Website Compliance

• Improving Video Accessibility with WebVTT
• Incorrect hreflang implementation — It’s a simple fix!
• Accessible CSS Generated Content
• WAVE – Web Accessibility Evaluation Tool