ADA Compliance: A Beginners Guide for Business Owners and Programmers

The Americans with Disabilities Act, commonly referred to as ADA compliance, encompasses standards for creating websites that allow those with disabilities to fully utilize those websites. But for business owners or programmers just learning about the scope of ADA Compliance, it can be a bit overwhelming.

In this article, I’ll break down the most common issues and pass along links to my favorite tools for ADA Compliance at the bottom of the article.

I am not a lawyer and cannot give legal advice.

Unfortunately, depending on how your website is programmed, making it ADA compliant could cost anywhere from a couple hundred to thousands of dollars. With that level of cost involved, you might be wondering why you should invest in making your site ADA Compliant.

Why Website ADA Compliance Matters

From a business perspective, those with disabilities – such as visually impaired or hearing impaired – make up around 20% of the population. If your website isn’t compliant, you’re at risk of losing 20% of your audience immediately. That’s not an insignificant number: if you have a 5% conversion rate, you could be losing 1 in 5 sales.

Beyond the business loss, making sure your website is useable by those with screen-readers is a way you can personally contribute to making the world a better place for everyone.

Finally, if those two reasons didn’t convince you to put some time and money into making your website ADA compliant, in California in January 2019, the Ninth Circuit ruled that Dominos’s website must comply with the Americans with Disabilities Act (See Courthouse News.com’s article about the case). This comes on the heels of a 117% increase in businesses being sued over a lack of ADA Compliance from 2017 to 2018. The Bureau of Internet Accessibility is questioning whether the number of websites sued will triple in 2019. With the California courts being seen as more friendly to ADA, we might be seeing a major increase in these lawsuits in 2019 even among smaller businesses.

Keeping Your Website ADA Compliant for Business Owners

For most business owners, you’ll need to bring in a developer to confirm your site is ADA compliant. But ADA compliance isn’t just a one-time thing. Anything you add or adjust on the website should continue to follow the ADA rules so your website remains accessible to everyone.

ADA Compliant Images

When people think ADA compliant, typically the first thing that comes up is images. Every image on your site should have an alt tag. If you add an image to a blog post, write an alt tag. If you switch out an image on a widget, set an alt tag.

For WordPress, the easiest way to make sure your images stay ADA compliant is by adding an alt tag every time you upload an image. When you upload an image into the Media section or add an image using the “Add Media” button on a page or post, you’ll see an “alt” field. This is not the same as the title or caption fields. The alt tag is specifically for screen-readers. The title tag is the text that will show up if someone hovers over the image, and the caption will show up directly below the image (as a caption). If you add the alt tag when you upload the photo, then barring poor coding, every time you use this image on your site in the future, you’ll have at least a default alt tag.

However, anytime you add this image to your site in the future, you should make sure your alt tag is descriptive of the photo in the context. If you were reading the text to someone and couldn’t show them the image, how would you describe it? Your description might vary depending on how the image is relating to the text.

The only images that shouldn’t have alt tags are decorative images – essentially images that are part of the design. If you use an image as the bullet point, make sure those images’ alt tag is the word “decorative” so that screen-readers know to skip over them.

ADA Compliant Links in Text

Make sure you re-phrase/remove any “click here” link text . Even for normal users, using “click here” is not a good idea; it’s vague and confusing. When you add a link to text, make sure the text explains what that link is and where it goes. For example, I might say “Check out my portfolio“. The entire phrase is linked so people can know immediately where that link is taking them, as opposed to saying “to see my portfolio: click here”.

Using ADA Compliant Headings

Heading tags (H1, H2, H3, H4, H5, H6) are extremely important for the user with disabilities. Getting these right can also help your SEO, so make sure they’re being used correctly.

The Headings should not be used for sizing, but for outlining the page. Your page title should be H1 (coded dynamically, typically), while each section below should start with an H2. Underneath those H2 sections, you might end up with sub-titles (H3) or even sub-sub titles (H4).

You want to make sure you don’t skip over headings (go from H1 to H3), and you want to make sure the headings are good explanations for the content below. Avoid “cute” headings or headings that don’t make sense on their own.

A user should be able to skip through the page by Headings to find what they’re looking for.

Business Owner’s Checklist

For business owners, here’s a quick checklist you should use when updating your website:

• Are you adding text over images? Is it clearly readable?
• Are you adding pie charts or other items dependent on color? Don’t rely only on color to communicate the information. (see below for color contrast information)
• Are you adding text over a background with color? Check the contrast is at least 4.5: WebAIM Color Contrast Checker
• Did you add a description of the image into the “alt” field for any images? Make sure it includes any text that’s a vital part of the image (ie. if you add an image that includes a coupon code)
• Are your H1-H6 tags in order? Do they clearly communicate the information below them? Do they correctly outline the information on the page?
• Are your link titles descriptive? (Do not use “Click Here”)

Making A Website ADA Compliant: Technical Aspects

While you might be completing all the day-to-day items to keep your website compliant with links and images, there are some items that will need to be done at least once by a developer and then checked up on every 6 – 12 months.

ADA Compliant Links – the Coding Side

Some links don’t use text for linking. For example, when you have links to your social media sites, many people only use icons. Instead of adding text into those link, use the tag “aria-label”. You would use this tag like the following:

<a href="/link-goes-here" aria-label="">Facebook Icon is here</a>

You can copy and paste the aria-label=”” into any link created and add the text for that label. For a Facebook icon, you could do it like this:

<a href="/link-goes-here" aria-label="Facebook Profile">Facebook Icon is here</a>

But this isn’t just true for Facebook icons. If you’re linking an image to somewhere, make sure you have an alt tag on the image and also add an “aria-label” to the link to further help screen-readers.

See Mozilla’s page for more information on aria-label.

Color Contrast and ADA Compliance

One of the most often overlooked parts of ADA compliance is color contrast. There are a surprising number of people who are at least partially color blind in the world: 1 in 12 men, and 1 in 200 women. This calculates out to a huge actual number of people: in Britain, almost 3 million people are color blind in some way.

There are two aspects to color contrast to keep in mind:

Graphics. Beautiful graphics are an integral part of the internet, but the information does not always translate well for colorblind people. Graphs and pie-charts can be unreadable if you don’t choose the colors carefully. Color Brewer can provide color-safe options for your graphics. You can also test using the free mac app Sim Daltonism, or the free mac, linux, and windows app Color Oracle.

Text. For text on top of colors, there should be a contrast ratio of at least 4.50. You can test it on the WebAIM Color Contrast Checker by putting in the foreground (or text) color and the background color’s hex codes. Then use the slider to adjust until you get to a 4.5 contrast ratio.

ADA Compliant Forms

Forms should also be ADA compliant. Ideally, you should explicitly say which label goes with which field by using the tag: “for”. The for tag below corresponds to the name tag in the textbox field.

<label for="message">Message:</label><textbox name="message"></textbox>

But there are a few other ways of doing this. The first is using the “aria-label” tag noted above. If you aren’t using labels, which is becoming increasingly common in designs, you can label the actual textbox:

<textbox name="message" aria-label="Message"></textbox>

You can also implicitly show how the label and the field relate to each other by wrapping the field with the label:

<label for="message">Message: <textbox name="message"></textbox> </label>

For a few more options, see the W3 Form Labeling Controls article.

ADA Compliance FREE Tools

You can use free tools to see an overview of your site’s issues. While these can show you the issues, they won’t fix your website. Here are two of my favorites:

Accessibility Insights – a Chrome App or a download for Windows. This gives you the issue, highlights it, and provides a link to the rule you need to follow.

The WAVE Web Accessibility Tool – a website that examples website’s URL and provides feedback on issues. I’ve found false positives are more common on this tool than Accessibility Insights.

WebAIM Checklist – While this does not imply any kind of warranty, this is a helpful checklist.

Summary

ADA Compliancy is vital for businesses of all sizes in America and especially in California. Not only will you avoid large fines ($4,000 is the minimum in California but can range up to $90,000 and more), but you can expand your business base while also doing your part to help those with disabilities have equal access to the internet. It’s a win-win-win situation!