How to Design an ADA Compliant Website [FREE Checklist]
The Americans with Disabilities Act (ADA) is well known for ushering in the advent of wheelchair ramps and parking spaces for the disabled. As the technology evolved, so too did the responsibility of website designers: now they need to create an ADA-compliant website to meet the needs of the disabled on the internet. Is your website ADA compliant?
Now website designers consider how each element on a web page can be adapted to fit the needs of their disabled users. Everything should meet the four categories laid out by the ADA so that each element can be used and understood by all.
You can use the guidelines below to learn more about ADA compliance in web design and perform an accessibility audit on your website.
3 Media Web is a Boston Web Design Agency with a history of helping brands grow online.
What is ADA Compliant Web Design?
Simply put, an ADA-compliant website is designed for everybody. It should allow those with all disabilities to use your website in a way that works for them. This is a win-win for everyone, as a more accessible website means more traffic, and more traffic helps your business grow.
In 2010, the Department of Justice announced that it intended to adjust its Americans with Disabilities Act legislation to consider how websites should work to accommodate people with disabilities.
In 2016 there was a significant case involving the University of California, Berkeley. In that case, the DOJ said the school should adopt the World Wide Web Consortium’s Web Content Accessibility Guidelines (WCAG) to make their website accessible. Those guidelines are now widely accepted as the ADA-compliant standard.
7 Steps to Design an ADA Compliant Website
So, how can you create an ADA-compliant website? Here are seven steps toward building a more inclusive site and adopting the WCAG.
1. Evaluate Your Current Site
- Perceivable
- Operable
- Understandable
- Robust.
Use the ADA guidelines as a starting point to create a blueprint for your site.
2. Choose ADA Compliant Graphics
Carefully chosen graphics are a big part of an ADA-compliant website. When you include graphics, they should not flash more than three times per second. Any more flashing, and you could inadvertently induce a seizure in someone browsing the page. Graphics should also have a description/caption that can be read aloud to the visually impaired. If you have informative or fun visual content, you want everyone to enjoy and learn from it!
3. Add Alt Text and Readable Fonts
Making your site perceivable and content marketing readable for all potential users takes a lot of thoughtful choices. A variety of things fall under the umbrella of perception. To get started, provide alt-text for all images in your code. Alt-text captions allow site readers to describe your images audibly.
Fonts are another crucial component of accessibility. Use fonts that are easy to read, such as Georgia, Open Sans, and Quicksand. Avoid putting a light font color on a light background; a combination like yellow text on a pale background causes people to strain to read it. Equally problematic is a pale font on a stark black background. Stick to light backgrounds with dark for most of your content.
4. Make Website Features Logical
An ADA-compliant website must also be understandable to a broad audience. The site should operate predictably and have helpful labels over content and media blocks. For example, put a clear “x” in the upper corner of a pop-up to show users how to close the window. The site should be built to avoid user error and has readable instructions on all forms where users are expected to enter information.
We can help your site become accessible and meet all ADA Compliance guidelines.
Learn more about the Accessibility Services from 3 Media Web here to make a bigger impact online.
5. Code Your ADA Compliant Site with Standard HTML Tags
The robust requirement of ADA recommendations is the most technical one. It means the code should be readable by an assistive reader. The code on your site must use standard HTML tags. You should also provide documents in a text-based format at all times, even when you also offer a PDF. Complex image documents can’t be understood by software that reads text aloud for visually impaired website users and will not pass ADA compliant standards. The good news is that most website platforms, including WordPress, are designed to operate using modern code format.
6. Make the Site Keyboard- and Pause-Friendly
The primary function of the “operable” category of ADA-compliant standards is to ensure your site can be navigated using a keyboard alone. Not all users can interact with a touchscreen or grip a mouse. This category also relates to the overall navigation. For instance, readers should be able to pause content or slow down automatic scrolling/slideshow movements. Eliminate any videos that autoplay and have a time limit. And, of course, make sure that all video interactions and pausing can be completed using keyboard functions.
7. Remain Up-to-Date on ADA Compliance Changes
Remember that ADA needs are ongoing. New technologies are made available for people with disabilities, and they should be accounted for in your web code. A good start is making sure the text is easily readable, and the code works with assistive readers; it’s true. But a genuinely compliant (and usable) ADA compliant website will adopt new web design best practices as they emerge.
Design an ADA Compliant Website That Works For Everyone
Creating an ADA-compliant website takes time. When scoping out this project, allow several months — not days.
Making your site compliant with the ADA means all users will feel comfortable on your site and be able to use it for its intended purpose. In the end, everyone wins.
Get The ADA Compliance Web Design Checklist
Want a little more help to ensure your website meets all of the criteria?
Get The ADA Compliance Web Design Checklist to work through your website to make it fully accessible for all website users.