Designing for ADA Compliance

Creating Great Websites for Everyone

Designing for ADA Compliance

What is ADA Compliance?

ADA Compliance is nothing new in the web world, however it's becoming a hot button with its implications with lawsuits. The Americans with Disabilities Act (ADA) written in 2010 encourages self-regulation of accessibility standards. The Department of Justice is currently developing regulations to provide specific guidance to the entities covered by the ADA. They currently encourage following the Web Content Accessibility Guidelines (WCAG) 2.0 written by the W3C on how to become accessible until the DOJ defines the regulations. However, that does not mean website discrimination will be tolerated, as seen in recent lawsuits.

Websites should be as accessible as any other user interface as well as any form-factor such as a laptop, desktop, tablets and mobile phones. Failing ADA compliance creates frustrating and unusable experiences for people with physical disabilities. Achieving and maintaining compliance not only helps you avoid litigation, but allows you to reach over 50 million disabled people living in the United States that are affected by these guidelines.

While this may seem to stifle your design, if you’re doing your due diligence, you’re not only providing some protection for your client, but also representing their brand to its fullest audience by creating a website that everyone can appreciate.

Success is not counted by how high you have climbed but by how many people you brought with you.

– Dr. Wil Rose

How does this affect my design?

In most cases you're going to be working retroactively unless you’ve started a project with ADA in mind, or your client has made it a priority. In any case, first start by familiarizing yourself with the guidelines. Do not go out and start browsing government websites for ideas or you will get severely depressed.

If you have been designing sites that validate with the W3C validator then you have a head start and a appreciation for standards, kudos. If that’s the case the good thing is you are probably 90% WCAG Level A compliant. Unless you plan on becoming an expert in accessibility or usability (another set of standards) you cannot guarantee that your website design will be 100% risk-free compliant, that’s what a good lawyer is for.

This is where other validation tools come in handy, as your site must pass Level AA (Level Up!). For the designer, the contrast ratio for text and background colors has the most visual repercussions. It’s not as simple as you would think as font choices and sizes against the background color affect the pass/fail requirements. A free tool I use is the WebAIM Color Contrast Checker, this allows for a quick check for colors while you're creating compositions and color pallets. The hard and fast rules can get fuzzy when text is on top of an image, to cover your bases and use a background color as well, so if images are turned off you don’t have something like white text on a white background. Speaking of fonts be sure use a scalable unit, like em’s, as that’s another requirement. Do not lock-in your design to a fixed pixel width, if you’ve been designing sites since the iPhone came out this should not be something new.

Trials and Errors

If this is new to you, be ready to learn some new tags and attributes.

Testing your prototypes before getting into production will save you time and effort, free services generally allow for 1 page at a time, so you can test your templates before you have a completed full site. Just like rock climbing, it’s best to be redundant, so I always use three different tests. I’ve found over time that each has their own caveats and find different errors.

If this is new to you, be ready to learn some new tags and attributes. You will most likely be surprised at what you thought was correct, or is correct for whichever HTML version you are using, but not for accessibility. If you're looking to manually fix ADA issues, WebAIM and Powermapper can help identify issues. This will be a matter of auditing your site and making modifications. You may find out that your site is already fairly compliant, or you may find hundreds of errors, it all depends on your coding practices. You must make any modifications that are labelled “Errors”, just like W3C validation most edits will be for your own code and any 3rd party APIs will be out of your control. In all likelihood after you’ve made updates and there are no errors, nothing will be too noticeable to you… hurray, your design survived!

If your site needs to be compliant quickly and painlessly, we recommend accessiBe within minutes you can add it to your site and be 100% compliant and rest easy, saving thousands of dollars in development time and other services.


Other items to consider are downloadable content such as PDF’s, these also must be compliant. If they come up as errors, let your client know. As a website designer, this should not be a burden, but an opportunity to create something that is a win/win for everyone. Should you take the extra time to design and develop ADA compliant websites?, short answer is yes, but make sure your client understands that you are a designer, not a lawyer, and make sure your proposals cover your extra time.

by: Gary Steffins