Steps You Can Take

There are two parts to bringing your website into compliance; the code and structure of your website, and the actual written and graphic content. Be sure to keep good records of the work you are doing on your website, that will help your defense in a lawsuit. You should be able to demonstrate that your business has made a good-faith effort toward accommodation, should you ever wind up in court.

1) In your website editing software check the photos on your site. They all need "alt" tags. The content in those alt tags needs to describe the photo. At example: alt="Description you type in of your photo". In your website editor click on the photo and then look for the alt tag or "Description" then fill it in. Wordpress fails at this as it automatically adds alt tags but uses the name of the image. That won't pass, you'll have to switch to code view and make the changes.

2) Add an accessibility statement to your website. You can copy the text from ours to your site by clicking here. You wouldn't have that big red text in the middle until you actually have a compliant section to send your visitors to. Be sure not to do this step until you have actually started making ADA changes to your website.

Be sure to use an email address and phone number that you have continual and instant access to because you will need to respond immediately to any complaints. So you will be creating a new page on your website with that info. Link to it from the footer and top menu.

Note: In some courts companies are losing the website lawsuits because they did "not provide any affirmative showing that its current website is ADA-compliant, and will remain that way, beyond asserting so and citing to the website itself."

In other words, if all you did was put up the notice saying you are working on ADA Compliance... that is not enough. Click here to read more.

3) Be sure you have Breadcrumbs installed on your website. If you don't have submenus you won't need that. A submenu is when you mouseover a menu item and more menu items show below. Breadcrumbs is a line of text at the top of your website that tells the visitor which page they are on and the path they took to get there. In Joomla there is a built in tool for that in Modules, in Wordpress you might need to install a plugin if your theme doesn't offer that.

One other thing you need to do is install a Sitemap. ADA Compliance requires two ways to navigate a website. A search bar will work, but if the returned page is not ADA Compliant you'll be in trouble. So a Sitemap will work well for this. Joomla and Wordpress both have extensions that will do this. However you can create one yourself by going to this website there you'll use the output to create a new page on your website.

4) If you have any forms on your website take them off. Unless they comply with the info found on this site. But I can almost guarantee your forms won't meet the standard.

If you are using an outsourced form like Jot Forms or Google Forms you might want to keep those. We believe you would have some liability but the form company would have more. However if your form is only a contact form you should switch to just listing your contact email address.

5) A person with the equivalent of an 8th grade education must be able to understand your content. Difficult words must be explained and the first use of abbreviation on the page must be followed by full explanation. So review all your written content to be sure that is done and you can use this tester to be sure you're written content passes.

6) Any links on your website that open in a new window need to indicate that. There are a few options you have to fix this:
a) change all your links to open in the same window.
b) change the link text to say it opens in a new window.
c) add a little icon that shows it opens in a new window.

If you do "a" you'll be using the simplest method. But it is unclear if that is always compatible. It causes other problems for the disabled person because the complete interface changes (because they are on a different site).

If you do "b" it is the next easiest method and will pass.

"c" requires adding some special code to your website, it's pretty cool but probably not something you'd want to take on yourself, so let me know if you want us to do that for you.

One other thing you need to make sure of, your links have to be descriptive. They can't just say "click here to read more" or "read more". We use "click here to read more" if it is Very clear what that refers to. But better to change your link text to say something like "Click here to read more about our phone apps."

7) Your meta page titles must be descriptive. This is the title that shows in the browser bar when you are on the page, it is also the title that shows in Google for the listing for that individual page.

To set this you have to go into the more detailed sections of your editor. This title does not show on the page content. In Wordpress you can use the Yoast plugin to set those. Once you install Yoast scroll to the bottom of each page or post. In Joomla you'll just click on the Publishing tab for each article, or go to the menu and click on the details there.

A descriptive title for your "Services" page could simply be "Our Services" or "Services". But if the meta title for that page is just the name of your organization that will be a violation of the rules.

8) If you have any audio or video on your website or use pdfs or word docs you'll need to decide how to handle that. The guidelines for those are very difficult, visit this link for some info.

9) Iframes (embedded videos use iframes) Iframes must have descriptive text as you see in this example: < iframe title="Campus Tour" src="campustourvideo.html" >Description here< /iframe > To add that you would switch to code view in your editor and type in the description. Typically we'll use something similar to: "Video of our campus tour, to view that click here: https://vimeo.com/555555 but that video may not be accessible"

That description only partially fulfills the guidelines and does not address the video guidelines, only the iframe guidelines.

10) Pdf & Word Docs This will probably require you to rebuild your PDF and Word docs, see the links below:
washington.edu/accessibility/checklist/tab-order
adobe.com/acrobat/using/create-verify-pdf-accessibility
office.com/en-gb/article/improve-accessibility-with-the-accessibility-checker
washington.edu/accessibility/documents/word/

11) Review the text content on your website, go to each page, post, module and widget on your website then switch to code view and see if there is any code setting the color or size of the text. If you see anything that says "font-size:" or "color" you'll need to remove that. Be sure to copy out all the code as a back up first in case anything goes wrong. Be very careful in removing those items as a missed quote mark will stop your page from displaying.

Joomla comes with a great tool for removing all that type of formatting.

A simple way of removing all that extra code is to copy the text from the front end of your website and paste it into a simple text editor. Then copy from there and paste it back into your editor.

You can leave any "heading" sizes. So if you see < h1 >, < h2 > or < h3 > you can leave that.

The reason you need to remove the color and set font sizes is because ADA compatibility requires allowing the viewer to set the font sizes and colors.

12) You have now spent 30 to 60 hours working on your website but this next step will require a bit more time. What you have done so far is to make the content on your website ADA compatible. Next we need to work on the overall design.

You have two options on presenting your ADA compatible info. You can either make your current website design/template ADA compatible, or you can offer an alternate website version that is compatible. Because you must offer the viewer a choice of background and text colors we usually go with offering an alternate website version. For now that approach is legal, we believe this will work for a few years at least.

If you are using Wordpress there are some ADA plugins you can use to get you closer to ADA compatibility. There is one Wordpress theme that comes close to compatibility, you should check that out to see if you want to purchase it.

For Joomla we have an ADA template you can purchase. Here is an example of a website that only has one version and is close to ADA Compatibility: rainshadowmensconference.com You'll notice the top tool bar, it is quite ugly, but is legal.

Usually we offer an ADA Compatible version such as: ashouseofcakes.com

There are many rules the design must follow. First you'll need to decide which way you want to make your site ADA Compatible.

How you proceed depends on a few things:

Wordpress
Search for an ADA compatible theme. Then you'll need to purchase and install it on your website. Then switch your theme to that version. This will take several hours and Wordpress offers no way to do this without disrupting your current website. Be sure to study over the template before you make the change so you can quickly get your website up and running again. Do be aware that we have seen no Wordpress templates that are truly ADA Compliant.

Joomla
You have two choices:

  • Make your primary site ADA Compatible.
    You can search for a new template also. We have found none that are close to compatible, except the one we developed. If you choose this option the appearance of your website will change substantially.
  • Make an ADA Compatible version.
    You can install a second template that is ADA compatible. Then you can add a menu link or link at the very top of the page to that version.

Each of these options requires substantially different steps. You'll want to review these links to be sure the template you choose is close to what is needed:
w3.org/WAI/standards-guidelines/wcag/
w3.org/WAI/WCAG21/quickref/
webaim.org/standards/wcag/checklist

Each option above will require 20-40 hours or more. If you are not familiar with Wordpress themes or Joomla templates you can find lots of information online about how to work with them. Each theme or template will come with a set of instructions, take the time to study those. From our research we have established that Squarespace and Wix do not offer ADA Compatible themes.

Because each option requires such different methods this is our last tip on ADA Compatibility. If you email us with which option you choose we can get you a little more info, but this step will require quite a bit of independent study.

If you have done all we suggested above you should be close to ADA Compliancy. There will still be a few issues but if you contact us after you have done the above we can give you a bit more direction. Once you have completed all these steps be sure to use these tools also to check for compliancy:


References

(All links below open in new window)
w3.org/WAI/standards-guidelines/wcag
w3.org/WAI/WCAG21/quickref/
webaim.org/standards/wcag/checklist


Tools

(All links below open in new window)
color.a11y.com/Contrast/
wave.webaim.org
webaccessibility.com
alumnionlineservices.com/scanner
https://chrome.google.com/webstore
w3.org/WAI/ER/tools


ADA Website Compliance Assistance

If you have questions about your organizations liability for an ADA non-compliant website or if you need help getting your website protected give us a call or text today, 951.970.6172 or email mike@pritchardwebsites.com.