The Americans with Disabilities Act (ADA) passed in 1990 came about through efforts by the U.S. Government to protect disabled individuals from discrimination due to their physical ailments. It defines what businesses and those interacting with the public must do to accommodate everyone equally.
Understanding ADA Compliance
Most people think of wheelchair ramps or special parking spaces when it comes to accommodating those with disabilities. Virtual spaces like a website or an app may also be required to follow ADA standards. The Title III section mandates the need for all public places to remove barriers to access for the disabled.
There’s still some uncertainty amongst online publishers as to how to properly comply with ADA standards. The Department of Justice, or DOJ, initially proposed changes in 2010 that were intended to standardize the requirements for media accessed on the web. Several lawsuits brought against different websites produced contradictory rulings which ended up creating even more unclarity. Then in 2018, the DOJ decided to withdraw their ADA compliance recommendations.
Although the DOJ guidelines have been removed, Web Developers tasked with building websites for public accommodations must still follow ADA standards when developing the infrastructure for their project. Failing to do so could put the client at risk for lawsuits or penalties for non-compliance.
How ADA Affects Website Design
Many legal experts recommend using the Web Content Accessibility Guidelines set forth by the World Wide Web Consortium, also known as the W3C. The most recent standardized version is WCAG 2.0 (version 2.1 is scheduled for release later in 2018). The W3C guide outlines the three possible levels websites should conform to when attempting to become ADA-compliant. By having three different levels available, developers have the flexibility of conforming to ADA standards based on the specific layout(s) of their website.
- Level A – This is the lowest compliance level.
- Level AA – Also includes level A compliance standards
- Level AAA – Also includes all A and AA compliance standards. This is the highest compliance level.
The higher the compliance level, the more effect it could have on your website design and functionality. We’ve highlighted some important UX and functionality requirements for developers to pay attention to. Level AA is considered by most to be the “industry standard” and Level AA WCAG 2.0 was the version the DOJ was attempting to standardize. But you may want to aim for a lower or higher level of compliance depending on your site requirements.
Level A ADA Compliance Notes
- Add alternative text to images or any other non-text sections on your site.
- Allow users an alternate way to access audio- or visual-only content.
- Structure your code in a logical manner and group related information together.
- Never use presentations that rely only on color.
- Avoid having audio components play automatically.
- Add captions to videos that contain audio.
- Give users control when it comes to manipulating content.
- Make page titles useful and easy to read.
Level AA ADA Compliance Notes
- Everything in Level A compliance plus…
- Add sign language interpretations for videos.
- Put captions on live video.
- Make keyboard focus clear.
- Have navigation structure that is easily understood.
- Properly use form fields and elements related to user data input.
- Make audio descriptions available for video content.
Level AAA ADA Compliance Notes
- Everything in Level A and Level AA compliance plus…
- 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.
- Tell users where they are on the page.
WCAG Principles of Compliance
Your final website layout should adhere to the W3C’s four principles of ADA compliance. The primary principles of WCAG ADA compliance are:
- Perceivable – Refers to how usable your content is to anyone who accesses your website. Can they accomplish their purpose using the functionality you’ve provided? This is where things like image alt text or audio descriptions make a big impact.
- Operable – Users should have no issues working with the controls you’ve provided. How easy is it for someone to access different functions from their keyboard?
- Understandable – Anyone visiting your website should be able to read and interpret the content you’ve provided. That means making the font bigger for those with vision problems, or helping the users enter information into forms without errors.
- Robust – The code used to build your website should function in the most common web browsers.
HTML Semantics and Alt Tags
These suggestions will help you apply ADA standards to the core components of your websites.
- Check that you’ve added an alt tag for each image on your site. Both simple and complex images should have a clear text description. If there’s a link embedded with the image, describe precisely where the visitor will end up if they click on the image.
- Embedded videos should also have clear text descriptions.
- All tables should have identifiable <th> headers. All rows and cells should be associated with the correct table header.
- Refrain from using strobe effects or any flashing images.
- Any plug-ins or applets should be easily accessible by programs used by the disabled.
- Organize form fields in a logical order.
- Provide visitors using a text reader with a “Skip Navigation” button.
These labels describe objects read by assistive technology. They would be used to inform users of the function an object performs, like navigational buttons in a menu. Keep in mind that using these labels will override any alt tags you may otherwise use with objects.
Keyboard Tabbing Through Content
One of the recommendations made in the HTML section was putting objects in a logical order. You should also make sure that users can use their keyboard to navigate through these fields as well. It needs to be intuitive and make sense so visitors with limited eyesight can still get through your website with the help of programs specifically designed for the disabled.
You don’t want keyboard tabbing to send your users to a field they’re not anticipating. Failing to account for this confuses users and will prevent the disabled from using your site as intended.