How to Design a WordPress Website for ADA Compliance

by | Mar 18, 2020 | Web Design

So you’re in the middle of designing your WordPress website. Maybe you’re switching themes, or you’re making the move to WordPress for the first time. Either way, this is the perfect time for you to consider ADA compliance and ensure that your website meets the standards of compliance.

What Is ADA Compliance?

ADA stands for Americans with Disabilities Act, which is a U.S. federal law passed in 1990 to protect citizens with disabilities. It offers similar protections against discrimination as the 1964 Civil Rights Act. Why is this important to know for your website? Title III regulations detail how businesses need to provide accommodations for people with disabilities by removing barriers that would hinder access to goods or services. For example, in 1990, that would mean a business offering wheelchair ramps in addition to stairs.

Because the internet has become an indispensable utility for everyday life, the Department of Justice began to reassess Title III in recent years to encompass virtual barriers along with physical ones. ADA came back to the public’s attention with the news from the Winn-Dixie case in 2017 and its subsequent appeals. While it’s legally murky whether a website falls under Title III or not, you can work to meet compliance now while you’re building a new site or redesigning your existing website.

How to Ensure Your Website Adheres to ADA Compliance

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

  1. Install an ADA Compliance Plugin
  2. Make Sure Content Is Readable
  3. Add ALT Text to Images
  4. Reconsider Third-Party Features
  5. Use Clear, Unique Calls-to-Action
  6. Check Your Site with the WAVE Browser Extension

1) Install an ADA Compliance Plugin

If you’re developing a website with WordPress, you can install a plugin to help with ADA compliance. The WP Accessibility plugin can fix some of your site’s compliance issues and add features such as skip links and enforcing ALT attributes on images. You can read all about what the plugin does in this WordPress Accessibility Handbook.

There are also plugin add-ons that can help with compliance. If you use Gravity Forms, for example, 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 with ADA Compliance is ensuring your content is readable. That means making sure that it can be read. A good guideline is 7-10 words per line. You can adjust column widths or font sizes to accommodate that guideline. You can also use media queries to adjust the text for mobile device use. That gives your content a good opportunity to pass compliance.

The next step is to ensure your text isn’t sitting above a background color with alpha transparency. That will flag an error when you test it in most cases. We recommend using a firm hexadecimal number code for background colors against an alpha transparency.

Lastly, you’ll want to make sure that the color of your text has enough contrast against the color of your background. The WP Accessibility plugin has a contrast tester so you can try different color combinations—and there are others available online as well.

3) Add ALT Text to Images

While you’re designing your site, get in the habit of adding ALT tags to every image you upload to your pages and posts. Doing this will save you a massive headache later. The WP Accessibility plugin has a tool that will force you to add ALT text to your images, or it will let you mark them as “decorative.” That means that the image has no real context to the content on the page. One upside of adding ALT descriptions to the images on your website is it can also benefit your search engine optimization (SEO).

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 same destinations or having no ALT tags on media (Note: Instagram does have an ALT option you should explore). Iframe applications can be next to impossible to make ADA compliant since you don’t control the code.

Also, if you add videos from a platform like YouTube or Vimeo, look into getting their content transcribed. You can pay a service to do the transcription for you, or there are some automatic alternatives, such as 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

We recommend getting into the habit of changing call-to-action link text to unique text. So, 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’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 evaluation tool browser extension (available on Chrome and Firefox), 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 may be some work that your developer may need to handle. Get this on their radar before you launch your website. They may need to write some jQuery scripts to add or remove attributes to HTML tags to make the site fully accessible.

Why ADA Compliance Is Important for Your Business

If it seems like a big investment of your business’ time and resources, here are some reasons why you should still consider ADA compliance:

  • Compliance can improve your SEO ranking.
  • The cost of updating your site for compliance is less expensive than court costs.
  • By including everyone, you’re not missing out on new customers.

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

Need help with your brand’s website? Hurrdat offers web design services, including ADA compliance evaluation and adjustments. Contact us today to learn more about how we can help your business!

You May Also Like…