How to Design a WordPress Website for ADA Compliance

by | Last updated Jun 13, 2023 | Web Design

Read Time: 6 min read

Summary: TL;DR: ADA compliance is crucial for websites to ensure accessibility for all users, especially those with disabilities. By using ADA compliant WordPress themes and plugins, like WP Accessibility, websites can meet ADA standards. Key steps include installing an ADA compliance plugin, making content readable, adding ALT text to images, reconsidering third-party features, using clear CTAs, and checking compliance with tools like WAVE Browser Extension. ADA compliance not only benefits users but also improves SEO, reduces legal risks, and expands customer reach. Ensuring ADA compliance is a way to show commitment to inclusivity and can lead to tangible business returns. Don't miss out on customers - make your website accessible to all.

So you’re in the middle of designing your WordPress website. Maybe you’re switching themes or making the move to WordPress for the first time. Either way, this is the perfect time to switch to ADA compliant WordPress themes and make sure you have an ADA compliant web design.

YouTube video

What Is ADA Compliance?

ADA compliance is the adherence of accessibility guidelines for electronic and information technology as established by the Americans with Disabilities Act (or ADA), a U.S. federal law passed in 1990 that protects citizens with disabilities.

ADA Title III regulations detail how businesses must provide accommodations for people with disabilities by removing barriers that hinder access to goods or services. Because the internet has become an indispensable utility for everyday life, the Department of Justice reassessed Title III to encompass virtual and physical barriers. ADA came back to the public’s attention with the 2017 Winn-Dixie case and its subsequent appeals.

In other words, when building a new website or redesigning your existing site, it needs to be ADA compliant.

How to Ensure Your Website Adheres to ADA Compliance

There are six steps you should take to ensure your website is ADA compliant.

6-step process infographic to check that website is ada compliant1) Install an ADA Compliance Plugin

If you’re developing a website with WordPress, you’ll find it’s inherently ADA-friendly and adheres to Web Content Accessibility Guidelines (WCAG). The guidelines have three levels of conformance to accessibility with A being the lowest, AA in the middle, and AAA at the highest.

At WordPress, there’s an accessibility team that keeps WordPress code at level AA with each update. Because there are still aspects that don’t quite meet ADA compliance, you should use an ADA compliance WordPress plugin, such as WP Accessibility. This plugin can fix some of your site’s compliance issues and add features like skip links and enforce ALT text on images. You can read all about what the plugin does in this WordPress Accessibility Handbook.

While WP Accessibility is the most common plugin, there are other ADA compliance plugins you can use. Some of the best ADA plugins for WordPress include:

Additionally, if you use Gravity Forms, you can download WCAG 2.0 form fields for Gravity Forms, which will make your forms compliant. Or if you use Divi as a theme framework, you can install Divi Accessibility, which fixes some of Divi’s accessibility shortcomings.

2) Make Sure Content Is Readable

One of the biggest barriers to ADA compliance is ensuring website content is readable to anyone visiting your site. Make sure to use proper header formatting with a logical hierarchy, and keep sentences short and concise (A good guideline is 7-12 words per line). You can adjust column width or font size to accommodate that guideline. You can also use media queries to adjust the text for mobile device use. This will give your content a good opportunity to pass compliance.

You should also ensure text isn’t sitting on a background color with alpha transparency. In most cases, this will be flagged as an error when you test it. We recommend using a firm hexadecimal number code for background colors against alpha transparency. Make sure the color of your text has enough contrast against the color of your background, as this will be beneficial to those who have color blindness. The WP Accessibility plugin has a color contrast tester, and there are other color contrast checker tools available online as well.

3) Add ALT Text to Images

Make a habit of adding ALT tags to every image you upload to your webpages and blog posts while you’re designing your site. The WP Accessibility plugin has a tool that forces you to add ALT text to your images, or it will let you mark them as “decorative.” This means the image has no real context to the content on the page. An upside of adding ALT descriptions to the images on your website is it can also benefit your search engine optimization (SEO) efforts.

4) Reconsider Third-Party Features

If you’re introducing third-party features on your website, they can unfortunately work against your ADA compliance efforts. For instance, displaying social media feeds from Instagram, Facebook, and Twitter can cause issues, such as having multiple links going to the same destinations or having no ALT tags on media (Instagram does have an ALT option you can explore). Iframe applications can be next to impossible to make ADA compliant since you don’t control the code. Use the object or embed tag as an alternative to Iframe.

For text on your website page, use text-to-speech plugins. BeyondWords, ResponsiveVoice, and Trinity Audio are a few popular WordPress tools people use. These plugins are beneficial to people who have visual impairments. Also, if you add videos from a platform like YouTube or Vimeo, look into getting your content transcribed. Adding subtitles and audio descriptions to your visual content will benefit those who are blind or hard of hearing. You can pay a service to do the transcription for you, or there are some automatic alternatives like exporting YouTube’s closed captioning feature, which is auto-generated when you upload a video to the service.

5) Use Clear, Unique Calls-to-Action

Get into the habit of changing call-to-action link text to include unique descriptions. For example, instead of saying “Learn More,” change it to “Learn More About This Service.” If you have a page full of CTAs titled “Learn More,” you don’t offer any helpful context to your audience, and you’re most likely going to get flagged because this confuses screen readers.

6) Check Your Site with the WAVE Browser Extension

With the WAVE web accessibility extension (available on Chrome, Firefox, and Microsoft Edge), you can check your website for ADA compliance. If you see a lot of errors, don’t panic. Many errors are global and happen sitewide. If you fix it in one place, that change will reflect across your site.

The level of compliance you’re going to want to shoot for with this evaluation tool is WCAG 2.0/Level AA. That means you need to fix Level A issues and consider Level AAA issues. There might be some work your developer may need to handle since it involves writing some jQuery scripts to add or remove attributes to HTML tags to make the site fully accessible.

You can also complete a manual audit of your website by using WCAG as an ADA compliance checklist to ensure you’re meeting ADA standards. Manual audits can be more effective than automated audits because of how thorough they are, and they can give you an idea of what an actual person will experience when using your website.

When conducting your ADA compliance audit, consider some of these basics:

  • User Experience: Ensure all users are able to use your website regardless of ability. This includes resolving any issues with the navigation bar, search bar, or any other tools available on your site.
  • Visual & Audio: Check that elements like patterns and shapes are able to be seen by everyone. Make sure transcripts, subtitles, and closed captions are functioning properly and are easily accessed.
  • Text: Use sans serif fonts that are at least size 12, pick consistent readable fonts, and bold keywords for emphasis.
  • Color: Elements like borders, icons, and even whitespace can be used as a means of communication. Make sure your colors contrast enough so readers can see the text.

Why ADA Compliance Is Important for Your Business

Following ADA compliance standards for your online business shows your customers you’re committed to providing accessible products or services. You can also see tangible returns on business time and resources like the Disabled Access Credit, which can be a tax deduction of up to $15,000 a year. Here are some additional reasons why you should consider ADA compliance:

  • Compliance can improve your SEO ranking.
  • The cost of updating your site for compliance is less expensive than court costs if you have an ADA violation.
  • By including everyone, you’re not missing out on new customers, and your website will reach a wider audience.

Doing the right thing for people with disabilities will help your business in the long run by winning over their business. ADA compliance shouldn’t be a pain point, but rather a sign you care about your community and making your website accessible for everyone.

Need help with your brand’s website? Hurrdat offers custom Web Design services, including ADA compliance evaluation and adjustments. Contact us today!

You May Also Like…