Website Accessibility Checker: 5 Tips To Help Stay Compliant

Justin Harrison
Posted by Justin Harrison on April 1, 2021
Website Accessibility Checker: 5 Tips to Help Stay Compliant

All Guillermo Robles wanted was a pizza.

That’s not much to ask for, is it? After all, pizza is the #1 food that most Americans would want to eat for the rest of their lives (beating out hamburgers, steak, tacos, pasta, and everything else) according to a survey conducted by The Harris Poll in 2020.

Yet, Mr. Robles, a blind man, found that he was unable to order pizza using the Domino’s Pizza website or mobile app even with its screen reading technology. An inaccessible website, argued Robles, is a violation of the Americans with Disabilities Act, which bans discrimination based on disability.

The lawsuit went all the way to the Supreme Court, and its October 2019 ruling maintained that the Domino’s website and mobile app must be accessible under the ADA. Today, although there actually is no law for private entities in America that mandates web accessibility, this high-profile lawsuit has the practical effect of inspiring more businesses to make their digital experiences accessible to the 61 million Americans who have disabilities.

The goal of being compliant, however, isn’t a simple issue. As technologies change — voice and facial recognition, for instance — a website’s accessibility needs to evolve, too. Compliance is a complicated issue.

RELATED: 10 KEY ELEMENTS OF A B2B INBOUND WEBSITE

The Simple Solution: WCAG Conformance

Once upon a time, there was no internet. It’s true! Yet, the Americans with Disabilities Act (ADA) was written and passed in 1990, before the internet became the force it is today. It doesn’t mention websites, nor does it provide standards for making a website accessible.

The challenge is applying the Act in a digital world. As mentioned earlier, there remains no enforceable ADA legal standards when it comes to website accessibility, yet websites and mobile apps are considered “places of public accommodation.” If goods or services are being offered, even if just a small monetary exchange is taking place, a law firm could come knocking if the site doesn’t provide meaningful access and effective communication to people with disabilities.

I could easily slip into the weeds and get into the Act’s implications, court actions, and dozens of other lawsuits. For this article, though, let’s concentrate on the big picture: ADA website compliance (the legal side) comes down to making a website conformant with the Web Content Accessibility Guidelines (WCAG) 2.0 AA and 2.1 AA standards (the technical standards).

5 Tips For Hitting Compliance Guidelines

To be practically compliant with the ADA, your website, mobile app, etc. needs to meet a checklist of about 50 accessibility criteria (38 criteria from 2.0 AA and 12 from 2.1 AA). Again, I could get really deep into every checklist item, but I’m going to cover five specific tips — a quick website accessibility checklist — to help get you mostly there.

Remember I said that changing technology prevents this from being a simple issue? Well, this “moving target” may get even more challenging when 2.2 is released, possibly as early as mid-2021. Until then, let’s get stuff done now!

1. Write Alternative Text

One of the most common accessibility items appearing in lawsuits is missing alt text. With a few exceptions, every image and all non-text content needs alt text in the markup/code.

Without alt text for images, the image/graphic/gif information is inaccessible to a blind person who uses a screen reader, for instance, and to people who turn off images. This is common in areas with expensive or low bandwidth. Plus, the equivalent alt text is available to search engines that cannot see images, boosting SEO performance.

adding image alt text in HubSpot CMS

2. Structure Pages Properly

When it comes to website structure, you should use proper markup techniques, such as heading tags and HTML for ordered and unordered lists. Content should be presented in a meaningful order that reads easily. Visitors should be able to navigate throughout a website in a logical, sequential order.

Detailed instructions must be presented as to not rely on a single sensory ability to access them. The layout of a website’s navigation should be consistent throughout, such as presenting the same links in the same order.

3. Scrutinize Text Color Contrast Ratio

The guideline set in WCAG is to use a color contrast ratio of at least 4.5:1 between all normal text and background; large text (14 point; typically 18.66px), graphics, and user interface components (form input borders, for example) is 3:1.

In RGB hexadecimal format, enter a foreground and background color (for example, #FD3 or #F7DA39) or use the color picker. Use the “lightness” slider to adjust the selected color. Speaking of color, you should not rely on color alone to convey information.

Color Contrast Checker for website accessibility

4. Include Closed Captions For Video Content

Images aren't available to blind people. Similarly, audio isn't available to deaf people. A text transcript (inexpensive to provide) allows audio information to be accessible to people with hearing difficulties. Again, this makes information available to search engines that cannot hear audio, which helps your SEO.

Remember to include accurate closed captioning on all video that contains sound, even live presentations, if possible. For videos that contain relevant information not conveyed using audio, add an audio description of this visual information. Web video hosting services like Wistia make this super easy to do.

5. Consider Keyboard Input

Using a mouse may seem second-nature to some, but many people cannot use one. Anyone with limited motor control, including some older visitors, need another way to navigate. A website is accessible when it doesn’t rely on a mouse; all functionality is available using a keyboard. Assistive technologies that mimic a keyboard, such as speech input, can then be used.

Why Do It? Is This a Quick Fix?

Web developers want to create high-quality websites and web tools. Accessibility is the key, so visitors with visual, speech, auditory, cognitive, neurological, and physical disabilities aren’t excluded from using these products and services.

Making a website conformant with WCAG standards is the right thing to do. It introduces products/services to millions of Americans who have struggled with digital content, giving you more possible customers. Plus, you’re now accessible to investors and possible job prospects.

Why to do it is easy to decide. HOW to do it may not be as clear. The web is loaded with vendors claiming to have “quick fixes” to attain instant accessibility and ADA compliance. Simply injecting JavaScript code into a website using an overlay widget is not the way to go.

True accessibility requires time and manual effort, and it starts with a manual audit that tests a website against WCAG 2.0 AA or 2.1 AA. The resulting report provides an overview of all accessibility issues.

This issue isn’t going anywhere, so getting started now is a smart move. If you wait until you get hit with a demand letter (and settlement), you still have to make the changes. Plus, you run the risk of multiple lawsuits.

Ready to further improve your website and company performance? We’ve found 10 key ways to do that and now offer them to you: Elements of Inbound Website Checklist

Checklist: how to prepare your website for inbound marketing

Topics: Website Design

Click here to get your ebook for Growth-Driven Design website development