Feb 10, 2021

ADA + WCAG Compliance Guide for Websites

by Kennan Smith

web development

web design

ux design

< BACK

The

ADA (Americans with Disabilities Act)

is a piece of legislature that requires any “place of public accommodation” to be accessible for disabled people.

Simply put, if you are running any store, restaurant, hotel, event, etc., then you are required by law to make sure that disabled people can easily access your building and any services or products that you offer. Some common examples of this law in action are wheelchair ramps, braille on signs, and handicap stalls in bathrooms. This act became law in 1990, before it was standard for businesses to offer their services over the internet, so it was not written with the internet in mind. However, it was written just vaguely enough that you could reasonably interpret “place of public accommodation” as including websites that are meant to be accessed by the public. Because of this loose wording, there have been

successful lawsuits against businesses

that did not make their websites accessible for disabled people. This has set the precedent that websites need to be accessible for people with disabilities and any site that is not accessible is at risk of a lawsuit.

So how can you make sure that your website is ADA compliant if the ADA was not even written with websites in mind? Luckily, there is a set of guidelines that have been written as a sort of mirror for the ADA guidelines, but specifically written for websites. These are called the Web Content Accessibility Guidelines, or WCAG for short, and we took the time to read through the latest release so that you don’t have to. Below, you will find a summary of each major guideline listed in the most up-to-date version of WCAG. We also included some useful tools for testing your website’s accessibility. If you can get your website to be compliant with these guidelines, then you will be covered for ADA compliance and can rest assured that you are safe from any threat of legal action against you and your business.

Note: Much of the WCAG uses wording that isn’t exactly crystal clear. Therefore, some of our summarized points may not be immediately clear either. In case you don’t completely understand any of these guidelines, you can visit

the official WCAG page

for more information.

WCAG 2.1 Summary

Perceivable - Information and user interface components must be presentable to users in ways they can perceive
1. Text Alternatives
  1. Any non-text content must include a text alternative that serves the same purpose
2. Time-Based Media
  1. Audio-only and video-only options must be available
  2. Always include captions (video-only option)
  3. Just like in 1a, always need a text alternative that serves the same purpose
3. Adaptable
  1. Create content that can be presented in different ways (ex: simpler layout) without losing information or structure
4. Distinguishable
  1. Make it easier for users to see and hear content including separating foreground from background
    1. High contrast for colors (usually a 4.5:1 contrast ratio is minimum)
    2. Pause/resume controls for automatically-playing media
    3. Text resizing, no images of text
Operable – User interface components and navigation must be operable
1. Keyboard Accessible
  1. Make all functionality available from a keyboard
    1. Keyboard navigation is somewhat complex. For more detail, visit
      https://www.w3.org/WAI/WCAG21/quickref/?showtechniques=122#principle2
2. Enough Time
  1. Provide users enough time to read and use content
    1. Adjust time limits, pause/resume/hide controls, etc.
3. Seizures and Physical Reactions
  1. Do not design any content in a way that is known to cause seizures or physical reactions
4. Navigable
  1. Provide ways to help users navigate, find content, and determine where they are.
5. Input Modalities
  1. Make it easier for users to operate functionality through various inputs beyond the keyboard
  2. Again, keyboard navigation is somewhat complex. For more detail, visit
    https://www.w3.org/WAI/WCAG21/quickref/?showtechniques=122#principle2
Understandable – Information and the operation of the user interface must be understandable
1. Readable
  1. Make text content readable and understandable
2. Predictable
  1. Make web pages appear and operate in predictable ways
3. Input Assistance
  1. Help users avoid and correct mistakes
Robust – Content must be robust enough that it can be interpreted by a wide variety of user agents, including assistive technologies
1. Compatible
  1. Maximize compatibility with current and future user agents, including assistive technologies

Sources

Tools (Development, Testing, etc.)

General site testing
- Wave
  - Simply enter a url and you get a very detailed overlay on the page that highlights many, but not all, accessibility issues
- Axe plugin for Chrome
  - Similar to wave – just run the plugin on any page that you want to test and you will get detailed information on many, but not all, accessibility issues
Collection of very useful accessibility software
Dyno Mapper wrote an article
that lists 25 of the best tools for testing accessibility.
- They, of course, put their own tool at the number one spot on the list, but it is still an excellent list of tools that are all very useful.

Now you have all of the information and tools you need to make sure that your website is ADA-compliant and protected from any lawsuits. In addition, once your site is accessible, you will be getting traffic from disabled users who would otherwise have left your site as soon as they landed on it.

Whether it’s for protection from lawsuits, to widen your potential customer pool, or both, updating your site to be accessible is a must.

Have any questions about accessibility? We'd be happy to help out however we can. Give us a call at

303.771.5675

or visit our

Contact

page.